javascript - Passing a prototype's function as parameter without losing the 'this' context - Stack Overf

admin管理员组

文章数量:1279207

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 overe 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();

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 overe 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();

• javascript
• function-prototypes
• prototype-programming

Share Improve this question Follow edited Sep 13, 2017 at 17:02 user663031 asked Dec 22, 2011 at 22:14 PetruzaPetruza 12.3k2626 gold badges8787 silver badges143143 bronze badges 2

• 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 Commented Dec 22, 2011 at 22:23
• possible duplicate of JavaScript Callback Scope – Felix Kling Commented Dec 22, 2011 at 22:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Use Function.prototype.bind:

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

From Mozilla Developer Network:

https://developer.mozilla/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;  
  };  
}  

You can wrap it in a function:

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

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

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

本文标签： javascriptPassing a prototype39s function as parameter without losing the 39this39 contextStack Overflow