Question

我以为我理解了this和箭头功能之间的关系，但下面的片段让我质疑我的理解。

let person = {
  name: 'Jim',
  sayName: () => {
    console.log(this.name);
  }
};

person.sayName();

我理解箭头函数捕获封闭上下文的this值。我期待this成为对象，而不是Window。

有人可以帮我理解为什么会这样吗？

Answer 1

你对箭头函数的理解大多是正确的：箭头函数有一个词法this，它在箭头函数中的值由周围的范围决定。

您可能认为this在person对象字面值中获得了不同的值。 This is not the case

那么让我们看一下this在你的（全局）范围内引用的内容：

console.log(this === window); // true

let person = {
  name: 'Jim',
  test: console.log(this === window), // true
  sayName: () => {
    console.log(this === window); // true
  }
};

person.sayName();

如您所见，当创建分配给sayName的箭头功能时，this会引用window对象。

Answer 2

没有“this”的绑定，所以这是你尝试过的工作版本：

let person = {
  name: 'Jimmy the Greek',
  sayName: (obj) => {
    console.log(obj.name);
  }
};

person.sayName(person);

更多内容请阅读Mozilla DEV。

Answer 3

TLDR;

以这种方式思考，“如果我使用非箭头函数，那将是this”然后您可以回想起箭头函数中的this将是更外部的范围{{ 1}}与其对应物相比。

示例

this

对象

3 个答案: