1. Funciones anónimas
Las funciones son el objeto más flexible en JavaScript. Aquí solo explicamos el propósito de sus funciones anónimas. Funciones anónimas: son funciones sin nombres de funciones.
1.1 Definición de una función. Primero, presentemos brevemente la definición de una función. Se puede dividir aproximadamente en tres maneras.
El primero: este también es el más común
La copia del código es la siguiente:
función doble (x) {
regresar 2 * x;
}
El segundo método: este método utiliza el constructor de funciones, que utiliza tanto la lista de parámetros como el cuerpo de la función como cadenas, que es muy inconveniente y no se recomienda.
La copia del código es la siguiente:
var doble = nueva función ('x', 'return 2 * x;');
El tercer tipo:
var double = function (x) {return 2* x; }
Tenga en cuenta que la función a la derecha de "=" es una función anónima. Después de crear la función, la función se asigna al cuadrado variable.
1.2 Creación de funciones anónimas
El primer método: Defina la función cuadrada mencionada anteriormente, que también es uno de los métodos más utilizados.
El segundo método:
La copia del código es la siguiente:
(función (x, y) {
alerta (x + y);
})(veintitrés);
Aquí se crea una función anónima (en el primer soporte), y el segundo soporte se usa para llamar a la función anónima y pasar en los parámetros.
2. Cierre
La palabra en inglés para el cierre es el cierre, que es una parte muy importante de JavaScript, porque el uso de cierres puede reducir en gran medida la cantidad de nuestro código, hacer que nuestro código se vea más claro, etc. En resumen, las funciones son muy poderosas.
El significado del cierre: para decirlo sin rodeos, los cierres son funciones de anidación. La función interna puede usar todas las variables de la función externa, incluso si la función exterior se ha ejecutado (esto involucra la cadena de alcance de JavaScript).
Ejemplo 1
La copia del código es la siguiente:
función checkClosion () {
var str = 'Rain-Man';
setTimeOut (
function () {alert (str); } // Esta es una función anónima
, 2000);
}
checkClosure ();
Este ejemplo parece muy simple. Después de un análisis cuidadoso de su proceso de ejecución, todavía hay muchos puntos de conocimiento: la ejecución de la función de checkclosure es instantánea (tal vez solo tomó 0.00001 milisegundos), se crea una variable STR en el cuerpo de la función de checkclosure. Después de ejecutar el checkclosure, STR no se libera. Esto se debe a que la función anónima en SetTimeOut tiene una referencia a STR. El STR se libera solo después de 2 segundos.
Ejemplo 2, optimice el código
La copia del código es la siguiente:
función fortimaut (x, y) {
alerta (x + y);
}
retraso de la función (x, y, tiempo) {
setTimeout ('fortimeout (' + x + ',' + y + ')', tiempo);
}
/**
* La función de retraso anterior es muy difícil de leer y no es fácil de escribir, pero si usa cierres, el código puede ser más claro
* retraso de la función (x, y, tiempo) {
* SetTimeout (
* función(){
* FortimeOut (x, y)
*}
* , tiempo);
*}
*/
3. Dar un ejemplo
El mayor uso de las funciones anónimas es crear cierres (una de las características del lenguaje JavaScript) y también crear espacios de nombres para reducir el uso de variables globales.
Ejemplo 3:
La copia del código es la siguiente:
var oevent = {};
(función(){
var addEvent = function () { / *La implementación del código se omite * /};
función removevent () {}
oevent.addevent = addEvent;
oevent.removeEvent = remoadEvent;
}) ();
En este código, las funciones AddEvent y RemoVeVent son variables locales, pero podemos usarla a través de la variable global Oevent, lo que reduce en gran medida el uso de variables globales y mejora la seguridad de la página web. Queremos usar este código: oevent.addevent (document.getElementById ('box'), 'hacer clic', function () {});
Ejemplo 4:
La copia del código es la siguiente:
var rainman = (function (x, y) {
return x + y;
})(veintitrés);
/**
* También se puede escribir en la siguiente forma, porque el primer soporte solo nos ayuda a leer, pero no se recomienda el siguiente formato de escritura.
* var rainman = function (x, y) {
* return x + y;
* }(veintitrés);
*/
Aquí creamos un hombre de lluvia variable y lo inicializamos a 5 llamando directamente a la función anónima. Este truco a veces es muy práctico.
Ejemplo 5:
La copia del código es la siguiente:
var exuyer = nulo;
(función(){
var uno = 1;
function inner () {
uno += 1;
alerta (uno);
}
externo = interno;
}) ();
exterior(); // 2
exterior(); // 3
exterior(); // 4
La variable en este código es una variable local (porque se define dentro de una función), por lo que el externo es inaccesible. Pero aquí creamos una función interna, que puede acceder a la variable; y también haga referencia a la variable global externa a la interna, por lo que tres llamadas al exterior aumentarán el resultado incremental.
4. Presta atención
4.1 El cierre permite que las funciones de la capa interna se refieran a variables en las funciones de los padres, pero la variable es el valor final
Ejemplo 6:
La copia del código es la siguiente:
/**
* <Body>
* <ul>
* <li> uno </li>
* <li> Dos </li>
* <li> tres </li>
* <li> uno </li>
* </ul>
*/
var lists = document.getElementsBytagName ('li');
para (var i = 0, len = lists.length; i <len; i ++) {
listas [i] .onmouseover = function () {
alerta (i);
};
}
Encontrará que cuando el mouse se mueva a través de cada uno <li & rt; Elemento, siempre aparece 4 en lugar del subíndice de elementos que esperamos. ¿Por qué es esto? Se han discutido las precauciones (valor final). Obviamente, esta explicación es demasiado simple. Cuando el evento Mouseover llama a la función de escucha, primero busque si estoy definido dentro de la función anónima (function () {alerta (i);}), y el resultado es que no está definido; Por lo tanto, buscará hacia arriba, y el resultado de la búsqueda es que se ha definido, y el valor de I es 4 (el valor de I después del bucle); Entonces, al final, cada ventana emergente es 4.
Solución 1:
La copia del código es la siguiente:
var lists = document.getElementsBytagName ('li');
para (var i = 0, len = lists.length; i <len; i ++) {
(función (índice) {
listas [index] .onmouseover = function () {
alerta (índice);
};
})(i);
}
Solución 2:
La copia del código es la siguiente:
var lists = document.getElementsBytagName ('li');
para (var i = 0, len = lists.length; i <len; i ++) {
listas [i]. $$ index = i; // Registre el índice vinculando el atributo de índice $$ en el elemento DOM
listas [i] .onmouseover = function () {
alerta (este. $$ índice);
};
}
Solución tres:
La copia del código es la siguiente:
function EventListener (list, index) {
list.onmouseover = function () {
alerta (índice);
};
}
var lists = document.getElementsBytagName ('li');
para (var i = 0, len = lists.length; i <len; i ++) {
EventListener (listas [i], i);
}
4.2 Fugas de memoria
Usar cierres es muy fácil de causar la fuga de memoria del navegador. En casos severos, el navegador estará muerto. Si está interesado, consulte: http://www.vevb.com/article/57404.htm