关于ES6箭头函数的this

首先说明一下：

所有的箭头函数都没有自己的this，都指向外层，这个外层是指外层作用域，作用域只存在于函数中，没有外层函数即没有外层作用域之说
箭头函数不能修改this，无论用call、bind还是apply都不行

列举几个例子：
sample1：

function foo() {
  setTimeout( () => {
    console.log("id:", this.id);
  },100);
}

var id = 21; // 加入这行

foo.call( { id: 42 } );    //输出42

上面的例子中的箭头函数，其实只是一个参数，可能改成下面这样比较好理解：

function foo() {
  var f = () => {
    console.log("id:", this.id);
  };
  setTimeout(f, 100);
}

var id = 21; // 加入这行

foo.call( { id: 42 } );    //输出42

分析：箭头函数的父级作用域就是foo(){}函数，该函数的this被 { id: 42 } 绑定了，所以最后输出42.

sample2：
将一段ES6的代码转换成ES5了，看看ES5中的this如何指向：
关于ES6箭头函数的this
左边是ES6，右边是ES5。
在arrayObject中，printName只是作为一个属性，该属性的值是一个箭头函数，其外层并没有函数包裹，所以外层没有函数作用域，所以其只能沿着作用域链一直往上找最终找到window，于是这个箭头函数中的this就是指向的window。我们从转译成的ES5代码也可以看出来，var _this = void 0; 这句话是放在全局上面的，而printName对应的箭头函数里面，console.log 的正是 _this。

同理，在functionObject中，printName属性对应的值是一个function(){}，这个function里面包裹了一个箭头函数，此时该箭头函数中的this指向外层函数（就是printName属性对应的那个function(){}）作用域中的this，而该外层函数作用域中的this指向的是functionObject这个对象，所以箭头函数中的this打印出来的结果就是functionObject对象。另外，可以从转译的ES5的代码看到，var _this = this; 这一句就是将外层函数作用域的中this赋值给_this2，
而_this2就是function里面箭头函数想要打印的值。

其实还有很多可以补充，但是先解决最疑惑的。
还不够清晰的，可以去看看我的求助贴传送门

欢迎大家补充~

关于ES6箭头函数的this

相关推荐