JavaScript 停止 "this"关键字在函数调用时发生变化？

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 5 年前。

我想知道。我有一个按钮，按下时可以调用函数。我使用 JQuery 来执行此操作:

this.chose_button.on('click', function() {
  tryInputSong(this, this.link_input.val());
});

问题是我需要“tryInputSong”的输入参数与“this.chose_button”中的“this”关键字相同的对象，而不是“this.chose_button”对象本身。有没有办法阻止“this”关键字将值更改为 this.chose_button 或者我必须以某种方式通过另一个函数传递我想要的对象？

我真的很困惑如何解决这个问题，希望得到一些帮助，谢谢! :)

Answer 1

JS 引入了箭头函数来允许您引用外部 this 值。

this.chose_button.on('click', event => 
  tryInputSong(this, this.link_input.val())
);

因为箭头函数不绑定(bind)自己的本地 this，所以它使用外部环境中的一个。

我上面显示的语法有一个表达式作为函数体。如果您需要多个语句，则可以使用大括号定义主体，就像传统的 function 语法一样。

您仍然可以通过 event.currentTarget 获取对绑定(bind)元素的引用。