Cierre de JavaScript vs. variable global

Question

¿Cuál es la mejor práctica, que resulta en un mejor rendimiento?

ACTUALIZACIÓN: jsperf.com informa que (a) es más rápido @http://jsperf.com/closure-vs-global-variable

a) utilizar un cierre

var obj = { 
    init: function() { 
     var self = this; 
     $('#element').click(function() { 
      self.clickEvent(); 
     }); 
    }, 
    clickEvent: function() { 
     this.miscMethod(); 
    }, 
    miscMethod: function() {} 
}; 

b) utilizando la variable global

var obj = { 
    init: function() { 
     // removed self=this closure 
     $('#element').click(this.clickEvent); // simple method handler 
    }, 
    clickEvent: function() { 
     obj.miscMethod(); // global variable used 
    }, 
    miscMethod: function() {} 
}; 

Answer 1

ambos deben realizar (casi) idénticamente.

La mejor práctica es evitar los globales.

Answer 2

En la mayoría de los navegadores, no hay una diferencia de rendimiento significativa; sin embargo, Chrome parece sufrir un 75% slowdown usando this (corrija mi prueba de rendimiento rápido si me equivoco). Probablemente el principal problema de las mejores prácticas es que a veces puede no estar claro a qué objeto se refiere el objeto this.

En cuanto a declarar (o usar sin declarar) sus propias variables globales, le llamamos espacio de nombre global "contaminación" si usamos demasiadas de ellas. Esto puede llevar a que diferentes partes del código JavaScript interfieran entre sí, lo que evita una buena encapsulación utilizando cierres o "espacios de nombres". La mejor práctica es usar solo como máximo una o dos variables globales. Por ejemplo, jQuery usa solo dos: jQuery y $ (este último se puede desactivar si entra en conflicto con otra biblioteca).

Answer 3

1) Dado que las variables globales son peligrosas, considere poner nombres de variables globales en mayúsculas para que sean obvias para cualquier persona (incluido usted) que esté leyendo el código.

2) su primer fragmento no es válido.

function obj = { 
    // your object stuff 
} 

debería ser

var obj = { 
    // your object stuff 
} 

Adicionalmente, no es en realidad un cierre. Así es como implementa un singleton en Javascript.

var mySingleton = (function() { 
    var privateVar = "foo"; 

    function privateFunction() { //this function can only be accessed by other private 
           //and privaleged functions defined in this closure 
     // do stuff. 
    } 

    //stuff to run immediately that will also have access to private variables/functions 

    singletonObj = { 
     key1:"value1", 
     key2:"value2", 
     privilgedFunction: function() { // this method is accessible from the outside 
      // do stuff. you can access private variables in here 
     } 
    }; 

    return singletonObj; //return the object that you just created 
}()); //immediately execute the function, returning an object with private variables 

Estoy asignando el resultado de una función que ejecuto inmediatamente a una variable. Esa función devuelve un objeto, por lo tanto, estoy asignando un objeto a esa variable. PERO ese objeto también tiene miembros privados y funciones privadas.

Answer 4

El problema con su código de cierre es que no funcionará en todos los casos. Si lo hace:

obj.clickEvent() 

entonces funcionará. Pero si lo hace:

var f = obj.clickEvent; 
//hundreds of lines of code 
f(); 

entonces no, como this no hará referencia a obj en esa llamada a la función. Si pasa inmediatamente obj a algo que no lo usa de una manera extraña, entonces no tendrá ese problema, entonces estará "más limpio" ... pero aún creo que es muy fácil cometer errores, entonces recomiendo el enfoque de variable global.

Answer 5

Bonito escribir sobre los cierres aquí.

JavaScript Closures - MDC