Maison > Article > interface Web > Discussion détaillée sur l'utilisation des fermetures de fonctions JavaScript et du code de précaution, explication détaillée

Discussion détaillée sur l'utilisation des fermetures de fonctions JavaScript et du code de précaution, explication détaillée

伊谢尔伦original: 2017-07-25 15:04:271314parcourir

Le mot anglais pour fermeture est fermeture, 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. En bref, c'est très fonctionnel 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. Chaîne de domaines d'effets JavaScript).

Exemple 1

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

Cet exemple semble très simple Si vous analysez attentivement son processus d'exécution, il existe encore de nombreux points de connaissance : l'exécution de la fonction checkClosure est instantanée (peut-être seulement. prend 0,00001 millisecondes), une variable str est créée dans le corps de la fonction de checkClosure. Après l'exécution de checkClosure, str n'est pas libérée 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, optimiser le code

function forTimeout(x, y){
    alert(x + y);
}
function delay(x , y  , time){
    setTimeout(&#39;forTimeout(&#39; +  x + &#39;,&#39; +  y + &#39;)&#39; , 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 (c'est l'une des fonctionnalités du langage JavaScript), et vous pouvez également créer des espaces de noms pour réduire l'utilisation globale des variables.

Exemple 3 :

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

Exemple 4 :

var rainman = (function(x , y){
    return x + y;
})(2 , 3);
/**
 * 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
 * var rainman = function(x , y){
 *    return x + y;
 * }(2 , 3);
 */

Ici, nous créons une variable rainman et l'initialisons à 5 en appelant directement la fonction anonyme, qui This une petite astuce est parfois très utile.

Exemple 5 :

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.

Remarque : la fermeture permet aux fonctions internes de référencer des variables dans la fonction parent, mais la variable est la valeur finale

Exemple 6 :

/**
 * <body>
 * <ul>
 *     <li>one</li>
 *     <li>two</li>
 *     <li>three</li>
 *     <li>one</li>
 * </ul>
 */
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    lists[ i ].onmouseover = function(){
        alert(i);    
    };
}

Vous constaterez que lorsque la souris Lorsque vous passez sur chaque élément

Solution un :

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    (function(index){
        lists[ index ].onmouseover = function(){
            alert(index);    
        };                    
    })(i);
}

Solution deux :

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0, len = lists.length; i < len; i++){
    lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标
    lists[ i ].onmouseover = function(){
        alert(this.$$index);    
    };
}

Solution trois :

function eventListener(list, index){
    list.onmouseover = function(){
        alert(index);
    };
}
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    eventListener(lists[ i ] , i);
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation de la fonction de rappel javascript avec la fonction comme paramètreArticle suivant：Explication détaillée de l'utilisation de la fonction de rappel javascript avec la fonction comme paramètre

Articles Liés

Voir plus