クローズ - 常識？

Question

MDNのA re-introduction to JavaScript記事は、クロージャの議論で終了：

別の関数内で定義された関数は、外側 関数の変数にアクセスすることができます。ここでの唯一の違いは、外側の 関数が返されているため、常識的には にローカル変数が存在しなくなることが示されているようです。

この記事では、スコープオブジェクトとスコープチェーンなどについて説明します。非常に洗練されたサウンドです。しかし、サンプルスクリプトを踏んで歩いても、常識がうまくいかない理由はありません。

function makeAdder(a) { 
    return function(b) { 
    return a + b; 
    }; 
} 
var x = makeAdder(5); 
var y = makeAdder(20); 

x(6); // returns 11 
y(7); // returns 27 

だから、= Xを設定すると、引数で5 makeAdderします

x = function(b) {return 5 + b;}; 

を私たちは今、引数、6とxを呼び出すときに、私たちは11を返し

function(6) {return 5 + 6;}; 

を持っています。

私の質問は次のとおりです。私は何か不足していますか？閉鎖は単純だと思われる。なぜ人々はコンセプトに縛られるのだろうか？

Answer 1

私は私の質問は推測：私は何かが足りないのですか？閉鎖は単純だと思われる。なぜ人々はコンセプトに縛られるのだろうか？

いいえ、あなたは何も欠けていません。閉鎖は簡単です。あなたは彼らが複雑であると主張する人々に質問する必要があります—トピック—についての本を書くことさえあれば、なぜ彼らはそうだと思いますか。

複雑であると思われるものは、この単純な概念を利用したデザイン・マインドを採用することです。

Answer 2

DOM要素の作成ループが問題を最もよく示していることがわかりました。このコードが正しいiの値を持つボタンを印刷することに注意してください。クリックすると、その時点でiという新しいクロージャが作成されなかったため、5と表示されます。

for(var i = 0; i < 5; i++) { 
 
    var btn = document.createElement("button"); 
 
    var t = document.createTextNode(i); 
 
    btn.appendChild(t); 
 
    btn.onclick=function(){ alert(i) } 
 
    document.body.appendChild(btn); 
 
}

このコードは、正しい値に警告する新しいクロージャを作成します。

for(var i = 0; i < 5; i++) { 
 
    var btn = document.createElement("button"); 
 
    var t = document.createTextNode(i); 
 
    btn.appendChild(t); 
 
    btn.onclick=onClick(i); 
 
    document.body.appendChild(btn); 
 
} 
 

 
function onClick(i) { 
 
    return function() { alert(i) } 
 
}