JavaScript "me" = "this", почему?

Ответ 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). Это демонстрация закрытия.

Ответ 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 символов/байт)

Как вы можете видеть, версия с локальной переменной принимает только 88% от размера функции, которая использует this каждый раз вместо этого.

Особенно в больших библиотеках это может немного уменьшить размер файла.

Ответ 3

В основном это использует закрытие в javascript. Прочитайте это о закрытии.

Он используется для переноса конкретного экземпляра this для вызова функций, где this имеет другое значение.

Ответ 4

Настройка 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();