乐闻世界logo
搜索文章和话题

可以在箭头函数中绑定“ this ”吗?

7 个月前提问
5 个月前修改
浏览次数17

1个答案

1

在JavaScript中,箭头函数与普通函数(如函数表达式或函数声明)有一个关键的不同:箭头函数不绑定自己的 this,它们会捕获其所在上下文的 this 值,并作为自己的 this 值使用。

由于箭头函数没有自己的 this 绑定,尝试在箭头函数中绑定 this 是不起作用的。举例来说,如果你尝试使用 .bind().call().apply() 方法改变箭头函数的 this 指向,这些方法将不会对箭头函数产生预期的绑定效果。

例如,考虑下面的代码段:

javascript
let group = { title: "Our Group", members: ["John", "Pete", "Alice"], showList() { this.members.forEach( (member) => { console.log(this.title + ': ' + member); } ); } }; group.showList();

在这个例子中,showList 方法中的箭头函数继承了 showList 方法的 this,即指向 group 对象。因此,箭头函数内部的 this.title 成功地指向了 group.title

如果我们尝试将箭头函数替换为一个常规函数并使用 .bind(this),结果会相同,但不是因为 .bind() 起了作用,而是因为普通函数需要显式绑定 this

javascript
showList() { this.members.forEach(function(member) { console.log(this.title + ': ' + member); }.bind(this)); // 使用 .bind(this) 来绑定 this }

总结来说,箭头函数不支持使用 .bind().call().apply() 方法来改变其 this 的指向,它们自动捕获其创建时所处上下文的 this 值。这种特性使得箭头函数在处理 this 时更简单、更直观,特别是在需要维护上下文连贯性的场景中。

2024年6月29日 12:07 回复

你的答案