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

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

const logger = require('winston');

const serveFile = ({ filePath, fileType }, res) => {
  logger.verbose(`serving file: ${filePath}`);
  const sendFileOptions = {
    headers: {
      'X-Content-Type-Options': 'nosniff',
      'Content-Type'          : fileType,
    },
  };
  try {
    res.status(200).sendFile(filePath, sendFileOptions);
  } catch (error) {
    logger.error(error);
  }
};

module.exports = serveFile;

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

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

或者，如果您的环境支持ES6箭头功能（或者您使用转换器添加相应的polyfill），那么您可以使用arrow function来更改this.chose_button.on('click', function() { tryInputSong(this, this.link_input.val()); }.bind(this));的绑定

this

Answer 3

你可以这样做：

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

或使用箭头功能：箭头功能没有自己的功能;使用封闭执行上下文的此值

Javascript在函数调用中停止更改“this”关键字？

3 个答案: