JavaScript のスコープとクロージャの導入-jsチュートリアル-php.cn

# #JavaScript のスコープとクロージャ

JavaScript では、スコープとクロージャを明確にしておかないと、コードを書くときに多くの問題が発生しますので、今日はスコープとクロージャについてまとめてみます。

スコープ

スコープは主にグローバルスコープとローカルスコープに分かれており、ローカルスコープは関数スコープとブロックレベルスコープに分かれています。

グローバルスコープ

中括弧 ({}) の外側の変数または関数を定義すると、それはグローバル変数となり、その関数のドメインはグローバルになります。範囲。

let a = 1function fun1 () { console.log(a) // 结果：1 function fun2 () { console.log(a) // 结果：1 } fun2()}fun1()console.log(a) // 结果：1

ログイン後にコピー

変数 a は最外層で定義されており、世界中のどこでも使用できます。

同じレベルのスコープ内で、let または const を使用して変数を宣言すると、同じ名前の 2 番目の変数がエラーを報告し、var を使用して変数を宣言すると、前の変数がエラーを報告することに注意してください。上書き;

ローカルスコープ

関数または中括弧 ({}) 内で変数を定義すると、それはローカルスコープの変数になります。そのレベルのスコープの下位レベルのスコープで使用されます。

function fun1() { let a = 100 console.log(a) // 结果: 100 function fun2 () { console.log(a) // 结果：100 } fun2()}fun1()console.log(a) // 结果: a is not defined

ログイン後にコピー

a は内部関数を含む fun1 関数内でのみ使用でき、fun1 の範囲外に出ると使用できなくなります。

自由変数の検索

現在のスコープで定義されていないが使用されている変数は、自由変数です。その実行ルールは何ですか?

自由変数は、見つかるまでレイヤーごとに上位スコープまで検索されます。グローバルスコープが見つからない場合は、エラー「xx が定義されていません」が報告されます。

let a = 100function fun1 () { let a1 = 2 function fun2 () { let a2 = 3 let a = 0 function fun3 () { let a3 = 4 a++ console.log(a + a1 + a2 + a3) // 结果: 10 } fun3() } fun2()}fun1()console.log(a) // 结果: 100

ログイン後にコピー

上のコードに示すように、fun3 関数では、a、a1、a2 は定義されていませんが、使用されており、実行すると、上位レベルのスコープ内で値が検索されます。。グローバルスコープと fun2 の関数の両方で a を定義していることに注意してください。ただし、fun3 で使用される fun2 で定義された値は、外部で使用されるグローバルスコープの値です。つまり、上位が検索しているときの値になります。、見つかるとすぐに検索を停止し、最も近いものを使用します。スコープは相互に干渉しません。 (そこに存在する変数プロモーションと関数プロモーションについては、私の他のブログで特別な概要を確認できます)

クロージャー

クロージャーはスコープによって適用されます。この場合、主に 2 つの表現があります: (1) 関数はパラメータとして渡されます。 (2) 戻り値として関数が返されます。

/** * 函数作为返回值 */function create () { const a1 = 100 return function () { console.log(a1) }}const fn = create()const a1 = 200fn() // 结果: 100/** * 函数作为参数 */function print (fn) { const a2 = 300 fn()}const a2 = 400function fn1 () { console.log(a2)}print(fn1) // 结果: 400

ログイン後にコピー

上記のコードは、関数の 2 つのパフォーマンスを示しています。注目に値するのは、クロージャでは、自由変数の検索は関数が定義されている場所で行われ、検索は上位スコープ内で行われることです。処刑の場ではありません。

クロージャの実践的な応用シナリオ

(1) シンプルなキャッシュツールの作成など、データの非表示

(2) アンチシェイクとスロットル機能