JavaScript"我"="这个",为什么？

Question

我在许多源代码中看到:

var me = this;

特别是在Ext-JS 4(JS框架)中.为什么这样做？还有其他原因或者你只是想要一个变量被称为"我"而不是"这个"吗？

谢谢.

Answer 1

通常,您可以在引用其他this内容的范围内保留引用this(例如,回调函数).

考虑这个示例,其中click事件处理函数具有与您可能期望的不同的上下文(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:

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

正如您所看到的,带有局部变量的版本只需占用this每次使用的函数大小的88%.

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