箭头函数中的this指向问题

箭头函数没有自己的 this，它内部的 this 是外层代码块的 this，也就是定义箭头函数时所在的对象。

ES6 标准入门里面对箭头函数 this 的指向有如下说法：

函数体内的 this 对象就是定义时所在的对象，而不是调用时所在的对象。

一般this 对象的指向是可变的，但是在箭头函数中，this 的指向是固定的。

普通函数

普通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window

function b() {
    function a(){ console.log(this) }
    let c = function() {a()}
    let obj2 = {a,c}
    obj2.a()//打印出obj2,打印出调用时的对象obj2
    obj2.c()//打印出window,打印出直接调用时的对象window
}
let obj = {b}
obj.b()//使函数b内上下文this为obj

箭头函数

箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this

function b() {
    let a = () => console.log(this)
    let c = function() {a()}
    let obj2 = {a,c}
    obj2.a()//打印出obj,打印出声明时的上下文,而不是调用它的对象
    obj2.c()//打印出obj,打印出声明时的上下文，而不是调用时的上下文
}
let obj = {b}
obj.b()//使函数b内上下文this为obj

ES6的箭头函数可以改写成ES5，如下：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
// ES5
function foo() {
  var _this = this;
 
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

箭头函数中的this指向问题

普通函数

箭头函数

推荐阅读