为什么 class 里的箭头函数 this 的指向始终正确呢？

Question

之前看一个手写promise的时候，作者也是用这种class箭头函数写法，把resolve和reject写成箭头函数，executor(this.resolve, this.reject), 这样后期回调的时候this就会始终指向promise实例，当时没怎么在意。
今天在看react的时候发现class组件里的事件处理程序是直接接收一个函数指针，显然，直接传递会丢失this，有几种方法可以让this始终指向当前组件实例，其中有个方案就是 写成这种箭头函数的形式。示例代码如下。

const foo = {
  func: () => {
    console.log(this);
  }
}

foo.func(); // window

class Bar {
  func = () => {
    console.log(this); // 始终指向 Bar
  }
}

let bar = new Bar();
bar.func();  // 输出 Bar 为什么不是 window ?

// 为什么赋值后 this 不会丢失 ?
let baz = bar.func; 
baz(); // Bar

Answer 1

上面的写法是声明对象，对象中箭头函数的this和声明环境有关，这个应该没有什么问题。

下面的写法是声明类，声明类一般写法是

class Bar {
  func(){
    console.log(this);
  }
}

这种写法是在构造函数的prototype上添加函数，除此之外还有一种写法就是

class Bar {
  func = () => {
    console.log(this); // 始终指向 Bar
  }
}

这种写法和上面的不同，这种写法是定义类的实例的属性，相当于下面写法

class Bar {
  constructor(){
    this.func = () => {
      console.log(this); // 始终指向 Bar
    }
  }
}

此时的this是指向类的实例的，而由于他是使用箭头函数声明的，所以相当于想成了一个闭包，永久的指向了类的实例