JavaScript 中 this 关键字和箭头函数的行为解释

JavaScript 中 this 关键字和箭头函数的行为解释

以下代码演示了在 JavaScript 中 this 关键字和箭头函数的不同行为：

const people = {
  name: '',
  hello() {
    console.log(this.name)
  },
  hey: () => {
    console.log(name, 22)
  }
}
people.hello()
people.hey()

解释：

• people.hello() 会打印出空字符串，因为 this 关键字在 hello 方法中指向了 people 对象，所以 this.name 就是 people 对象的 name 属性，而初始时 name 属性为空字符串。

• people.hey() 会报错，因为箭头函数中的 this 关键字不会绑定到任何对象，它的上下文是定义时的上下文。在这种情况下，箭头函数 hey() 是在全局作用域中定义的，所以它的上下文是全局对象。因此，console.log(name, 22) 中的 name 是在全局作用域中寻找 name 变量，但是该变量未定义，所以会报错。

总结：

• 在普通函数中，this 关键字的值取决于函数的调用方式。在对象方法中，this 指向调用该方法的对象。
• 箭头函数没有自己的 this 绑定，它继承了定义时的上下文。

建议：

• 为了避免混淆，在对象方法中尽量使用普通函数，而不是箭头函数。
• 如果需要访问对象属性，请使用 this 关键字。
• 如果需要访问全局变量，请在全局作用域中声明它们。