typescript 屬性默認值使用箭頭函數 this指向問題

今天注意到前端小夥伴用react 定義component class的方法的時候是經過箭頭函數的方式，表示好奇。

class Test extends React.Component {
  public fun1 = () => {
    console.log(this);
  };

  fun2() {
    console.log(this);
  }
}

　如上代碼中fun1的定義方式。因而感到好奇，fun1中的this是什麼。

   若是咱們套用箭頭函數的概念，咱們可能認爲，這中間的this是否會指向環境變量global或window。然而卻不是這樣的，而是指向new Test()實例。

   咱們能夠看如下的等價寫法：

class Test extends React.Component {
  constructor() {
    super();
    this.fun1 = () => {
      console.log(this);
    };
  }

  fun2() {
    console.log(this);
  }
}

也就是在屬性默認值中定義的箭頭函數，等價於構造函數中的定義，全部this指向的是實例。

 

那麼爲什麼要用定義箭頭函數屬性的方式來定義方法呢？

它和fun2的方式的this指向的不是都是實例嗎？

const obj = new Test();
obj.fun1();// 指向obj
obj.fun2();// 指向obj

//差別
const fun1=obj.fun1;
const fun2=obj.fun2;

fun1();// 指向obj
fun2();// global

如上代碼，咱們若是直接用實例來調用，則沒什麼差別。

可是，當咱們先賦值給變量，因爲fun2是綁定調用者的，因此這裏爲全局變量。

 

因此直接定義箭頭函數屬性的效果在於它直接綁定了實例，能夠直接使用，這個對應react的jsx中使用是比較方便的，否則使用fun2模式，就須要手動綁定this再使用。