Question

Can anyone tell me why my ‘showDiv_boo’ is undefined inside the class´s method?
I also can´t access my class´s methods.

Here´s my class ‘Blink’ class with its properties and methods:

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

So, if I create:

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

You can test… the variable ‘showDiv_boo’, is undefined inside the method.

Even, if I set the showDiv_boo inside the method to true, it won´t call my class´s methods showDiv or hideDiv.

Anyone?

Thanks 🙂

Answer 1

You need to:

1. use var self and call the method via self.startEngine()
2. use an anonymous function to wrap the call in [1] i.e. function(){ self.startEngine(); }

This is because when you just pass this.startEngine or self.startEngine you are just passing the function startEngine without specifying what this is, which in both cases is supplied by the global conext of DOMWindow.

To give an example…

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
}

works to add code to the prototype and if used in the anonymous function will work as expected, but if you just use Blink.startEngine as the callback it is exactly the same as using startEngine only the second is more obviously wrong because there’s no object it is being called on so you’d expect this to be whatever is supplied by the context.

The other way you could do this without using the anonymous function would be

  Blink.startEngine.bind(self)

Which returns a function that will call startEngine with the correct this same as explicitly creating the anonymous function and wrapping the call to self.startEngine()

Heres a link to a fiddle to play around with the differences: http://jsfiddle.net/bonza_labs/MdeTF/