La comprensión en profundidad de los cierres de Javascript (Cierre)

1. Ámbito de variables

Para entender cierres, Javascript debe primero entender el alcance variable especial.

Ámbito de una variable no es más que dos maneras:

  • Las variables globales
  • Las variables locales

el lenguaje Javascript de modo especial, es que las variables globales Función interna se pueden leer directamente.

  var n = 999;

  function f1(){
    alert(n);
  }

  f1(); // 999

Por otro lado, no se puede leer fuera de la función natural de las variables locales dentro de la función.

  function f1(){
    var n=999;
  }

  alert(n); // error

Hay una necesidad de prestar atención, cuando se declara una variable dentro de una función, asegúrese de usar el comando var. Si no lo hace, en realidad se declara una variable global!

  function f1(){
    n=999;
  }

  f1();

  alert(n); // 999

2. ¿Cómo leer una variable local desde fuera?

Por diversas razones, a veces tenemos que conseguir una variable local dentro de la función. Sin embargo, como ya se ha dicho, en circunstancias normales, esto no puede ser hecho, sólo puede lograrse a través de métodos alternativos.

Que es, dentro de la función y, a continuación, definir una función.

  function f1(){

    var n=999;

    function f2(){
      alert(n); // 999
    }

  }

En el código anterior, los f2 de función se incluyen en las funciones internas f1, f1 tiempo todas las variables locales dentro de F2 es visible. Sin embargo, lo contrario no es, las variables locales dentro de f2, f1 es ser invisible. Esta es la estructura del lenguaje específico Javascript "ámbito de la cadena" (cadena de alcance), un sub-objetos para encontrar todas las variables de un objeto padre a. Por lo tanto 父对象的所有变量,对子对象都是可见的, no viceversa.

Desde f1 f2 se puede leer en una variable local, siempre y cuando f2 como valor de retorno, no podemos leer sus variables internas f1 fuera todavía!

  function f1(){

    var n=999;

    function f2(){
      alert(n);
    }

    return f2;

  }

  var result=f1();

  result(); // 999

3. El concepto de cierres

Un código de la función f2 es el cierre.

"Cierre" en una variedad de literatura profesional definición (cierre) es muy abstracta, difícil de entender. Yo entiendo 闭包就是能够读取其他函数内部变量的函数que .

Dado que el lenguaje Javascript, sólo la subrutina función interna para leer las variables locales, el cierre puede ser simplemente interpretada como "una función definida dentro de la función."

Por lo tanto, en esencia, el cierre es una función de puente interno y la función de conectar externa.

4. Uso de cierre

Los cierres se pueden utilizar en muchos lugares. Es más útil para dos

  • La función puede leer las variables internas
  • Deje que los valores de estas variables permanecen en la memoria

Cómo entenderlo? Considere el siguiente código.

  function f1(){

    var n=999;

    nAdd=function(){n+=1} //nAdd是全局变量且是匿名函数

    function f2(){ //闭包
      console.log(n);
    }

    return f2;

  }

  var result=f1();

  result(); // 999

  nAdd();

  result(); // 1000

En este código, resultado es en realidad una función f2 cierre. Se opera un total de dos veces, la primera vez el valor es 999, el segundo valor es 1,000. 函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除Esto demuestra que .

¿Por qué es esto así? La razón es que F1 y F2 es la función de los padres, sino f2被赋给了一个全局变量,这导致f2始终在内存中más bien depende de la existencia de F1 y F2, F1, por tanto, siempre en la memoria, y no al final de la llamada, la recolección de basura (recolección de basura) se recuperó.

Este código Cabe señalar que en otro lugar, es "nAdd=function(){n+=1}"esta línea, ningún primer uso de la palabra clave var en Nadd frontal, por lo tanto nAdd是一个全局变量, en lugar de una variable local. En segundo lugar, nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包por lo que es el equivalente de un NADD la incubadora, puede operar en variables locales dentro de una función fuera de la función.

5. Tenga en cuenta que el punto de cierre

1) Debido al cierre hará que la función de las variables se almacenan en la memoria, el consumo de memoria es grande, no puede ser abusado de cierre, si no causará problemas de rendimiento de página web en Internet Explorer puede conducir a pérdidas de memoria. La solución 在退出函数之前,将不使用的局部变量全部删除es .

2)闭包会在父函数外部,改变父函数内部变量的值 . Por lo tanto, si se toma la función madre como un objeto (objeto) a utilizar, el cierre de sus métodos públicos (Método público) como la variable interna como su propiedad privada (valor privado), entonces usted debe tener cuidado de no sólo cambia el valor de la función de los padres de las variables internas.

seis preguntas

Si usted puede entender los resultados operativos de las siguientes dos piezas de código, se debe entender incluso si el mecanismo de funcionamiento de los cierres.

Un fragmento.

  var name = "The Window";

  var object = {
    name : "My Object",

    getNameFunc : function(){
      return function(){
        return this.name;
      };

    }

  };

  alert(object.getNameFunc()());

Fragmento II.

  var name = "The Window";

  var object = {
    name : "My Object",

    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };

    }

  };

  alert(object.getNameFunc()());

referencia

  1. https://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
Publicados 148 artículos originales · ganado elogios 136 · Vistas de 250.000 +

Supongo que te gusta

Origin blog.csdn.net/DlMmU/article/details/104711300
Recomendado
Clasificación