js でのクロージャと即時実行関数の使用の概要 (コード例)

この記事では、js でのクロージャと即時実行関数の使用方法を紹介します (コード例)。必要な方は参考にしてください。

はじめに: 最近、『JavaScript Advanced Programming』を詳しく読んでいます。私にとって、この本の中国語版には不十分な翻訳が多いため、自分の理解している範囲で解釈するようにしています。間違いや漏れがございましたら、ご指摘いただければ幸いです。この記事の内容のほとんどは『JavaScript Advanced Programming, Third Edition』から引用しています。

スコープ チェーンのこの構成メカニズムは、注目すべき副作用をもたらします。つまり、クロージャは、クロージャに含まれる変数の最後の値しか取得できません。

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

この関数は関数の配列を返します。表面的には、各関数は独自のインデックス値を返す必要があるように見えます。つまり、位置 0 の関数は 0 を返し、位置 1 の関数は 1 を返す、というようになります。

しかし、実際には、各関数は 10 を返します。これは、createArray のアクティブ オブジェクトが各関数のスコープに格納されているため、すべてが同じ変数 i を参照するためです。

createArray() 関数がリターンすると、変数 i の値は 10 になります。このとき、各関数は同じ変数 i を参照するため、i の値は 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

では、この関数を期待どおりに動作させるにはどうすればよいでしょうか?

別の匿名関数を作成すると、クロージャが強制的に期待どおりに動作するようになり、即時実行関数も適用されます。

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

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

foo(); // "hi"

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

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


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

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

即時実行関数を使用すると、クロージャを強制的に期待どおりに動作させることができます。

rreeee

以上がjs でのクロージャと即時実行関数の使用の概要 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。