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

罗曼
  • 15

之前看一个手写promise的时候,作者也是用这种class箭头函数写法,把resolvereject写成箭头函数,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


回复
阅读 575
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是指向类的实例的,而由于他是使用箭头函数声明的,所以相当于想成了一个闭包,永久的指向了类的实例

你知道吗?

宣传栏