JavaScript中的"me" = "this"，为什么？

Question

我在许多源代码中看到：

var me = this;

特别是在Ext-JS 4（JS框架）中。为什么要这样做？是有其他原因还是你只是想让一个变量被称为"我"而不是"这个"？

谢谢。

- user1509885

---

当闭包或回调函数中this的上下文发生变化时，可以使用这种方式。通常情况下，你会看到使用var that = this的写法。 - Michael Berkowski

哦，我明白了。它可以在函数内部更改...好的，谢谢。 :) - user1509885

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 就会返回）。 这是闭包的演示。

- James Allardice

---

你在回答中提供了比其他人更多的信息，因此这个答案将被标记为已接受。只需要再等待4分钟... 哎呀... - user1509885

ExtJs在其大部分函数中使用var me = this，而闭包在其代码中很少需要。看起来变量me是在代码中需要多个this时使用的。因此，闭包不是主要原因。对于代码大小优化的答案得[+1]分，此答案得[-1]分。 - Skrol29

Answer 2

虽然闭包是更明显的原因，但另一个原因可以是减少javascript文件压缩后的大小。

this关键字在压缩文件时无法重命名，而本地变量可以。换句话说，每当您使用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)}

现在，让我们来比较一下未将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)}

如您所见，使用本地变量的版本仅占使用每次this的函数大小的88％。

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

- matt

---

ExtJS在几乎所有的函数中都使用var me = this，而闭包很少需要。似乎当需要多个this时，变量me就会被使用。 - Skrol29

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

- Nate

Answer 4

基本上这利用了 JavaScript 中的闭包。请阅读有关闭包的内容。

它用于将 this 的特定实例传递到函数调用中，其中 this 具有不同的含义。

- Konstantin Dinev