Une discussion détaillée des fonctions anonymes JavaScript et des compétences de Closures

Une discussion détaillée des fonctions anonymes JavaScript et des compétences de Closures_Javascript

WBOY

Libérer： 2016-05-16 16:31:26

original

1326 Les gens l'ont consulté

1. Fonction anonyme
Les fonctions sont les objets les plus flexibles de JavaScript. Nous expliquons ici uniquement l'utilisation de fonctions anonymes. Fonction anonyme : C'est une fonction sans nom de fonction.

1.1 Définition de la fonction, introduisez d'abord brièvement la définition de la fonction, qui peut être grossièrement divisée en trois manières

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

Copier le code Le code est le suivant :

fonction double(x){

Renvoyez 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é.

Copier le code Le code est le suivant :

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 square.

1.2 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 :

Copier le code Le code est le suivant :

(fonction(x, y){

alerte(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.

2. Clôture
Le mot anglais pour fermeture 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).

Exemple 1

Copier le code Le code est le suivant :

fonction checkClosure(){

var str = 'homme-pluie';

setTimeout(

           function(){ alert(str); } //Il s'agit d'une fonction anonyme

, 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.

Exemple 2, code optimisé

Copier le code Le code est le suivant :

fonction forTimeout(x, y){

alerte(x y);

>

fonction retard (x, y, temps){

setTimeout('forTimeout(' x ',' y ')' , time);
>

/**

* La fonction de retard ci-dessus est très difficile à lire et pas facile à écrire, mais si vous utilisez des fermetures, le code peut être rendu plus clair

* fonction retard(x, y, temps){

* setTimeout(

* fonction(){

* forTimeout(x, y) 

*                                                                                        
* , heure); 

*🎜>
​*/

3. Exemple

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

Exemple 3 :

Copier le code Le code est le suivant :

var oEvent = {};
(fonction(){
var addEvent = function(){ /*Implémentation du code omise*/ };
Fonction 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 voulons utiliser ce code : oEvent.addEvent(document.getElementById('box') , 'click' , function(){});

Exemple 4 :

Copier le code Le code est le suivant :

var rainman = (fonction(x, y){

Retourner x y ;

})(2, 3);

/**

* peut également être écrit sous la forme suivante, car la première parenthèse ne nous aide qu'à lire, mais le format d'écriture suivant n'est pas recommandé. 

* var rainman = fonction(x, y){

* retourner 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.

Exemple 5 :

Copier le code Le code est le suivant :

var externe = null;

(fonction(){

var un = 1;

Fonction intérieure (){

         un = 1 ;

alerte(une);

>

extérieur = intérieur;

})();

externe(); //2

externe(); //3

externe(); //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 one ; et la variable globale external fait référence à inner, donc appeler external trois fois fera apparaître le résultat incrémentiel.

4.Attention
4.1 La fermeture permet à la fonction interne de faire référence à la variable dans la fonction parent, mais la variable est la valeur finale

Exemple 6 :

Copier le code Le code est le suivant :

/**
*
*

deux

trois

var lists = document.getElementsByTagName('li');
pour(var i = 0 , len = lists.length ; i < len ; i ){
Listes[ i ].onmouseover = function(){
alerte(i);
};
>

Vous constaterez que lorsque la souris se déplace sur chaque élément

Solution 1 :

Copier le code Le code est le suivant :

var lists = document.getElementsByTagName('li');
pour(var i = 0 , len = lists.length ; i < len ; i ){
(fonction(index){
Listes[index].onmouseover = function(){
alerte(index);
})(i);
>

Solution 2 :

Copier le code Le code est le suivant :

var lists = document.getElementsByTagName('li');

pour (var i = 0, len = lists.length; i < len; i ){

Lists[ i ].$$index = i; //Enregistrez l'indice en liant l'attribut $$index sur l'élément Dom 

Listes[ i ].onmouseover = function(){

alert(this.$$index); 

};

>

Solution trois :

Copier le code Le code est le suivant :

fonction eventListener(liste, index){

List.onmouseover = function(){

alerte(index);

};

>

var lists = document.getElementsByTagName('li');

pour(var i = 0 , len = lists.length ; i < len ; i ){

EventListener(listes[ i ] , i);

>

4.2 Fuite de mémoire

L'utilisation de fermetures peut facilement provoquer des fuites de mémoire dans le navigateur. Dans les cas graves, le navigateur se bloquera. Si vous êtes intéressé, vous pouvez vous référer à : http://www.jb51.net/article/57404. htm