今天注意到前端小夥伴用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再使用。