javascript - tablas - ¿Cuál es la diferencia en el estilo de cierre
mostrar loading mientras carga pagina jquery (6)
Hay dos estilos de cierre populares en javascript. Lo primero que llamo constructor anónimo :
new function() {
var code...
}
y la función ejecutada en línea :
(function() {
var code...
})();
¿Hay diferencias en el comportamiento entre esos dos? ¿Hay uno "mejor" que el otro?
@Lance: el primero también se está ejecutando. Compáralo con un constructor nombrado:
function Blah() {
alert(''blah'');
}
new Bla();
esto también es código de ejecución. Lo mismo aplica para el constructor anónimo ...
Pero esa no era la pregunta ;-)
Bueno, hice una página como esta:
<html>
<body>
<script type="text/javascript">
var a = new function() {
alert("method 1");
return "test";
};
var b = (function() {
alert("method 2");
return "test";
})();
alert(a); //a is a function
alert(b); //b is a string containing "test"
</script>
</body>
</html>
Sorprendentemente (para mí de todos modos) alertó tanto al "método 1" como al método 2 ". No esperaba que se avisara al" método 1 ". La diferencia era cuáles eran los valores de ayb. A era la función en sí misma, mientras que b era la cadena que devolvió la función.
El segundo ejemplo ejecutará la función después de crearla.
editar: esto no es realmente cierto.
Ambos casos ejecutarán la función, la única diferencia real es cuál puede ser el valor de retorno de la expresión, y cuál será el valor de "esto" dentro de la función.
Básicamente el comportamiento de
new expression
Es efectivamente equivalente a
var tempObject = {};
var result = expression.call(tempObject);
if (result is not an object)
result = tempObject;
Aunque, por supuesto, tempObject y result son valores transitorios que nunca se pueden ver (son detalles de implementación en el intérprete), y no hay un mecanismo JS para hacer la comprobación de "no es un objeto".
Hablando en términos generales, el método "new function () {..}" será más lento debido a la necesidad de crear este objeto para el constructor.
Dicho esto, esto no debe ser una diferencia real ya que la asignación de objetos no es lenta, y no debería usar dicho código en el código de acceso directo (debido al costo de crear el objeto de función y el cierre asociado).
Editar: una cosa que me di cuenta de que me perdí de esto es que el tempObject obtendrá prototipo de expression , por ejemplo. (antes de la expression.call ) tempObject.__proto__ = expression.prototype
Ambos crean un cierre ejecutando el bloque de código. Como cuestión de estilo, prefiero el segundo por un par de razones:
No es inmediatamente obvio echando un vistazo al primero que el código realmente se ejecutará; la línea parece que está creando una nueva función, en lugar de ejecutarla como un constructor, pero eso no es lo que realmente está sucediendo. ¡Evite el código que no hace lo que parece que está haciendo!
También la (function(){ ... })(); crea buenos tokens de sujetalibros para que puedas ver de inmediato que estás entrando y saliendo de un alcance de cierre. Esto es bueno porque alerta al programador que lo lea sobre el cambio de alcance, y es especialmente útil si está haciendo un posprocesado del archivo, por ejemplo, para la minificación.
Sí, hay diferencias entre los dos.
Ambas son funciones anónimas y se ejecutan de la misma manera. Pero, la diferencia entre los dos es que en el segundo caso el alcance de las variables está restringido a la función anónima en sí misma. No hay posibilidad de agregar variables accidentalmente al alcance global.
Esto implica que al usar el segundo método, no está saturando el alcance de las variables globales, ya que estos valores de variables globales pueden interferir con otras variables globales que puede usar en otras bibliotecas o que se están utilizando en una biblioteca de terceros. .
Ejemplo:
<html>
<body>
<script type="text/javascript">
new function() {
a = "Hello";
alert(a + " Inside Function");
};
alert(a + " Outside Function");
(function() {
var b = "World";
alert(b + " Inside Function");
})();
alert(b + " Outside Function");
</script>
</body>
</html>
En el código anterior, el resultado es algo así como:
Hola función interna
Hola función externa
World Inside Function
... entonces, se obtiene un error ya que ''b'' no está definido fuera de la función!
Por lo tanto, creo que el segundo método es mejor ... ¡más seguro!