Tabla de contenido
1. N formas de escribir funciones anónimas en js
2. Funciones y cierres anónimos de JavaScript
2.1.2 Creación de funciones anónimas
3. Múltiples métodos de llamada de funciones anónimas en Javascript
Finalmente, mire el método de llamada incorrecto
1. N formas de escribir funciones anónimas en js
Las funciones anónimas no tienen nombres reales ni punteros, lo que se puede entender al comprender el significado de los paréntesis. Los paréntesis tienen un valor de retorno, es decir, el valor de retorno de la función o expresión entre paréntesis, por lo que el valor de retorno de la función entre paréntesis es igual al valor de retorno de los paréntesis, no es difícil de entender (función (){})() puede ser Una función sin nombre ejecuta el...
Uso más común:
//代码如下:
(function() {
alert('water');
})();
//当然也可以带参数：
代码如下:
(function(o) {
alert(o);
})('water');
//想用匿名函数的链式调用？很简单：
//代码如下:
(function(o) {
alert(o);
return arguments.callee;
})('water')('down');
//常见的匿名函数都知道了，看看不常见的：
//代码如下:
~(function(){
alert('water');
})();//写法有点酷~
//代码如下:
void function(){
alert('water');
}();//据说效率最高~
//代码如下:
+function(){
alert('water');
}();
//代码如下:
-function(){
alert('water');
}();
//代码如下:
~function(){
alert('water');
}();
//代码如下:
!function(){
alert('water');
}();
//代码如下:
(function(){
alert('water');
}());
//有点强制执行的味道~ 网页打开就会运行并且只能运行一次
2. Funciones y cierres anónimos de JavaScript
2.1 Funciones anónimas
La función es el objeto más flexible en JavaScript, aquí es solo para explicar el propósito de su función anónima. Función anónima: Es una función sin nombre de función.
2.1.1 Definición de funciones
//第一种：这也是最常规的一种
//代码如下:
function double(x){
return 2 * x;
}
第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。
//代码如下:
var double = new Function('x', 'return 2 * x;');
//第三种：
var double = function(x) {
return 2* x;
}
//注意“=”右边的函数就是一个匿名函数，创造完毕函数后，又将该函数赋给了变量square。2.1.2 Creación de funciones anónimas
//第一种方式：就是上面所讲的定义square函数，这也是最常用的方式之一。
//第二种方式：
//代码如下:
(function(x, y){
alert(x + y);
})(2, 3);
//这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。2.2 Cierres
La palabra en inglés para cierre es cierre, que es una parte muy importante del conocimiento en JavaScript, ya que usar cierre puede reducir mucho la cantidad de nuestro código, hacer que nuestro código se vea más claro, etc., en resumen, la función es muy poderosa. El significado del cierre: El cierre es el anidamiento de funciones. La función interna puede usar todas las variables de la función externa, incluso si la función externa se ha ejecutado (esto involucra la cadena de alcance de JavaScript).
//示例一
//代码如下:
function checkClosure(){
var str = 'rain-man';
setTimeout(
function(){ alert(str); } //这是一个匿名函数
, 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 checkClosure es instantánea (tal vez solo 0.00001 milisegundos), y se crea una variable str en el cuerpo de la función checkClosure. ejecución, str no se libera, porque la función anónima en setTimeout tiene una referencia a str. Después de 2 segundos, se ejecuta la función anónima en el cuerpo de la función y se libera str.
//示例二，优化代码
//代码如下:
function forTimeout(x, y){
alert(x + y);
}
function delay(x , y , time){
setTimeout('forTimeout(' + x + ',' + y + ')' , time);
}
/**
* 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰
* function delay(x , y , time){
* setTimeout(
* function(){
* forTimeout(x , y)
* }
* , time);
* }
*/2.3 Ejemplos
El mayor uso de las funciones anónimas es crear cierres (esta es una de las características del lenguaje JavaScript), y también puede crear espacios de nombres para reducir el uso de variables globales.
//示例三：
//代码如下:
var oEvent = {};
(function(){
var addEvent = function(){ /*代码的实现省略了*/ };
function removeEvent(){}
oEvent.addEvent = addEvent;
oEvent.removeEvent = removeEvent;
})();En este código, las funciones addEvent y removeEvent son variables locales, pero podemos usarla a través de la variable global oEvent, lo que reduce mucho el uso de variables globales y mejora la seguridad de la página web. Queremos usar este fragmento de código: oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
//示例四：
//代码如下:
var rainman = (function(x , y){
return x + y;
})(2 , 3);
/**
* 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
* var rainman = function(x , y){
* return x + y;
* }(2 , 3);
*/Aquí creamos una variable rainman y la inicializamos a 5 llamando directamente a la función anónima Este pequeño truco a veces es muy útil.
//示例五：
//代码如下:
var outer = null;
(function(){
var one = 1;
function inner (){
one += 1;
alert(one);
}
outer = inner;
})();
outer(); //2
outer(); //3
outer(); //4La variable uno en este código es una variable local (porque se define dentro de una función), por lo que no se puede acceder desde el exterior. Pero aquí creamos la función interna, la función interna puede acceder a la variable uno; y la variable global externa se refiere a la interna, por lo que al llamar a la externa tres veces aparecerá el resultado incremental.
2.4 Atención
2.4.1 Los cierres permiten que las funciones internas se refieran a variables en la función principal, pero la variable es el valor final
//示例六：
//代码如下:
/**
* <body>
* <ul>
* <li>one</li>
* <li>two</li>
* <li>three</li>
* <li>one</li>
* </ul>
*/
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
lists[ i ].onmouseover = function(){
alert(i);
};
}Descubrirá que cuando el mouse se mueve sobre cada elemento <li&rt;, siempre aparece 4, no el subíndice del elemento que esperábamos. ¿Por qué es esto? Ya se ha mencionado en las precauciones (valor final). Obviamente, esta explicación es demasiado simple. Cuando el evento mouseover llama a la función de escucha, primero verifica si i está definido dentro de la función anónima (function(){alert(i);}), y el resultado es que no está definido ; entonces buscará y encontrará El resultado ya está definido, y el valor de i es 4 (el valor de i después del ciclo); por lo tanto, 4 finalmente aparece cada vez.
//解决方法一：
//代码如下:
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
(function(index){
lists[ index ].onmouseover = function(){
alert(index);
};
})(i);
}
//解决方法二：
//代码如下:
var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i < len; i++){
lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标
lists[ i ].onmouseover = function(){
alert(this.$$index);
};
}
//解决方法三：
//代码如下:
function eventListener(list, index){
list.onmouseover = function(){
alert(index);
};
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
eventListener(lists[ i ] , i);
}
2.4.1 Fugas de memoria
El uso de cierres es muy fácil de provocar pérdidas de memoria en el navegador y, en casos graves, el navegador se cuelga.
3. Múltiples métodos de llamada de funciones anónimas en Javascript
Hay muchas formas de definir funciones en Javascript, y los literales de función son una de ellas. Como var fun = function(){}, si la función no está asignada a fun, entonces es una función anónima. Bien, veamos cómo se llama a la función anónima.
//方式1，调用函数，得到返回值。强制运算符使函数调用执行
//代码如下:
(function(x,y){
alert(x+y);
return x+y;
}(3,4)); //方式2，调用函数，得到返回值。强制函数直接量执行再返回一个引用，引用再去调用执行
//代码如下:
(function(x,y){
alert(x+y);
return x+y;
})(3,4);
这种方式也是很多库爱用的调用方式，如jQuery，Mootools//方式3，使用void
//代码如下:
void function(x) {
x = x-1;
alert(x);
}(9);//方式4，使用-/+运算符
//代码如下:
-function(x,y){
alert(x+y);
return x+y;
}(3,4);
+function(x,y){
alert(x+y);
return x+y;
}(3,4);
--function(x,y){
alert(x+y);
return x+y;
}(3,4);
++function(x,y){
alert(x+y);
return x+y;
}(3,4);//方式5，使用波浪符(~)
//代码如下:
~function(x, y) {
alert(x+y);
return x+y;
}(3, 4);Finalmente, mire el método de llamada incorrecto
//代码如下:
function(x,y){
alert(x+y);
return x+y;
}(3,4);