Question

I am using the javascript inheritance helper provided here: http://ejohn.org/blog/simple-javascript-inheritance/

I have the following code, and I have problem accessing the inherited property or function from a closure within a subclass as illustrated below. I am new to OOP javascript code and I appreciate your advice. I suppose within the closure, the context changes to JQuery (this variable) hence the problem. I appreciate your comments.

Thanks,
-A

PS – Using JQuery 1.5

     var Users = Class.extend({
                init: function(names){this.names = names;}
            });
            var HomeUsers = Users.extend({
                work:function(){ 
//                alert(this.names.length); // PRINTS A 
//                var names = this.names;  // If I make a local alias it works
                    $.map([1,2,3],function(){
                        var newName = this.names.length; //error this.names is not defined.
                        alert(newName); 
                    });

                }
            });

var users = new HomeUsers(["A"]);
users.work();

Answer 1

this in the inner function

    function(){
        var newName = this.names.length;
        alert(newName); 
    }

is not the same as this in the outer function.

work: function(){ 
    $.map([1,2,3],function(){
        var newName = this.names.length;
        alert(newName); 
    });
}

There are many ways that people work around this:

Store a reference to outer function’s this as another variable

work: function(){ 
    var that = this;
    $.map([1,2,3],function(){
        var newName = that.names.length;
        alert(newName); 
    });
}

As you see, that is being used instead of this.

Use jQuery’s $.proxy

work: function(){ 
    $.map([1,2,3],$.proxy(function(){
        var newName = this.names.length;
        alert(newName); 
    }, this));
}

What $.proxy does is it creates another function that calls the function you passed in (in this case, the inner function), but explicitly set the context of the function (this) to the second arguments.

Use Function.prototype.bind

work: function(){ 
    $.map([1,2,3],function(){
        var newName = this.names.length;
        alert(newName);
    }.bind(this));
}

It works just like jQuery’s $.proxy, but in this one, you call the bind method of the function.

It isn’t supported on all browsers, but there is a JavaScript implementation of Function.prototype.bind on MDC. You can use it.

this in a confusing keyword, and if you want to learn more about this, then look at this.