为什么箭头函数的行为很奇怪？

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"

这是预期的，因为它仍然绑定“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"

我知道“this”不绑定到箭头函数。但是这里“foo”的上下文在 showName() 中发生了变化。这本身消除了“绑定”功能的一个用例。背后的原因是什么。

Answer 1

在箭头函数内部，this 是在词法上解析的，基本上就像任何其他变量一样，例如喜欢name。不管函数是如何调用的，它的this值将在函数被创建时确定。

因此，bar.showName 中的this 将始终引用new Person('bar') 创建的实例。

---

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