4

I'm defining a 'class' in JavaScript by means of prototype.

The first time func() runs, it works, but when it's called the second time, through a setTimeout, it fails because this time it has lost the object context, I.E. this doesn't reference the object anymore but now references window.

Is there a way I can overcome this while still using prototype? or do I need instead to use closures to define a 'class'?

function klass(){}

klass.prototype = {
  a: function() {
    console.log( "Hi" );
  },    
  func: function(){
    this.a();
    setTimeout( this.func, 100 );
  }
};

var x = new klass();
x.func();
Petruza
  • 11,744
  • 25
  • 84
  • 136
  • 3
    Just fyi functions don't have any context on their own, it is resolved every time the function is called and only for that call. So it doesn't matter where and how the function is defined, it only matters how the function is called at a particular time. `x.func()` the function is called as a property of `x`. `var y = {func: x.func}; y.func()` the function is called as a property of `y` and the `this` is `y` for that call. See where I am going with this? setTimeout always calls the function with window set to `this`. – Esailija Dec 22 '11 at 22:23
  • possible duplicate of [JavaScript Callback Scope](http://stackoverflow.com/questions/183214/javascript-callback-scope) – Felix Kling Dec 22 '11 at 22:29

3 Answers3

8

Use Function.prototype.bind:

setTimeout( this.func.bind(this), 100 );

From Mozilla Developer Network:

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

if (!Function.prototype.bind) {  
  Function.prototype.bind = function (oThis) {  
    if (typeof this !== "function") {  
      // closest thing possible to the ECMAScript 5 internal IsCallable function  
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");  
    }  

    var aArgs = Array.prototype.slice.call(arguments, 1),   
        fToBind = this,   
        fNOP = function () {},  
        fBound = function () {  
          return fToBind.apply(this instanceof fNOP  
                                 ? this  
                                 : oThis || window,  
                               aArgs.concat(Array.prototype.slice.call(arguments)));  
        };  

    fNOP.prototype = this.prototype;  
    fBound.prototype = new fNOP();  

    return fBound;  
  };  
}
Thomas Eding
  • 35,312
  • 13
  • 75
  • 106
  • An important consideration here: This will only work for browsers with ECMAScript 5 implemented. That means only NEW browsers will work: FF4+, IE9+ – Jonathan Apr 16 '12 at 13:08
  • 1
    Rather, it is only built-in on those browsers. One can use the above definition otherwise. – Thomas Eding Apr 16 '12 at 16:58
3

You can wrap it in a function:

var self = this;  // reference the value of "this"

setTimeout( function() {self.func();}, 100 );
2

Use Function.prototype.bind, or wrap your setTimeout callback in its own closure:

    func: function() {
        var self = this;
        self.a();
        setTimeout( function() {
            self.func();
        }, 100);
    }
Alnitak
  • 334,560
  • 70
  • 407
  • 495