Este artículo analiza el concepto y el uso de los cierres de JavaScript. Compártelo para su referencia. Los detalles son los siguientes:
Cuando se trata de cierres, creo que todos han oído hablar de ellos. Déjame decirte mi simple comprensión a continuación.
Para ser honesto, no hay muchos escenarios para escribir cierres manualmente en el trabajo diario, pero los marcos y componentes de terceros utilizados en el proyecto usan más o menos cierres.
Por lo tanto, es muy necesario comprender los cierres. jeje ...
1. ¿Qué es un cierre?
En resumen, es una función que puede leer variables dentro de otras funciones.
Debido al alcance de las variables JS, no se puede acceder a las variables internas externamente, y las variables externas pueden ser externamente.
2. Use escenarios
1. Implementar miembros privados.
2. Proteja los espacios de nombres para evitar contaminar variables globales.
3. Variables de caché.
Primero veamos un ejemplo de encapsulación:
Copie el código de la siguiente manera: var persona = function () {
// El alcance de la variable está dentro de la función y no se puede acceder afuera
var name = "predeterminado";
devolver {
getName: function () {
nombre de retorno;
},
setname: function (newname) {
nombre = Newname;
}
}
} ();
console.log (persona.name); // Acceso directo, el resultado es: Undefinado
console.log (persona.getName ()); // El resultado es: predeterminado
console.log (persona.setName ("langjt"));
console.log (persona.getName ()); // El resultado es: Langjt
Veamos los cierres comunes en los bucles para resolver el problema de hacer referencia a variables externas:
La copia del código es la siguiente: var ali = document.getElementsBytagName ('li');
para (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .Onclick = function () {
alerta (i); // No importa en qué elemento haga clic, el valor emergente es len, lo que indica que el valor de I aquí y el valor de I imprimido después es el mismo.
};
}
Después de usar el cierre:
La copia del código es la siguiente: var ali = document.getElementsBytagName ('li');
para (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .Onclick = (function (i) {
Función de retorno () {
alerta (i); // Haga clic en el elemento <li> en este momento y el subíndice correspondiente aparecerá.
}
})(i);
}
3. cosas a tener en cuenta
1. Fuencia de memoria
Dado que los cierres causarán que todas las variables en la función se almacenen en la memoria, y el consumo de memoria es muy grande, los cierres no se pueden abusar, de lo contrario causará problemas de rendimiento de la página web.
Por ejemplo:
Copie el código de la siguiente manera: function foo () {
var odiv = document.getElementById ('j_div');
var id = odiv.id;
odiv.onclick = function () {
// alerta (odiv.id); Hay una referencia circular aquí. ODIV todavía está en la memoria después de que se cierra la página de versión baja de IE. Entonces, caché tipos primitivos en lugar de objetos tanto como sea posible.
alerta (id);
};
odiv = nulo;
}
2. Naming variable
Si la variable de la función interna y el nombre de la variable de la función exterior son la misma, la función interna ya no puede apuntar a la variable con el mismo nombre que la función externa.
Por ejemplo:
Copie el código de la siguiente manera: función foo (num) {
Función de retorno (num) {
console.log (num);
}
}
var f = nuevo foo (9);
F(); // indefinido
De hecho, el uso anterior se llama currying de función, que es la técnica de convertir una función que acepta múltiples parámetros en una función que acepta un solo parámetro (el primer parámetro de la función original) y devolver una nueva función que acepta los parámetros restantes y devuelve el resultado. En esencia, también utiliza características que los cierres se pueden almacenar en caché, como:
Copie el código de la siguiente manera: var adder = function (num) {
Función de retorno (y) {
return num+y;
};
};
var inc = add (1);
var dec = add (-1);
// Inc, Dec ahora es dos nuevas funciones, que se usan para pasar en el valor del parámetro (+/) 1
alerta (Inc (99)); // 100
alerta (dic (101)); // 100
alerta (adder (100) (2)); // 102
alerta (adder (2) (100)); // 102
Por ejemplo, en el código fuente de SEAJS de Alibaba Yubo:
Copie el código de la siguiente manera:/**
* Util -Lang.js - La mejora mínima del idioma
*/
función iStype (type) {
función de retorno (obj) {
return {} .ToString.call (obj) == "[objeto" + tipo + "]" "
}
}
var isObject = isType ("objeto");
var issTring = iStype ("cadena");
Espero que este artículo sea útil para la programación de JavaScript de todos.