箭头函数如何处理 JavaScript 中的'this”关键字？-js教程-PHP中文网

箭头函数如何处理 JavaScript 中的'this”关键字？

Patricia Arquette

发布： 2024-12-10 10:19:10

原创

514 人浏览过

How Do Arrow Functions Handle the `this` Keyword in JavaScript?

箭头函数和 'this'

在 ES6 中，箭头函数引入了一种新的方法定义方式。然而，在访问“this”关键字时，箭头函数和传统函数之间存在显着差异。

问题：

考虑以下代码：

var person = {
  name: "jason",

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

person.shout() // Should print out my name is jason

登录后复制

虽然预期的结果是打印“我的名字是杰森”，但控制台只输出“我的名字是。”这是因为箭头函数在“this”绑定方面与传统函数的行为不同。

说明：

与传统函数不同，箭头函数不会绑定 ' this' 关键字到包含范围。相反，它们从周围的上下文继承“this”绑定。上例中，箭头函数中的“this”指的是全局对象，而不是“person”对象。

解决方案：

有几种解决此问题的方法：

使用 Bound函数：

// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;

登录后复制

使用传统函数：

// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };

登录后复制

使用ES6方法声明：

// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

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

登录后复制

通过了解箭头函数关于 'this' 绑定的不同行为，您可以在 ES6 中编写有效且灵活的代码。

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