JavaScript "me“= "this"，为什么？

Question

我在很多源码中看到：

var me = this;

特别是Ext-JS4 (JS框架)。为什么要做这样的事情？有没有其他原因，或者你只是想让一个变量叫做"me“而不是"this"？

谢谢。

Answer 1

通常，这样您就可以在this引用其他内容(例如，回调函数)的作用域中保留对this的引用。

考虑这个例子，在这个例子中，单击事件处理函数具有与您预期的不同的上下文(this没有引用MyClass的实例)：

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

现在考虑这个例子，在这个例子中，我们在构造函数中存储了对this的值的引用，并在回调函数中使用了它：

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

回调函数可以引用在外部函数中声明的变量，即使在该函数返回之后也是如此( MyClass构造函数在执行addEventListener后立即返回)。这是一个闭合的演示。

Answer 2

虽然闭包当然是这样做的更明显的原因，但我只想补充说，另一个原因可能是减少javascript文件的缩小版本的大小。

作为关键字的this不能在缩小文件的过程中重命名，而局部变量可以重命名。换句话说，只要你想使用它(4个字符)，就可以使用1个字符的局部变量。

考虑一下ExtJS的Ext.data.Store的以下example function

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);
}

(注意这里没有涉及到闭包)

和它的简化版本：

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个字符/字节)

现在，让我们将其与未将this赋给局部变量的最小化版本进行比较：

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个字符/字节)

如您所见，带有局部变量的版本只占用函数大小的88%，而函数每次都使用this。

特别是在大型库中，这可以大大减少文件大小。

Answer 3

设置me=this允许您在内部作用域中使用外部作用域中的this变量。

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();