Question

我想从同一个类内的另一个函数调用一个类内的函数。 this.myFunction()可以很好地工作。但是，例如当调用函数由单击事件处理程序触发时，该类的this将不再可用。

通常我会使用new MyClass().myFunction()，但在这种情况下，我将丢失“第一个”实例中的值和对象。

就我而言，我开始了一个间隔，我想在单击按钮后清除该间隔。但是，当我创建班级的新实例时，该间隔当然不再可用。

我应该如何从functionToCall()致电myButton.addEventListener("click", function () {？还是这是一种普遍错误的方法？

MyClass.js

export class MyClass {

constructor() {
 this.refreshIntervalId = 0;
}

functionToCall() {

 clearInterval(this.refreshIntervalId); // this has to be the instance

}

buttonFunction() {

 let myButton = document.getElementById(myButton);

 myButton.addEventListener("click", function () {
  this.functionToCall(); // doesn't work (of course)
 });

}

startInterval() {
 this.refreshIntervalId = setInterval(() => {
   this.buttonFunction()
 }, 1000);
}

}

index.js

import {
  MyClass
} from './MyClass';

let myClass = new MyClass();
myClass.startInterval();

Answer 1

如果您更换

myButton.addEventListener("click", function () {
   this.functionToCall(); // doesn't work (of course)
});

使用

myButton.addEventListener("click", () => {
   this.functionToCall();
});

然后在处理程序中，this将绑定到声明箭头函数的作用域中的this。有关更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions。

或者，您可以使用Function.bind方法将函数内的this值显式绑定到“外部” this：

myButton.addEventListener("click", (function () {
   this.functionToCall();
}).bind(this));

Answer 2

这很好用！

就我而言，我仍然仍然需要单击按钮作为对象。绑定this意味着，您为点击的按钮松了this 使用.bind方法，您可以绑定多个对象（我不知道）。

最终代码：

// listener
    let myButton = document.getElementsByClassName('myButton');
    for (var i = 0; i < myButton.length; ++i) {
      let customVar; // this gets bind with value i
      myButton[i].addEventListener("click", (function () {
        let value = myButton[numbr].getAttribute("data-value");
        this. functionToCall(value);
     }).bind(this,customVar = i));

从异步类函数调用类函数

2 个答案: