javascript - 为什么箭头函数表现得很奇怪？

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"

这是预期的，因为它仍然绑定(bind)“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”不会绑定(bind)到箭头函数。但是这里“foo”的上下文在 showName() 中发生了变化。这本身就删除了“绑定(bind)”功能的一个用例。背后的原因是什么。

Answer 1

在箭头函数中，this 是词法解析的，基本上就像任何其他变量一样，例如像名称。函数如何调用并不重要，它的 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? .