Javascript 停止"this"关键字在函数调用时更改？

Question

我在想。我有一个按钮，按下时可以从中调用函数。我使用 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())
);

因为箭头函数不绑定自己的本地this，它使用外部环境中的箭头函数。

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

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

Answer 2

通常的老式解决方法是从您想要的上下文中存储对此的引用，并在以后重用它：

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

您还可以在函数上显式绑定 this 的值：

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

或者，如果您的环境支持 ES6 箭头函数(或者您使用转译器添加相应的 polyfill(，则可以使用不会更改this绑定的箭头函数

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

Answer 3

你可以这样做：

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

或者使用箭头函数：箭头函数没有自己的this;使用封闭执行上下文的this值