JavaScript "me" = "this", why?

Question

I saw in many source codes:

var me = this;

specially in Ext-JS 4 (JS framework). Why doing such thing? Is there any other reason or you just want for a variable to be called like "me" instead of "this"?

Thank you.

That is used in closures or callbacks, when the context of `this` changes inside the anonymous function. More often, you will see `var that = this` — Michael Berkowski, Nov 13 '12 at 16:23
Oh, I understand. It could be changed inside function... Well thank you. :) — , Nov 13 '12 at 16:24

score 56 · Accepted Answer · answered Nov 13 '12 at 16:23

Usually so you can keep a reference to this inside a scope in which this refers to something else (like a callback function, for example).

Consider this example, in which the click event handler function has a different context to what you may expect (this doesn't refer to an instance of MyClass):

var MyClass = function (elem) {
    this.elem = elem;
    this.name = "James";
    elem.addEventListener("click", function () {
        alert(this.name); //oops
    }, false);
};

Now consider this example, in which we store a reference to the value of this inside the constructor function, and use that inside the callback function:

var MyClass = function (elem) {
    var me = this;
    this.elem = elem;
    this.name = "James";
    elem.addEventListener("click", function () {
        alert(me.name); //works!
    }, false);
};

The callback function can refer to a variable that was declared in the outer function, even after that function has returned (the MyClass constructor returns as soon as it's executed the addEventListener). This is a demonstration of a closure.

You gave much more info in your answer than others so this answer will be marked as accepted. Just 4 more minutes... Daaah... — , Nov 13 '12 at 16:33
ExtJs uses `var me = this` in quite all the functions while closure are rarely needed in their code. It seems variable `me` is use when more than one `this` is needed in the code. So the closure is not the main reason. [-1] for this answer, and [+1] for the answer about code size optimization. — Skrol29, Apr 03 '15 at 10:40

score 6 · Answer 2 · answered Jan 31 '14 at 17:06

Though of course closures are the more obvious reason for doing this, I just wanted to add that another reason can be to reduce the size of the minified version of a javascript file.

this as a keyword cannot be renamed in the process of minifying the file, while a local variable can. In other words, whenever you would use this (4 characters), instead a 1 character local variable can be used.

Consider the following example function of ExtJS's Ext.data.Store:

filterBy: function(fn, scope) {
    var me = this;

    me.snapshot = me.snapshot || me.data.clone();
    me.data = me.queryBy(fn, scope || me);
    me.fireEvent('datachanged', me);
    me.fireEvent('refresh', me);
}

(note there's no closure involved here)

and its minified version:

filterBy:function(b,a){var c=this;c.snapshot=c.snapshot||c.data.clone();c.data=c.queryBy(b,a||c);c.fireEvent("datachanged",c);c.fireEvent("refresh",c)}

(151 characters/bytes)

Now, let's compare it to the minified version if we did not assign this to a local variable:

filterBy:function(b,a){this.snapshot=this.snapshot||this.data.clone();this.data=this.queryBy(b,a||this);this.fireEvent("datachanged",this);this.fireEvent("refresh",this)}

(170 characters/bytes)

As you can see the version with a local variable only takes 88% of the size of the function which uses this each time instead.

Especially in big libraries this can reduce the file size quite a bit.

[+1] ExtJS uses `var me = this` in quite all the functions while closure are rarely needed. It seems variable `me` is use when more than one `this` is needed. — Skrol29, Apr 03 '15 at 10:42

score 3 · Answer 3 · answered Feb 05 '15 at 00:52

Setting me=this allows you to use the this variable from an outer scope in an inner scope.

var Outer= function () {
        var me = this;
        me.x = "outerx";
        me.inner = {
            x: "innerx",
            displayValues: function () {
                console.log(me.x); //outerx
                console.log(this.x); //innerx
            }
        };
    };

    new Outer().inner.displayValues();

score 1 · Answer 4 · answered Nov 13 '12 at 16:23

1

Basically this utilizes closure in javascript. Read this about closure.

It is used to carry the particular instance of this to function calls where this has a different meaning.

answered Nov 13 '12 at 16:23

Konstantin Dinev

34,219
14
75
100

JavaScript "me" = "this", why?

4 Answers4