[JS]JavaScript中級教程(feat.コード鞍馬)-Closer(Close)

1.語彙環境

JavaScriptには語彙環境があります.

let one;
one = 1;

function addOne(num) {
	console.log(one + num);  
}
addOne(5);

上のコードがどのように動作しているかを順番に見てみましょう.

スクリプトで宣言された変数は、Lexical環境にアップロードされます.

letと宣言された変数は昇格されます.初期化されていないため、使用できません.

関数宣言は、変数とは異なり、すぐに初期化されるため、任意の場所で使用できます.

変数に割り当てられた関数宣言では、次の内容は使用できません.

let one;発生時に割り当てられていないため、未定義の初期値があり、使用時にエラーは発生しません.

の最後の行で関数を実行し、新しいメキシコ環境を作成します.

ここでは、関数が受信したパラメータおよび領域変数が格納される.

のように、関数の内部Lexical環境とグローバルLexical環境は分離され、内部Lexical環境はグローバルLexical環境を参照します.

は、最初は内部->外部->グローバル順の

である.

コードでは、oneとnumはまず内部Lexicallで検索されます.ナムは見つけたが、見つからなかった.では、外に広がって探します.グローバルLexical環境でoneという変数が見つかったので使用できます.

2.例

function makeAdder(x) {
	return function(y) {
    	return x + y;  
    }
}

const add3 = makeAdder(3);   // (1)
console.log(add3(2));   // (2)

上記のコードは、最初の実行時にグローバルLexicalEnvironmentに入ります.次のようになります.
makeAdder: function
add 3:初期化X
その後(1)実行文が#の場合、makeAdderはLexical環境を実行して生成します.
このLexical環境には,伝達されたx人3が含まれる.
また、グローバルLexical環境では、文の実行に伴ってadd 3に関数が割り当てられます.
makeAdder: function
add3: function
ここで、(2)番目の文を実行すると、add 3という関数が実行され、別のLexical環境が生成されます.今回はyというパラメータが得られたので,2というyを格納した.
x+yを実行します.最初は最後に生成されたLexical環境で見つけられます.yがありますが、xがないので、参照の外部Lexicallに移動し、xを探して計算します.

3.結論

function makeAdder(x) {
	return function(y) {   // y를 가지고 있고 상위함수인 makeAdder의 x에 접근 가능하다
    	return x + y;  
    }
}

const add3 = makeAdder(3);
console.log(add3(2));   // 5
// add3 함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근이 가능하다.

const add10 = makeAdder(10);
console.log(add10(5));  // 15
console.log(add3(1));  // 4

Closureは、関数とディレクトリ環境の組み合わせを意味します.関数生成時の外部変数を記憶し、生成後もアクセスを継続することを指す.
(このポスターの内容はyoutube coding anmaのビデオを参考にしています)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4