如何将此关键字传递给 javascript class 函数

Question

我在尝试从另一个函数 init 访问 this.numberObject 时遇到 undefinded 错误 init。

我很确定这是因为我的 this 关键字引用了 window 对象。

我的问题是我想不出一种优雅的方式来构建我的代码。

当前代码：

class IncrementNumbers {
  constructor() {
    this.numberObject = document.querySelector(".incrementNum");
    if (this.numberObject != null) {
      console.log(this.numberObject.innerHTML);
      this.num = this.numberObject.innerHTML;
      this.events();
    }
  }

  events() {
    console.log("events function ran");
    this.init();
  }

  init() {
    let target = 345;
    let current = 0;
    function addOneToElement() {
      if (current === target) {
        clearInterval(addOne);
      }
      current++;
      this.numberObject.innerHTML = current; <---- ERROR HERE
    }
    let addOne = setInterval(addOneToElement, 10);
  }
}

export default IncrementNumbers;

错误：

IncrementNumbers.js:44 Uncaught TypeError: Cannot set property 'innerHTML' of undefined

我可以通过添加

来修复错误

  this.numberObject = document.querySelector(".incrementNum");

到以下函数

init() {
    let target = 345;
    let current = 0;
    function addOneToElement() {
      this.numberObject = document.querySelector(".incrementNum");  <--- ADDED HERE
      if (current === target) {
        clearInterval(addOne);
      }
      current++;
      this.numberObject.innerHTML = current;
    }
    let addOne = setInterval(addOneToElement, 10);
  }

然而，这感觉有点多余，因为我已经在我的构造函数中引用了元素对象。页面加载后，我想要 init 到运行的功能。

有没有更好的方法？

谢谢

Answer 1

您的问题似乎来自 this 对象的错误传播。
在您的函数 init 中，您设置了一个名为 addOneToElement 的新函数，该函数在 setInterval 内部调用，此 setInterval instance 无法访问 [= class.

的 12=] 元素

要解决此问题，您可以尝试执行类似

的操作

class IncrementNumbers {
  constructor() {
    this.numberObject = document.querySelector(".incrementNum");
    if (this.numberObject != null) {
      console.log(this.numberObject.innerHTML);
      this.num = this.numberObject.innerHTML;
      this.events();
    }
  }

  events() {
    console.log("events function ran");
    this.init();
  }

  init() {
    let target = 345;
    let current = 0;
    function addOneToElement() {
      if (current === target) {
        clearInterval(addOne);
      }
      current++;
      this.numberObject.innerHTML = current; // <---- ERROR HERE
    }
    let addOne = setInterval(addOneToElement.bind(this), 10);
  }
}

export default IncrementNumbers;

let addOne = setInterval(addOneToElement.bind(this), 10);

将 class 的 this instance 绑定到函数 addOneToElement.

Answer 2

问题是内部函数 addOneToElement 在 init 中创建了自己的 this 上下文。

一个简单的解决方法是使用没有 this 上下文的箭头函数：

class IncrementNumbers {
  init() {
    let target = 345;
    let current = 0;
    // Use an arrow function here.
    const addOneToElement = () => {
      if (current === target) {
        clearInterval(addOne);
      }
      current++;
      this.numberObject.innerHTML = current; <---- ERROR HERE
    }
    let addOne = setInterval(addOneToElement, 10);
  }
}

另一种选择是将 this 上下文绑定到 addOneToElement:

let addOne = setInterval(addOneToElement.bind(this), 10);

如何将此关键字传递给 javascript class 函数

how to pass this keyword to javascript class functions

javascript

class

this