JavaScript " me " = "esto", ¿por qué?

Question

JavaScript " me " = "esto", ¿por qué?

Vi en muchos códigos fuente:

var me = this;

Especialmente en Ext-JS 4 (JS framework). ¿Por qué hacer tal cosa? ¿Hay alguna otra razón o simplemente desea que una variable se llame como "yo" en lugar de "esto"?

Gracias.

38

javascript extjs

Author: James Allardice, 2012-11-13

Source

4 answers

Aunque, por supuesto, los cierres son la razón más obvia para hacer esto, solo quería agregar que otra razón puede ser reducir el tamaño de la versión minificada de un archivo javascript.

this como una palabra clave no se puede renombrar en el proceso de minificar el archivo, mientras que una variable local sí. En otras palabras, siempre que use esto (4 caracteres), en su lugar se puede usar una variable local de 1 carácter.

Considere la siguiente función de ejemplo de 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);
}

(tenga en cuenta que no hay cierre involucrado aquí)

Y su versión minificada:

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 caracteres/bytes)

Ahora, comparémoslo con la versión minificada si no asignamos this a una variable local:

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 caracteres/bytes)

Como puede ver, la versión con una variable local solo toma el 88% del tamaño de la función que usa this cada vez.

Especialmente en bibliotecas grandes esto puede reducir el tamaño de archivo bastante.

5

Author: matt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-31 17:06:04

La configuración me=this le permite usar la variable this desde un ámbito externo en un ámbito interno.

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

2

Author: Nate,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-05 00:52:14

Básicamente utiliza closure en javascript. Lea esto sobre el cierre.

Se usa para llevar la instancia particular de this a llamadas a funciones donde this tiene un significado diferente.

1

Author: Konstantin Dinev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-13 16:23:52

score 53 · Accepted Answer

Por lo general, para que pueda mantener una referencia a this dentro de un ámbito en el que this se refiere a otra cosa (como una función de devolución de llamada, por ejemplo).

Considere este ejemplo, en el que la función click event handler tiene un contexto diferente a lo que puede esperar (this no se refiere a una instancia de MyClass):

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

Ahora considere este ejemplo, en el que almacenamos una referencia al valor de this dentro de la función constructor, y lo usamos dentro de la devolución de llamada función:

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

La función callback puede referirse a una variable que fue declarada en la función externa, incluso después de que esa función haya regresado (el constructor MyClass regresa tan pronto como se ejecuta el addEventListener). Esta es una demostración de un cierre .