JavaScript "me" = "this", why?
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.
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.
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();