与传统函数相比，'this”关键字在 ES6 箭头函数中的行为有何不同？

箭头函数和这个

在 ES6 中，箭头函数为定义函数提供了简洁的语法。然而，它们的行为在如何处理 this 关键字方面与传统函数不同。

考虑以下代码：

var person = {
  name: "jason",
  shout: () => console.log("my name is ", this.name) // Error: This is unbound
};

person.shout();

这里，目的是在以下情况下记录“我的名字是 jason”： person.shout() 被调用。但是，输出是“我的名字未定义”。这是因为箭头函数没有自己的 this 绑定。相反，它们从封闭范围继承 this 值。

在这种情况下，封闭范围是全局范围，其中 this 指的是 window 对象。由于 window 对象没有 name 属性，因此 this.name 表达式的计算结果为未定义。

要解决此问题，您可以利用箭头函数不绑定 this 的事实。通过将箭头函数直接放置在对象字面量内，您可以从对象继承正确的 this 值：

var person = {
  name: "jason",
  shout: function() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

或者，您可以使用不带 function 关键字和 : 语法的 ES6 方法声明：

var person = {
  name: "jason",
  shout() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

通过利用这些技术，您可以在箭头函数中有效地使用它并实现所需的输出。

以上是与传统函数相比，'this”关键字在 ES6 箭头函数中的行为有何不同？的详细内容。更多信息请关注PHP中文网其他相关文章！