この例のどの部分がクロージャですか？

Question

This linkには、JavaScriptのクロージャに関する例があります。例5では

、我々はこのコードを持っている：問題の説明では

function buildList(list) { 
    var result = []; 
    for (var i = 0; i < list.length; i++) { 
    var item = 'item' + i; 
    result.push(function() {console.log(item + ' ' + list[i])}); 
    } 
    return result; 
} 

function testList() { 
    var fnlist = buildList([1,2,3]); 
    // Using j only to help prevent confusion -- could use I. 
    for (var j = 0; j < fnlist.length; j++) { 
    fnlist[j](); 
    } 
} 

testList(); //logs "item 2 is undefined" 3 times 

を、それが 『未定義ITEM2「あなたが例を実行すると、ことに注意してください』記載されている3回警告さです！前の例と同様に、buildListのローカル変数にはクロージャが1つしかありません。

上記のコードのどの部分がクロージャですか？私は、どの部分が閉じられているのか分からないので、例と説明で捨てられているので、コードがなぜ定義されていないのか理解できません。

Answer 1

この例では、list,itemおよびiが閉じられています。ファンクションがresultにプッシュされているうちに3つのファンクションが実際にと呼ばれるまで評価されないため、問題が発生しています。

varを使用して1つだけi、及び上閉じますbuildList関数の1つのitem変数、result配列の点で非常にすべての機能があるので、これは、実際ES6は同様letキーワードを追加した理由の良い例であります同一のiと同じitemの変数に変換されます。もちろん、各反復で変更されます。 の最後の値を設定しようとしています。これはlist.lengthです。これは明らかにリストの最後の要素のインデックスより1だけ大きいので、list[i]にアクセスしようとすると、戻り値は未定義です。

forループでvar i = ...〜let i = ...を変更し、var item = ...〜let item = ...がこれを修正し、期待通りの結果を返します。

function buildList(list) { 
 
    var result = []; 
 
    for (let i = 0; i < list.length; i++) { 
 
    let item = 'item' + i; 
 
    // close on i and list. i does not get evaluated until fn gets called, 
 
    // so we need to create a new i for each iteration of the loop, hence the use of let 
 
    result.push(function() {console.log(item + ' ' + list[i])}); 
 
    } 
 
    return result; 
 
} 
 

 
function testList() { 
 
    var fnlist = buildList([1,2,3]); 
 
    // Using j only to help prevent confusion -- could use I. 
 
    for (var j = 0; j < fnlist.length; j++) { 
 
    fnlist[j](); 
 
    } 
 
} 
 

 
testList();

ES6 letを使用せずにこれを行う方法はこれのように、手動でループの反復ごとにiとlistに評価し、クローズする関数を作成することです。

FYI：ベストプラクティスの観点から見ると、これは実際にループの内部で関数を定義しないようにする適切な方法です。

function logFunction (index, list) { 
 
    // inside here, index and list get evaluated as their current values in the loop 
 
    // and then closed on for that specific value in the function being returned 
 
    return function() { 
 
    console.log("item" + index + " " + list[index]); 
 
    } 
 
} 
 
function buildList(list) { 
 
    var result = []; 
 
    for (var i = 0; i < list.length; i++) { 
 
    // pass i and list to function to manually create closure 
 
    result.push(logFunction(i, list)); 
 
    } 
 
    return result; 
 
} 
 

 
function testList() { 
 
    var fnlist = buildList([1,2,3]); 
 
    // Using j only to help prevent confusion -- could use I. 
 
    for (var j = 0; j < fnlist.length; j++) { 
 
    fnlist[j](); 
 
    } 
 
} 
 

 
testList(); //logs "item 2 is undefined" 3 times

Answer 2

クロージャは：

function() {console.log(item + ' ' + list[i])} 

アレイが構築される

、通過iクロージャ関数スコープのi可変外部への参照です。 i変数は常に同じで、forループのためにインクリメントしています。したがって、各クロージャ関数を呼び出すとlist[list.length]にアクセスしようとします（iは0からlist.length-1までのループ内で2になるため）したがってundefined例外があります。

Answer 3

これはクロージャのようになります。それは親スコープからiや他の変数を使用しているためfunction() {console.log(item + ' ' + list[i])}。

コードを実行するとどうなりますか？

ステップ1.プッシュ最初の関数、親スコープへのアクセスを持っている - 私は、ステップ0

===：2プッシュ第二の機能 - 同じことは、 - >私は（これは、同じ1 ===ステップ1のようi - 今の両方の機能がi === 1

を持っ...

工程：（list.length-1）配列内list.length - 1機能をプッシュ - >今i === list.length-1（これはすべてに同じであるiクロージャにはアクセスできます。

最後のステップは、forのi++です。

今あなたが作成した関数を呼び出しを開始それらはすべて今list.lengthに等しく、それがアクセスしたとき、それはundefinedですのでlist[list.length]それが配列の範囲外だと同じiへの参照を持っています。