Introduction à l'utilisation des fermetures et des fonctions d'exécution immédiate en js (exemple de code)

Cet article vous apporte une introduction à l'utilisation des fermetures et des fonctions d'exécution immédiate dans js (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos : J'ai récemment lu Javascript Advanced Programming Pour moi, la version chinoise du livre a des traductions insatisfaisantes à de nombreux endroits, j'essaie donc de l'interpréter en utilisant ce que je comprends. S'il y a des erreurs ou des omissions, nous vous serions très reconnaissants de les signaler. La plupart du contenu de cet article est tiré de « JavaScript Advanced Programming, Third Edition ».

Ce mécanisme de configuration de la chaîne de portée entraîne un effet secondaire notable, c'est-à-dire que la fermeture ne peut obtenir que la dernière valeur de toute variable qu'elle contient.

function createArray(){
    var result = new Array();
    for(var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        }
    }
    return result;
}

Cette fonction renverra un tableau de fonctions. En apparence, il semble que chaque fonction doive renvoyer sa propre valeur d'index, c'est-à-dire que la fonction en position 0 renvoie 0, la fonction en position 1 renvoie 1, et ainsi de suite.

Mais en fait, chaque fonction renvoie 10, car l'objet actif de createArray est stocké dans la portée de chaque fonction, donc ils font tous référence à la même variable i.

Lorsque la fonction createArray() revient, la valeur de la variable i est 10. À ce stade, chaque fonction fait référence à la même variable i, donc la valeur de i est 10.

// 代码执行过程

createArray();

/*
createArray() {
    var result = new Array();

    var i; // 0,1,2,3,4,5,6,7,8,9,10

    for ( i = 0; i < 10 ; i ++) {
        result[i] = function() {
            return i; 
            // 注意 函数的执行时机，你只有调用函数的时候，才会产生执行环境，沿着作用域链，找到活动对象
            // 这里有个闭包，还记得闭包的概念吗？ 有权访问到另外一个函数作用域的变量的函数
        }
    }
    
    /*
    result[0] = function(){
        return i
    }
    result[1] = function(){
        return i
    }
    result[2] = function(){
        return i
    }
    ....
    */
    return result;
}

result = [function(){return i}, function(){return i}....];

*/

createArray()[1](); // 10

Alors, comment pouvons-nous faire en sorte que cette fonction se comporte comme prévu ?

Vous pouvez forcer la fermeture à se comporter comme prévu en créant une autre fonction anonyme, où la fonction d'exécution immédiate est également appliquée.

//立即执行函数
//我们平时写函数然后调用是这么写的。
//声明函数，调用执行。

function foo(){
    console.log("hi");
}

foo(); // "hi"

//那么，我们可不可以声明调用写一块呢？ 这就是申明函数立刻执行。
//好像不可以，控制台报错

function foo(){
    console.log("hi");
}(); //Uncaught SyntaxError: Unexpected token )


//那么如果用括号包裹呢？

(function foo(){
    console.log("hi");
}()); // "hi"， 可以了。 这就是立即执行函数！

Avec la fonction d'exécution immédiate, nous pouvons forcer la fermeture à se comporter comme prévu.

//改写代码
function createArray() {

    var result = new Array();

    for( var i = 0; i < 10; i ++ ) {
        result[i] = (function(i) { 
            return function(){
                return i;
            }
        }(i));
    }
    return result;
}
createArray()[0](); // 0
createArray()[1](); // 1
createArray()[2](); // 2 
// 这里不只有一种方法，其他方法在此不表。

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!