JavaScript スコープとクロージャ

js

スコープとクロージャの例

var logElementNumber = function(len) {
    var funcArray = [];
    var i;
    // 1.0 まだ解釈されない。
    var func = function(n) {
        return function() {
            console.log(n, i);
        };
    };

    for (i = 0; i < len; i++) {
        // 1.1 　 i:0 len:3
        // 1.2　  i:1 len:3
        // 1.3  　i:2 len:3
        funcArray[i] = func(i);
        // 1.1.1  i:0 → var func = function(0) {
        // 1.2.1  i:1 → var func = function(1) {
        // 1.3.1  i:2 → var func = function(2) {
        // この時点では、 console.log(n, i); の n は決定している。
        //               console.log(n, i); の i はundifine
    }
    // funcArray[0]の中では、iはundefineのまま関数が定義される。
    // funcArray[1]の中では、iはundefineのまま関数が定義される。
    // funcArray[2]の中では、iはundefineのまま関数が定義される。
    // ※funcArrayを返却したときには、iは3または5になっている。
    return funcArray;
};

// 1. 定義
var myArray1 = logElementNumber(3);
var myArray2 = logElementNumber(5);

// 2. 実行
//   funcArray[x]の中では、iはundefineであるが、
//   ※印の時には、3または5になっているので、以下の実行結果となる。
myArray1[0](); // 結果: 0 3
myArray1[1](); // 結果: 1 3
myArray1[2](); // 結果: 2 3
myArray2[0](); // 結果: 0 5
myArray2[1](); // 結果: 1 5
myArray2[2](); // 結果: 2 5

www.oreilly.co.jp