时间戳

首页 > 解决方案 > 如何将此关键字传递给javascript类函数

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

问题描述

undefinded尝试this.numberObject从另一个函数访问时遇到错误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);
  }

但是，这感觉有点多余，因为我已经在构造函数中引用了元素 Object。我希望该功能init在页面加载后运行。

有没有更好的办法？

谢谢

标签： javascriptclassthis

解决方案

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

要解决问题，您可以尝试执行类似的操作

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);

你在哪里绑定this instance你class的函数addOneToElement。

推荐阅读