2011-11-17 15 views
15

Duplicar posibles:
How do JavaScript closures work?
Javascript closures and side effects in plain English? (separately)confundido por los cierres en JavaScript

Soy nuevo en JavaScript, pero estoy realmente confundido por la forma en cierres de trabajo. ¿Puede alguien explicar en términos simples lo que son o por qué son útiles?

+1

Ver http://stackoverflow.com/questions/111102/how-do-javascript- closures-work –

+0

[Aquí hay una publicación fácil de entender para cierres con código de trabajo] (http://conceptf1.blogspot.com/2013/11/javascript-closures.html) –

Respuesta

11

Los cierres son algo así como el contexto de una función cuando se define. Cada vez que se define una función, el contexto se almacena e incluso si el ciclo de vida "normal" de su función finaliza, si mantiene una referencia a un elemento definido dentro de la ejecución de su función, puede acceder a los elementos del contexto (cierre), que es realmente el alcance de su función en su definición. Lo siento por mi mala Inglés, pero probablemente este ejemplo le hará comprender:

function test() { 
    var a = "hello world"; 
    var checkValue = function() { alert(a); }; 
    checkValue(); 
    a = "hi again"; 
    return checkValue; 
} 

var pointerToCheckValue = test(); //it will print "hello world" and a closure will be created with the context where the checkValue function was defined. 
pointerToCheckValue(); //it will execute the function checkValue with the context (closure) used when it was defined, so it still has access to the "a" variable 

espero que ayude :-)

0

Recomiendo encarecidamente el siguiente article. Descubrí que es un excelente punto de partida para comprender los cierres.

3

Si usted comienza con un uso simple, que obtuve de http://ejohn.org/apps/learn/#49

var num = 10; 

function addNum(myNum){ 
    return num + myNum; 
} 

assert(addNum(5) == 15, "Add two numbers together, one from a closure."); 

Lo que ocurre es que la variable num es atrapado (adjunta) dentro de la función addNum.

Cuando esto se convierte en la mano es si tiene algo (esto no se espera que funcione correctamente) como esto:

for(var t = 0; t < 5; t++) { 
    var elem = document.getElementById('mydiv' + t); 
    elem.onclick = function(e) { 
    alert(t); 
    }; 
}; 

Esto debería mostrar el valor 5 por cada div que fue ajustada con este controlador de eventos.

Si encierra esa instancia del contador dentro de su controlador de eventos, puede ser diferente para cada uno, que es el comportamiento esperado.

Este es un tema bastante avanzado. Una vez que te sientas más cómodo con javascript, es posible que quieras ver cómo lo aprendes en ese punto.

Cuestiones relacionadas