What is the simplest & shortest way to access outer this from inside callback in javascript?

Question

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?

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_, Apr 19 '11 at 04:27

score 1 · Answer 1 · answered Apr 19 '11 at 02:51

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

score 0 · Accepted Answer · answered Apr 19 '11 at 02:49

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

answered Apr 19 '11 at 02:49

house9

20,359
8
55
61

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_ Apr 19 '11 at 04: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 - http://stackoverflow.com/questions/383402/is-javascript-s-new-keyword-considered-harmful – house9 Apr 19 '11 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_ Apr 21 '11 at 03:47

What is the simplest & shortest way to access outer this from inside callback in javascript?

2 Answers2