以微信小程序举例。小程序的主要语言是js，使用小程序也方便说明我们接下来要讲的问题。
一
首先，实现一个正常的效果：
wxml:bind:tap=js:startAnimate(){ this.setData({ percentValue:0 }) this.setData({ percentValue:100 })}效果：
没问题。
二
接下来需求改变一下，先弹出一个模态对话框。在用户单击“确定”后，再开始动画。
代码：
wxml:bind:tap=js:onTap(e){ // 模态弹窗 wx.showModal({ title: 'start?', success(res){ if (res.confirm) { console.log('用户点击确定') this.startAnimate() } else if (res.cancel) { console.log('用户点击取消') } } })},startAnimate(){ this.setData({ percentValue:0 }) this.setData({ percentValue:100 })}现在执行就有问题了，调试区爆出了一个错误：
Cannot read property 'startAnimate' of undefinedTypeError: Cannot read property 'startAnimate' of undefined动画也没有如期启动。为什么？
三
因为在小程序接口的success回调函数中，简写等于带function关键字的写法。例如：
wx.showModal({ title: '提示', success (res) { ... }})相当于：
wx.showModal({ title: '提示', success: function(res) { ... }})而是异步回调的function中，this对象并非指表面上我们看到的wx.showModal代码所在的对象。
解决这个问题的方法也很简单，只要换用箭头函数就可以了：
onTap(e){ wx.showModal({ title: 'start?', success:(res)=>{ ... } })}在这个代码中，只是将原来的 success(res) 改成了 success:(res)=> 。
为什么使用箭头可以呢？
四
因为在箭头函数中，this对象与封闭词法环境中的this保持一致。换一句话，箭头函数中的this，是定义与执行它的函数中this对象。或者我们可以理解为，箭头函数是没有this对象的。箭头函数中的this，取决于它身处何处。
那么，回顾一下，this是什么？
在非全局作用域下指代“当前”对象
this是当前代码上下文执行环境中的一个属性，是一个在运行时确定身份，同时又不能在编码时指定的一个动态对象。
一般我们都是在一个函数或方法中使用this，这个时候this指代什么，本质上取决于当前函数是由谁调用的。例如看下面这段代码：
// 取决于谁调用它let obj = { prop: 60, func: function() { return this.prop; }};console.log(obj.func()); // 60在这段代码中，func是由obj调用的，所以在func方法内部，this就指代obj这个对象。
考虑一种特殊的情况，那么在全局作用作用域下，this指代谁呢？
在全局作用域下this指代全局对象
如果函数是全局函数，是在全局使用域中调用的，那么this等于全局对象。这个全局对象，在浏览器宿主环境中指window对象。在微信小程序宿主环境中，没有window对象，全局对象在默认项目配置下是undefined。在Node.js宿主环境中，全局对象是global。
这是在没有开启严格模式的情况下，假如我们开启了严格模式又如何呢？
严格模式
对于这个代码：
function f1(){ return this;}f1() === window; //在浏览器中全局对象是window// 输出 true但是如果仅添加一行声明：
"use strict";function f1(){ return this;}f1() === window; //在浏览器中全局对象是window// 输出 false输出结果就由true变成了false。
这是因为"use strict"开启了js的严格模式，在严格模式下，全局函数中的this等于undefined。
上文中我们提到，小程序中默认没有全局对象。这句话其实不全面。小程序在项目默认开启了ES6转ES5功能的情况下，是自动启用严格模式的，所以这个时候我们测试代码，输出的是undefined。
但如果我们将项目配置中的“ES6转ES5”反选，将输出一个window对象。为什么会输出window对象？不是说小程序宿主环境中没有window对象吗？
iOS JavaScriptCore WKWebView安卓 V8 chromium定制内核小程序开发者工具 NWJS Chrome WebView这是由于我们是用微信开发者工具测试的缘故。微信三端，包括iOS、Android与开发者工具，对小程序运行环境的实现并不一致。在开发者工具中，渲染是基于Chrome WebView实现的，这实际上仍然是一个浏览器的宿主环境。
但是在手机上测试，这个值打印出来是不一样的。
五
this对象虽然不能在编码时赋值，但是有其它方法变换this对象。bind、call、apply这三个方法都可以。接下来我们看一看，如何用bind解决本文开始遇到的问题。
代码：
onTap(e){ let startAnimate = this.startAnimate.bind(this) // 模态弹窗 wx.showModal({ title: 'start?', success(res){ if (res.confirm) { console.log('用户点击确定') startAnimate() } else if (res.cancel) { console.log('用户点击取消') } } })},只需要在bind第一个参数传递this对象，就可以了。apply与call的使用方法是类型的，也是在第一个参数的地方传递this对象；不同处在于bind只绑定不执行，而后两者是马上执行的。
本质上这三个方法改变的是方法的调用者，所以方法内部的this也改变了。
六
最后总结一下，虽然bind等方法可以改变方法的调用者对象，借此改变this对象。但在大多数情况下，我们使用不捆绑this的箭头函数，来避免this对象的混淆问题，是最简单省事的方法。
11月7日
