ES6箭头函数的this指向详解

ES6箭头函数的this指向详解

之前写过一篇 ​​Larry：Javascript ：this关键字 详解​​，其实只是解释了普通函数的this用法，今天再给大家补充一下箭头函数的this详解。

箭头函数相信大家在日常开发中用到的地方非常之多，因为它很简洁，可读性强，但是它最大的好处，其实是解决了匿名函数的this指向问题，有利于封装回调函数。

先来个总结：

箭头函数体内的​​this​​对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

下面是普通函数的列子：

var name = 'window'; // 其实是window.name = 'window'var A = { name: 'A', sayHello: function(){ console.log(this.name) }}A.sayHello();// 输出Avar B = { name: 'B'}A.sayHello.call(B);//输出BA.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

从上面可以看到，sayHello这个方法是定义在A对象中的，当当我们使用call方法，把其指向B对象，最后输出了B；可以得出，sayHello的this只跟使用时的对象有关。

改造一下：

var name = 'window'; var A = { name: 'A', sayHello: () => { console.log(this.name) }}A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

我相信在这里，大部分同学都会出错，以为sayHello是绑定在A上的，但其实它绑定在window上的，那到底是为什么呢？

一开始，我重点标注了“该函数所在的作用域指向的对象”，作用域是指函数内部，这里的箭头函数，也就是sayHello，所在的作用域其实是最外层的js环境，因为没有其他函数包裹；然后最外层的js环境指向的对象是winodw对象，所以这里的this指向的是window对象。

那如何改造成永远绑定A呢：

var name = 'window'; var A = { name: 'A', sayHello: function(){ var s = () => console.log(this.name) return s//返回箭头函数s }}var sayHello = A.sayHello();sayHello();// 输出A var B = { name: 'B';}sayHello.call(B); //还是AsayHello.call(); //还是A

OK，这样就做到了永远指向A对象了，我们再根据“该函数所在的作用域指向的对象”来分析一下：

该函数所在的作用域：箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。作用域指向的对象：A.sayHello指向的对象是A。

所以箭头函数s 中this就是指向A啦 ～～

----------------finish-------------

最后是使用箭头函数其他几点需要注意的地方

不可以当作构造函数，也就是说，不可以使用​​new​​命令，否则会抛出一个错误。不可以使用​​arguments​​对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。不可以使用​​yield​​命令，因此箭头函数不能用作 Generator 函数。

逃～

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。