最近人気の Uncle Tom シリーズや「JavaScript Advanced Programming」の記事など、JavaScript クロージャに関する記事をいくつか読みました。大学の教科書に載っているコードの一部は理解できません。読まないでください、それは天国からの本のようです。幸いなことに、最近「ppk on JavaScript」と「オブジェクト指向 JavaScript」という 2 冊の良書に出会いました。後者はまだ中国語版がありませんが、前者はオリジナル版を読むことをお勧めします。複雑な文章ではないので、興味のある人は読んでみてください。
今日はこれら 2 冊の本を組み合わせて、最も簡単な言語と最も一般的な方法で JavaScript のクロージャーについて話します。私も初心者なので、間違いがあれば指摘してください。
1. 準備知識1. 関数のパラメータとしての関数
JavaScriptを学習する際には、他の言語とは異なる概念を常に持たなければなりません:関数(関数)は特別なものではなく、データの一種でもあり、 bool、string、number も同様です。
関数のパラメータには、次のような文字列、数値、ブール値を指定できます。
function(a, b) {return a b;}
ただし、関数を渡すこともできます。そうですね、関数のパラメータは関数です。次の 2 つの関数を結合します:
// 3 つ置く 数値を 2 倍にする
function multiplyByTwo(a, b, c) {
var i, ar = [];
for(i = 0; i ar [i] = 引数[i] * 2;
}
戻り値
}
//数値を 1 つ加算します
function addOne(a) {
return a
}
次に、
var myarr = [] ;
//まず、ループを使用して各数値を 2 で乗算します。
myarr = multiplyByTwo(10, 20, 30);
//次に、次を使用して各数値に 1 を加算します。 another Loop
for (var i = 0; i
この処理は実際には 2 つのループ間にはまだ改善の余地があるので、これを実行してみてはいかがでしょうか:
関数 multiplyByTwo(a, b, c, addOne) {
var i, ar = []
for(i = 0; i ar[i] = addOne (arguments[i] * 2);
}
return ar;
このようにして関数が渡されます。をパラメータとして呼び出し、最初のループで直接呼び出します。このような関数は、有名なコールバック関数です
2. 戻り値としての関数
関数には戻り値が存在しますが、一般的には
などの数値の戻り値に慣れています。
return 12
}
しかし、関数が単なるデータの一種であることを理解すると、関数を返すことも考えることができます。次の関数に注目してください:
alert('A!');
return function(){
alert('B!')
}
「B!」をポップする関数を返します。次にそれを使用します:
コードをコピーします
コードは次のとおりです: var newFunc = a (); newFunc();
結果はどうなりましたか?最初に a() を実行すると、「A!」が表示されます。このとき、newFunc は関数 a の戻り値を受け取ります。このとき、newFunc が再度実行されると、「B」が返されます。 " ポップアップします。!"
3. JavaScript のスコープ
JavaScript のスコープは非常に特殊です。他の言語のようなブロック (ループなど) ではなく、関数に基づいています。次の例を見てください。
var a = 1; function f(){var b = 1; return a;}
この時点で b の値を取得しようとすると、firebug でalert(b) と入力しようとすると、エラーが表示されます。 ヒント:
b は定義されていません
なぜこれを理解できますか: あなたがいるプログラミング環境またはウィンドウは、ユニバースのようなトップレベル関数ですが、b は単に変数です。宇宙の内部関数 小さな惑星上の点は見つけるのが難しいため、この環境では呼び出すことができません。逆に、この内部関数は変数 a を呼び出すことができます。変数 a は全体に公開されています。ユニバースであり、隠れる場所はありません。また、関数内で独自の惑星上にあるため、 b を呼び出すこともできます。
上記の例に関して:
f() の外側では、a は表示されますが、b は表示されません
f() の内側では、a が表示され、b も表示されます
もう少し複雑です:
var a = 1; c はこの層のどちらにもありません
function f(){
var b = 1;
function n() { //a、b、c はすべてこの n 関数を呼び出すことができることがわかります。 a、b は公開されており、c は独自の内部
var c = 3;
}
}
関数 b は変数 c を呼び出すことができますか?いいえ、JavaScript のスコープは関数に基づいているので、c は n の中にあるため、f には見えないことに注意してください。
クロージャについて正式に話し始めます:
まずこの写真を見てください:
それぞれ G、F、N が 3 つのレベルの関数を表し、そのレベルは図に示すとおりであり、それぞれ a、b、c が変数であるとします。上記の範囲に基づいて、次の結論が得られます:
- あなたが点 a にいる場合、b は目に見えないため、b を参照することはできません。
- c のみが b を参照できます
クロージャーに関して逆説的なのは、次のことが起こることです:
NがFの限界突破！私たちはaさんと同じ階に逃げました！ 関数は定義されたときのみ環境を認識するため ( 実行時ではありません。これは非常に重要です )、N の c はこの時点でも b にアクセスできます。まだ b!
にアクセスできません
しかし、これはどのようにして達成されるのでしょうか?次のように:
クロージャ 1:
function f( ){
var b = "b";
return function(){ // 名前のない関数なので、匿名関数です
return b;
}
返された関数は親関数内の変数 b にアクセスできることに注意してください
この時点で b の値を取得したい場合は、もちろん未定義です
しかし、そうする場合これ:
var n = f();
n();
b の値を取得できます。このときn関数はfの外側にあり、bはfの内側の変数ですが、fの内側には内部の関数があり、bの値が返されます...
さて皆さんも感じますよね
クロージャ 2:
var n; function f(){
var b = "b";
n = function(){
return b;
}
}
何が起こるかこの時点で f が呼び出されたら?次に、n のグローバル スコープ関数が生成されますが、この関数は f の内部にアクセスでき、上記と同様に b の値を返すことができます。
クロージャ 3:
クロージャを使用して関数のパラメータにアクセスすることもできます
function f(arg) { var n = function(){
return arg;
return n; ;
}
使用する場合:
コードをコピー;
結果は 124 です。
f で返された無名関数は、最初は n に、次に外側の m にと 2 回変更されていますが、本質は変わっていません。定義されたときの親関数のパラメーターが返されます。
クロージャ 4:
var getValue, setValue;
function() {
var シークレット = 0;
setValue = function(v){
シークレット = v ;
})
コードをコピー
コードは次のとおりです:
Noこれを説明する必要があります。オブジェクト指向言語 (C# など) の基盤がある場合、ここでの getValue と setValue はオブジェクトのプロパティ アクセサーに似ており、これら 2 つのアクセサーを通じて値を割り当てたり取得したりできます。 実際、この本にはクロージャの例がいくつかありますが、上記の 4 つの原則が出発点として機能し、JavaScript の上級読者がクロージャについてより深く理解できるようになれば幸いです
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
