CODEWITHSUNDEEP
javascript
Marcelo Noronha
Marcelo Noronha

Reputation: 815

Javascript Class Inheritance

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

Upvotes: 1

Views: 915

Answers (4)

JCOC611
JCOC611

Reputation: 19709

Along with setting a temporal variable to store this, you must call the startEngine() function with that variable:

Blink.prototype.startEffect = function(){
   var self = this;
   self.idEffect = setInterval(function(){ self.startEngine.call(self); }, 1000/45);
}

Note the .call(self), which basically calls the function with the variable self, so the variable this in startEngine will be the correct one.

Upvotes: 0

craigb
craigb

Reputation: 16907

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/

Upvotes: 3

MoarCodePlz
MoarCodePlz

Reputation: 5176

If you do the following, you will find it is defined

var x = new Blink('hello');
x.showDiv_boo

Javascript uses prototypical inheritance. While showDiv_boo may not be explicitly defined within the instance of Blink that you now have, it does exist within the prototype that Blink inherits from. When you try referencing showDiv_boo from within the object, the Javascript engine realizes the object does not own a member by that name and then will check its prototype.

Upvotes: 0

JaredPar
JaredPar

Reputation: 754565

The reason why is that startEngine is called from setInterval. The way in which this callback is invoked causes startEngine to have a different value for this than startEffect. You need to save this in order to maintain it in the callback. For example.

Blink.prototype.startEffect = function () { 
  var self = this;
  self.idEffect = setInterval(function () { self.startEngine(); }, 1000 / 45);
};

Upvotes: 5

Related Questions