JavaScript のスコープとクロージャの導入

無料学習の推奨事項: JavaScript ビデオ チュートリアル

# #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) アンチシェイクとスロットル機能

関連する無料学習の推奨事項: javascript(ビデオ)

以上がJavaScript のスコープとクロージャの導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。