1.jpg
OK,对于箭头函数的this
用一句话概括：箭头函数中的this指向的是定义时的this，而不是执行时的this。
如果上面这句话听的是懂非懂或者完全不懂的，没关系，下面会有案例讲解。
举个栗子
来看看this的一个使用案例：
//定义一个对象
var obj = {
x:100, //属性x
show(){
//延迟500毫秒，输出x的值
setTimeout(
//匿名函数
function(){console.log(this.x);},
500
);
}
};
obj.show();//打印结果：undefined
案例中，我们的obj对象中有一个属性x和一个属性show( )方法（用的是对象的简洁表示法，[第九节已讲解，点击查看](http://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654084&idx=1&sn=e56effc319f448f5744970e767997461&scene=21#wechat_redirect)），show( )通过this打印出x的值。可最后一句代码执行后，我们打印出的结果是undefined。这是为什么呢？难道x的值不是100吗？
没错，x的值确实是100，但问题出在了this上，当代码执行到了setTimeout( )的时候，此时的this已经变成了window对象（setTimeout( )是window对象的方法），已经不再是obj对象了，所以我们用this.x获取的时候，获取的不是obj.x的值，而是window.x的值，再加上window上没有定义属性x，所以得到的结果就是：undefined。
我们可以用一些ES5中的知识来巧妙地避过这个坑，但是，我们今天主要介绍的是ES6的箭头函数。
箭头函数闪亮登场
如果使用箭头函数来编写同样的一段代码，得到的this.x又是另一番景象。我们来试试看：
//定义一个对象
var obj = {
x:100,//属性x
show(){
//延迟500毫秒，输出x的值
setTimeout(
//不同处：箭头函数
() => { console.log(this.x)},
500
);
}
};
obj.show();//打印结果：100
同样的一段代码，唯一的不用就是setTimeout中，原本的匿名函数用箭头函数代替了，你可以往上翻，对比着看两段代码的不同之处。此外，最大的不同的是打印结果，用箭头函数编写的这段代码，成功地打印出了我们想要的结果：100。
为什么是这样？正如文章第三段所概括：
箭头函数中的this指向的是定义时的this，而不是执行时的this
当定义obj的show( )方法的时候，我们在箭头函数编写this.x，此时的this是指的obj，所以this.x指的是obj.x。而在show()被调用的时候，this依然指向的是被定义时候所指向的对象，也就是obj对象，故打印出：100。
以上就是箭头函数中this的指向问题讲解！如果看完有点绕的话，可以重看一遍，**看慢一点，学得更快**！
再次感谢 “断线人偶”，“Better” 2位童鞋的提醒，也希望更多童鞋像他们一样参与互动，一起学习一起进步，不管你处于哪个学习阶段，这里都欢迎。
补课小结
ps ：箭头函数的this指向的是定义时的this对象，而不是执行时的this对象。
更多前端学习内容文章干货请关注我的专栏(不断更新)
阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶
在这里我给大家准备了很多的学习资料
网友评论