爲什麼箭頭功能表現怪異？

Question

考慮下面的代碼：

function Person (name) { 
    this.name = name; 
    this.showName = function() { console.log(name, this.name);} 
} 

var foo = new Person('foo'); 

var bar = new Person('bar'); 

foo.showName = bar.showName; 

foo.showName(); // prints "bar foo" 

預計，因爲這仍然結合「富」。

箭頭功能

現在：

function Person (name) { 
    this.name = name; 
    this.showName =() => console.log(name, this.name); 
} 

var foo = new Person('foo'); 

var bar = new Person('bar'); 

foo.showName = bar.showName; 

foo.showName(); // prints "bar bar" 

我知道「這」不綁定到箭頭的功能。但是這裏的「foo」的上下文已經在showName（）中改變了。這本身就消除了「綁定」功能的一個用例。背後的原因是什麼？

Answer 1

在箭頭函數中，this在詞法上是解決的，基本上和其他變量一樣，例如，像name。無論函數如何被調用，它的this值將在函數創建爲時確定。

因此，this裏面的bar.showName將始終引用由new Person('bar')創建的實例。

---

另請參閱What does "this" refer to in arrow functions in ES6?和Arrow function vs function declaration/expressions: Are they equivalent/exchangeable?。