javascript - 两个原型(prototype)函数内的属性值不相同

Question

我在构造函数中初始化了 this.interval=null ，然后我想更改prototype.blink中的最后一个，但是当我在prototype.stopBlink()中对其进行控制台时，它给出了null值

function Mesh(name, material) {
  this._name = name;
  this._material = material;
  this.interval = null;
}

Mesh.prototype.blink = function(obj, delay, box) {
  this.interval = (() => {
    var Toggle = true
    return setInterval(() => {
      if (Toggle)
        changeMaterial(obj, box);
      else {
        changeMaterial(obj, this._material);
      }

      Toggle = !Toggle;
    }, delay);
  })();

  console.log(this.interval);
}

Mesh.prototype.stopBlink = function(obj, duration) {

  setTimeout(function() {
    console.log(this.interval);

    clearInterval(this.interval);
  }, duration);
}

Answer 1

这是一个简化为主要移动部件的工作示例。它在 stopBlink 的 setTimeout 中使用箭头函数。这很重要，因为您希望从词法上捕获 this 的值，而不是从超时调用中捕获。目前尚不清楚为什么要在 blink() 中使用立即返回的函数，但我留下了它:

function Mesh(name) {
  this._name = name;
  this.interval = null;
}

Mesh.prototype.blink = function(delay) {
  var Toggle = false
  this.interval = (() => {
    return setInterval(() => {
      console.log(this._name, " blinking ", "Toggle", Toggle)
      Toggle = !Toggle;
    }, delay);
  })();
  console.log("interval in blink:", this.interval)

}

Mesh.prototype.stopBlink = function(duration) {

  setTimeout(() => {
    console.log("interval in stop: ", this.interval)
    clearInterval(this.interval);
  }, duration);
}

let m = new Mesh("mesh")
m.blink(200)
m.stopBlink(1000)