当方法传递给另一个函数时，如何在实例方法中访问实例属性？

Question

I know in the code below it will print out undefined if I click on the button, because this.field becomes within the context of the button and not Container . My question is how can I access this.field of Container when this.func is passed into another function, which is a different context scope than Container .

function Container(){
    this.field = 'field';

    $('button').click(this.func);
}

Container.prototype.func = function(){
   console.log(this.field);
}

I know I can do this, but is there a better way? Because I'd rather define the methods outside the constructor so I won't clutter it.

function Container(){
    var thisObj = this;
    this.field = 'field';

    $('button').click(function(){ console.log(thisObj.field) });
}

Answer 1

How about passing an anonymous function?

function Container(){
    this.field = 'field';
    var self = this;

    $('button').click(function() {
        self.func()
    });
}

You have not many choices here...

jQuery makes it a bit easier for you and offers $.proxy :

 $('button').click($.proxy(this.func, this));
 // or
 $('button').click($.proxy(this, 'func'));

Answer 2

Pass the object reference in as the event data:

function Container(){
    this.field = 'field';

    $('button').click(this, this.func);
}

Container.prototype.func = function(e){
   console.log(e.data.field);
}

See here: http://jsfiddle.net/gilly3/nwtqJ/

Answer 3

I'd just like to point out that, generally speaking, you should avoid thinking of the 'this' variable as having any resemblance to the one in java. You clearly understand that, but it always bears repeating. Since javascript's this always points to the object on which you called the function, your passing of an instance function to another object to use as its onclick leads to confusion. I don't know what you intend to do in the instance method itself, but there is no reason why an onclick handler should be an instance method of another object. If it's access to the members you want, they're public, so no need to have it be an instance method. If the work to be done relates exclusively to the Container object, then the onclick should possibly be a separate function that would have a refernce to the container and call the instance method.