Discussion détaillée sur l'utilisation des fermetures de fonctions JavaScript et du code de précaution, explication détaillée-js tutoriel-php.cn

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

伊谢尔伦

Libérer： 2017-07-25 15:04:27

original

1338 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Exemple 4 :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!