javascript - React中點選事件監聽箭頭函數的問題？

Question

概述

剛學前端不久，對於React中的事件監聽寫法有所疑問.
我知道的寫法有：

• 在建構函式中透過bind函數

• 定義函數的時候採用剪頭函數定義

hanlde = (e)=> {

}

• 標籤中使用剪頭函數

#

<button onClick={(e)=>this.handleClick(e)}>

</button>

問題

我不懂的是第三種寫法

<button onClick={(e)=>this.handleClick(e)}>
</button>

我個人認為箭頭函數和bind應該是同一種東西的不同寫法。但是我寫了一個demo

var name = 'outside'

var obj = {
  name: 'inside',
  getName1: function() {
    return function() {
      return this.name;
    };
  },
  getName2: function() {
    var func = function(s) {
      return function() {
        return s;
      }
    };
    return func(this.name);
  },
  getName3: function () {
    var func = ()=> this.name;
    return func;
  },
  getName4: function () {
    var func = function() {
      return this.name;
    };
    func = func.bind(this);
    return func;
  },
  getName5 :function () {
    var func = function() {
      return this.name;
    };
    var func2 = ()=>func();
    return func2;
  }
};
console.log(obj.getName1()());//undefine或outside
console.log(obj.getName2()());//inside 通过闭包解决
console.log(obj.getName3()());//inside 通过箭头函数
console.log(obj.getName4()());//inside 通过bind函数
console.log(obj.getName5()());//undefine或outside ？？？不理解

在getName3、4、5中，getName5回傳的居然不是inside？ ？
問題可能出在我對於箭頭函數以及bind的理解有錯誤？
希望能夠得到前輩指點

Answer 1

5中箭頭函數呼叫func的時候沒有綁定this，所以func的this指向的是window
換成這樣就可以了

  getName5 :function () {
    var func = function() {
      return this.name;
    }.bind(this);
    var func2 = ()=>func();
    return func2;
  }

或這樣：

  getName5 :function () {
    var func = () => this.name;
    var func2 = () => func();
    return func2;
  }

Answer 2

新定義的函數都有自己的 this 值，在瀏覽器中非嚴格模式下，這個 this 指向 window。如果函數作為物件方法被調用，則其 this 指向調用它的物件。範例中getName5()中的函数func， 并非作为obj物件方法被調用，因此，它的 this 指向 window。與箭頭函數無關。

var name = 'outside'
var obj = {
  name: 'inside',
  getName: function () {
    var func = function () {
      return this.name
    }
    return func()
  }
}
console.log(obj.getName()) // outside

Answer 3

@Xeira 說的不錯，箭頭函數定義時詞法內的this就綁定在其外圍詞法作用域了，而普通函數需要呼叫時才會具體綁定。推薦去看看You-Dont-Know-JS中關於this的講解，很是明了