分享一个关于this对象的编程小技巧，如何使用箭头函数避免this对象混淆？
分享一个关于this对象的编程小技巧，如何使用箭头函数避免this对象混淆？
以微信小程序举例。小程序的主要语言是js，使用小程序也方便说明我们接下来要讲的问题。
一
首先，实现一个正常的效果：
wxml:
<button bind:tap="startAnimate" type="primary">开始</button>
js:
startAnimate(){
this.setData({
percentValue:0
})
this.setData({
percentValue:100
})
}效果：
没问题。
二
接下来需求改变一下，先弹出一个模态对话框。在用户单击“确定”后，再开始动画。
代码：
wxml:
<button bind:tap="onTap" type="primary">开始</button>
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 undefined
TypeError: 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日