Javascript学習ノート - 関数(3):クロージャと参照_基礎知識

JavaScript の最も重要な機能の 1 つはクロージャの使用です。クロージャを使用しているため、現在のスコープは常に外部スコープにアクセスできます。 Javascript にはブロック レベルのスコープがなく、関数スコープのみがあるため、クロージャの使用は関数と密接に関連しています。

プライベート変数をモックする

コードをコピーします コードは次のとおりです:

関数 Counter(start) {
var count = start;
戻り値 {
インクリメント: function() {
カウント ;
}、
get: function() {
戻り数;
}
}
}
var foo = Counter(4);
foo.increment();
foo.get(); // 5

ここで、Counter は 2 つのクロージャ (関数 increment と get) を返します。これら 2 つの関数は Counter スコープへのアクセスを維持するため、Counter スコープで定義された変数 count に常にアクセスできます。

プライベート変数の仕組み

JavaScript では値の代入やスコープの参照ができないため、上記の例では内部のプライベート変数 count に外部から直接アクセスする方法がありません。これにアクセスする唯一の方法は、クロージャを定義することです。

コードをコピーします コードは次のとおりです:

var foo = 新しいカウンター(4);
foo.hack = function() {
カウント = 1337;
};

ハックが Counter 内で定義されていないため、上記のコードは Counter スコープの count 変数の値を変更しません。上記のコードは、グローバル変数 count を作成または上書きするだけです。

ループ内のクロージャ

最もよくある間違いの 1 つは、ループ内でクロージャーを使用することです。

コードをコピーします コードは次のとおりです:

for(var i = 0; i setTimeout(function() {
コンソール.ログ(i); }, 1000);
}

上記のコードは0～9を出力せず、10回連続で出力します。

上記の匿名性により、変数 i への参照が常に維持されます。 console.log 関数が呼び出されて出力が開始されると、ループは終了し、変数 i はすでに 10 になっています。
上記のエラーを回避するには、ループを実行するたびに変数 i の値のコピーを作成する必要があります。

引用エラーを避ける

ループ内の変数の値をコピーするには、外部層に匿名の即時実行関数を追加するのが最善の方法です。

コードをコピーします コードは次のとおりです:

for(var i = 0; i (関数(e) {
setTimeout(function() {
コンソール.ログ(e); }, 1000);
})(i);
}

この外側の匿名関数はループ変数 i を最初のパラメーターとして受け取り、その値を独自のパラメーター e にコピーします。 外部匿名関数はパラメータ e を setTimeout に渡すため、setTimeout はパラメータ e への参照を持ちます。また、このパラメータ e の値は、外部ループの変更によって変更されません。

同じ効果を達成する別の方法は、setTimeout 内の匿名関数で匿名関数を返すことです。

コードをコピーします コードは次のとおりです:

for(var i = 0; i setTimeout((関数(e) {
return function() {
console.log(e);
}
})(i), 1000)
}

さらに、これは、bind メソッドを通じて実現することもできます。

コードをコピーします コードは次のとおりです:

for(var i = 0; i setTimeout(console.log.bind(console, i), 1000);
}

記事の最後に次のことをまとめます。

(1) クロージャは、コンテキストを分析することでユーザーの呼び出しを簡素化し、ユーザーが知らず知らずのうちに目的を達成できるようにする設計原則です。 (2) インターネット上の主流のクロージャ分析に関する記事は、実際にはクロージャの原則に反しています。クロージャを使いこなすためにクロージャの詳細を知る必要がある場合、そのクロージャは設計上の失敗です。 (3) 勉強はできるだけ少なくする。