es6箭头方法中this的指向是什么-OK资源网

在es6中，箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象。箭头函数中this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window；即使是call、apply、bind等方法也不能改变箭头函数this的指向。

前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

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

先来个总结：

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

ES6箭头函数中this

（1）默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window
（2）即使是call，apply，bind等方法也不能改变箭头函数this的指向

下面是普通函数的列子：


var name = 'window'; // 其实是window.name = 'window'  var A = {    name: 'A',    sayHello: function(){       console.log(this.name)    } }  A.sayHello();// 输出A  var B = {   name: 'B' }  A.sayHello.call(B);//输出B  A.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); //还是A sayHello.call(); //还是A
登录后复制

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