0

I know the following code can access outer this.


var o = function() {
    var that = this;
    this.a = 1;
    $('html').click(function() {
        alert(that.a);
    });
}
new o();

But I don't wanna use two variable names(for example, this and that) for the same one object.
And I don't wanna repeatedly write var that = this on every class.

I think the following code which uses _this instead of that is a little bit simpler.


var o = function() {
    var _this = this;
    this.a = 1;
    $('html').click(function() {
        alert(_this.a);
    });
}
new o();

But are there other simpler and shorter ways?

3
  • 2
    I fail to see how _this is simpler than that Commented Apr 19, 2011 at 2:44
  • agree, 'that' seems to be the standard way, why fight it?
    – house9
    Commented Apr 19, 2011 at 2:50
  • i'm sorry but i think _this is simpler than that because both this.a and _this.a can be searched by this.a. if i use that instead of _this, i have to search twice by that.a and this.a. i don't wanna search twice.
    – js_
    Commented Apr 19, 2011 at 4:27

2 Answers 2

1

I really like Ext's createDelegate function, which let's you set the this value for any function when it is created.

Here is a less functional version of createDelegate that you could include in your page:

Function.prototype.createDelegate = function(thisObj) {
    var method = this;
    return function() {
        return method.apply(thisObj || window, arguments);
    };
}

And here is how you can use it in your example, never setting this to a variable:

var o = function() {
    this.a = 1;
    $('html').click(function() {
        alert(this.a);
    }.createDelegate(this));
}
new o();

The full version of Ext's createDelegate let's you pass in parameters as the second argument, and they can be used instead of, inserted into, or appended to the list of arguments that would regularly be passed into the function you are creating a delegate of

0

here is some similar code but I believe it is 'safer' than your example, if you create more than 1 instance of 'o' each instance could update the 'a' property

var bar = function() {
        var that = {};
        that.a = 1;
        that.showA = function () {
            $('html').click(function() {
                alert(that.a);
            });
        };
        return that;
}
var instanceOfBar = bar();
instanceOfBar.showA();

I might be off base here, have not had my hands in javascript for a few months, so rusty at the moment

3
  • how could each instance update the 'a' property? i thought new operator gives each instance its own this, and they are never updated by each other. but to use that instead of this is very simple. thanks.
    – js_
    Commented Apr 19, 2011 at 4:47
  • ah yes you are correct, I stopped trying to use the new keyword after reading 'Javascript: the good parts', this post has some interesting comments on use of the new keyword - stackoverflow.com/questions/383402/…
    – house9
    Commented Apr 19, 2011 at 15:13
  • thank you for introducing the interesting post. i really dont know i should use new or not yet because of lack of my understanding of prototype. code which uses only that looks simpler to me than code which uses three keywords(that this new). but i think using only that is very good method to solve the problem of access to a outer this from inside callback functions. so ill write var that = this; that.a = 1;/*not this.a = 1 */ /*and not return that(use new to instanciate)*/.
    – js_
    Commented Apr 21, 2011 at 3:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.