JavaScript 中箭头函数和常规函数的'this”关键字有何不同？

箭头函数和无上下文的“This”

在 ES6 中，箭头函数为函数声明提供了简洁的语法。然而，箭头函数和传统函数之间的一个关键区别是它们对“this”关键字的处理。

当您在对象内部使用箭头函数时，如给定代码所示：

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

箭头函数中的“this”关键字并不引用“person”对象。相反，它指向创建箭头函数的作用域，在本例中是全局作用域。因此，当调用“person.shout()”时，它会记录“我的名字是”，而没有“jason”属性。

要解决此问题，您可以使用常规函数语法而不是箭头函数：

var person = {
  name: "jason",

  shout: function() {
    console.log("my name is ", this.name)
  }
}

在常规函数中，“this”指的是拥有该函数的对象。因此，它在调用时会正确输出“my name is jason”。

或者，您可以利用 ES6 方法声明语法，它类似于箭头函数语法：

var person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name)
  }
}

使用这种语法，函数声明省略了冒号（:）和“function”关键字。但是，它仍然使用常规函数声明语法，确保“this”绑定到对象。

以上是JavaScript 中箭头函数和常规函数的'this”关键字有何不同？的详细内容。更多信息请关注PHP中文网其他相关文章！