javascript - Javascript类继承

谁能告诉我为什么我的'showDiv_boo'在类的方法中未定义？
我也无法访问类(class)的方法。

这是我的类“Blink”类及其属性和方法:

function Blink(div) {
    this.div = div
}
Blink.prototype.counter = 0
Blink.prototype.showDiv_boo = true
Blink.prototype.showDiv = function() {
    this.div.style.visibility = 'visible'
}
Blink.prototype.hideDiv = function() {
    this.div.style.visibility = 'hidden'
}
Blink.prototype.startEngine = function() {
    if (this.showDiv_boo) {
        this.showDiv()
    } else if (!this.showDiv_boo) {
        this.hideDiv()
    }
    this.showDiv_boo = !this.showDiv_boo
    this.counter++
}
Blink.prototype.startEffect = function() {
    this.idEffect = setInterval(this.startEngine, 1000 / 45)
}

因此，如果我创建:

_blink = new Blink(myDiv);
_blink.startEffect();

您可以测试...变量'showDiv_boo'，在方法内部未定义。

即使将方法内部的showDiv_boo设置为true，也不会调用类的方法showDiv或hideDiv。

任何人？

谢谢 :)

最佳答案

你需要:

使用var self并通过self.startEngine()调用该方法

使用匿名函数将调用包装在[1]中，即function(){ self.startEngine(); }

这是因为当您仅传递this.startEngine或self.startEngine时，您只是传递了startEngine函数而未指定this是什么，这两种情况均由DOMWindow的全局扩展提供。

举个例子...

function startEngine() {
  ...code omitted...
};

Blink.prototype.startEngine = startEngine;

Blink.prototype.start = function() {
  setTimeout(startEngine, 0);       // obviously wrong, what is this?
  setTimeout(Blink.startEngine, 0); // actually the same as line above, although not as obvious
  setTimeout(startEngine.bind(this), 0); // works correctly
}

可以将代码添加到原型(prototype)，并且如果在匿名函数中使用将按预期工作，但是如果您仅使用Blink.startEngine作为回调，则与使用startEngine完全相同，仅第二个更明显是错误的，因为它没有对象被调用，因此您希望this可以是上下文提供的任何内容。

您无需使用匿名函数即可执行此操作的另一种方法是

  Blink.startEngine.bind(self)

它返回一个函数，该函数将使用正确的startEngine调用this，与显式创建匿名函数并将调用包装到self.startEngine()相同

这是一个小提琴的链接，可以玩这些差异:http://jsfiddle.net/bonza_labs/MdeTF/

StartEngine

javascript - Javascript类继承