Une brève analyse des fonctions anonymes Javascript et des compétences auto-exécutables en fonctions_javascript

La fonction est l'objet le plus flexible de JavaScript. Nous expliquons ici uniquement l'utilisation de ses fonctions anonymes. Fonction anonyme : C'est une fonction sans nom de fonction.

La définition de la fonction peut être grossièrement divisée en trois manières :

Le premier type : C'est aussi le type le plus courant

function double(x){ 
return 2 * x; 
}

Deuxième méthode : cette méthode utilise le constructeur Function et traite à la fois la liste de paramètres et le corps de la fonction comme des chaînes. Ceci est très gênant et n'est pas recommandé.

var double = new Function('x', 'return 2 * x;');

Troisième type :

var double = function(x) { return 2* x; }

Notez que la fonction à droite de "=" est une fonction anonyme. Après avoir créé la fonction, la fonction est affectée à la variable carré.

Création de fonctions anonymes

La première méthode consiste à définir la fonction carré comme mentionné ci-dessus, qui est également l'une des méthodes les plus couramment utilisées.

La deuxième façon :

(function(x, y){ 
alert(x + y); 
})(2, 3);

Une fonction anonyme est créée ici (à l'intérieur de la première parenthèse), et la deuxième parenthèse est utilisée pour appeler la fonction anonyme et transmettre les paramètres. Les parenthèses sont des expressions, et les expressions ont des valeurs de retour, vous pouvez donc ajouter une paire de parenthèses après elles pour les exécuter

.

Fonction anonyme auto-exécutable

1. Qu'est-ce qu'une fonction anonyme auto-exécutable ?

Il fait référence à une fonction qui ressemble à ceci : (function {// code})();

2.Questions

Pourquoi (function {// code})(); peut être exécuté, mais function {// code}(); signale une erreur ?

3. Analyse

(1). Tout d’abord, il faut comprendre la différence entre les deux :
(function {// code}) est une expression, function {// code} est une déclaration de fonction.
(2). Deuxièmement, les caractéristiques de la "précompilation" js :
Dans la phase de "pré-compilation" de js, les déclarations de fonctions seront interprétées, mais les expressions seront ignorées.
(3). Lorsque js exécute function() {//code}();, puisque function() {//code} a été interprété dans l'étape de "précompilation", js ignorera function(){/ /code}, essayer d'exécuter ();, donc une erreur sera signalée
Lorsque js exécute (function {// code})();, puisque (function {// code}) est une expression, js la résoudra pour obtenir la valeur de retour Puisque la valeur de retour est une fonction, elle rencontre () ;, il sera exécuté.

De plus, la méthode de conversion d'une fonction en expression ne repose pas nécessairement sur l'opérateur de regroupement () On peut également utiliser l'opérateur void, l'opérateur ~, !

.

Par exemple :

!function(){ 
alert("另类的匿名函数自执行"); 
}();

Fonctions et fermetures anonymes

Le mot anglais pour Closure est Closure, qui est une partie très importante des connaissances en JavaScript, car l'utilisation de fermetures peut réduire considérablement la quantité de notre code, rendre notre code plus clair, etc. Bref, c'est très puissant.

La signification de la fermeture : pour parler franchement, la fermeture est l'imbrication de fonctions. La fonction interne peut utiliser toutes les variables de la fonction externe, même si la fonction externe a été exécutée (cela implique une chaîne de portée JavaScript).

function checkClosure(){ 
var str = 'rain-man'; 
setTimeout( 
function(){ alert(str); } //这是一个匿名函数 
, 2000); 
} 
checkClosure();

Cet exemple semble très simple. Il reste encore de nombreux points de connaissance après une analyse minutieuse de son processus d'exécution : l'exécution de la fonction checkClosure est instantanée (peut-être que cela ne prend que 0,00001 millisecondes), et une variable str est créée dans le corps de la fonction. de checkClosure. , str n'est pas libéré après l'exécution de checkClosure, car la fonction anonyme dans setTimeout a une référence à str. Après 2 secondes, la fonction anonyme dans le corps de la fonction est exécutée et str est libérée.

Utilisez des fermetures pour optimiser le code :

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); 
* } 
*/

La plus grande utilisation des fonctions anonymes est de créer des fermetures (qui est l'une des fonctionnalités du langage JavaScript), et peuvent également créer des espaces de noms pour réduire l'utilisation de variables globales.

var oEvent = {}; 
(function(){ 
var addEvent = function(){ /*代码的实现省略了*/ }; 
function removeEvent(){} 

oEvent.addEvent = addEvent; 
oEvent.removeEvent = removeEvent; 
})();

Dans ce code, les fonctions addEvent et removeEvent sont des variables locales, mais nous pouvons les utiliser via la variable globale oEvent, ce qui réduit considérablement l'utilisation de variables globales et améliore la sécurité de la page Web.

Nous souhaitons utiliser ce code :

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);

Ici on crée une variable rainman et on l'initialise à 5 en appelant directement la fonction anonyme. Cette petite astuce est parfois très pratique.

var outer = null; 
(function(){ 
var one = 1; 
function inner (){ 
one += 1; 
alert(one); 
} 
outer = inner; 
})(); 
outer(); //2 
outer(); //3 
outer(); //4

La variable one dans ce code est une variable locale (car définie au sein d'une fonction), elle n'est donc pas accessible de l'extérieur. Mais ici, nous avons créé la fonction interne, qui peut accéder à la variable un ; et la variable globale external fait référence à inner, donc appeler external trois fois fera apparaître le résultat incrémentiel.

Attention

1 La fermeture permet à la fonction interne de référencer la variable dans la fonction parent, mais la variable est la valeur finale

/** 
* <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); 
}; 
}

你会发现当鼠标移过每一个25edfb22a4f469ecb59f1190150159c6元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

解决方法一：

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 内存泄露

使用闭包十分容易造成浏览器的内存泄露，严重情况下会是浏览器挂死