JSの変数スコープの詳細な分析

変数には、グローバル変数とローカル変数の 2 つのスコープがあります。この記事では主に、JS の変数スコープの詳細な分析について説明し、皆様のお役に立てれば幸いです。

グローバル変数

最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：
    var n=10;
　　function f1(){
　　　　console.log(n);
　　}
　　f1(); // 输出10,说明全局变量n在函数内部被读取

ローカル変数

局部变量：在函数内部声明的变量。函数内部的变量，外部无法读取。
　function f1(){
　　　　var n=10;
　　}
　　console.log(n); // 没有定义，说明函数内部的变量，外部无法读取。

ES5のスコープ

for(var i =0;i<10;i++){

}
console.log(i)

js、このコードでは何が出力されると思いますか？答えは 10 です。 ES5 ではグローバル スコープと関数スコープのみで、ブロック スコープの機能は実装できません。以下のコードを見てください:

(function(){
for(var i =0;i<10;i++){

}
})()
console.log(i)

答えは 1 です。この書き方は即時呼び出し関数式 (IIFE) と呼ばれます。これは実際に、このスコープで宣言された変数はブロック内でのみ有効であり、ローカル スコープを作成することはできません。外部からアクセスできます。この書き方の利点は、グローバル変数を汚さないことです。
ここでもう 1 つ言及したいのは、ES5 では変数の宣言が厳密ではないということです。a=10 を直接使用してグローバル変数を宣言できます。 以下のように: r

a=10;console.log(a)

出力 10、ここで変数を使用してそれを使用できます。実際、JS は 1 つのことを行うのに役立ちました。次のコードが実行されます:

var a=undefined;a=10;console.log(a)

次に、より高度なこと、つまり変数のプロモーションを実行しましょう。 (ES5 の概念、ES6 での新しい使用法では変数の昇格は発生しません)、コードを見てください:

a=10;
(function(){console.log(a)var a=1;
})();

上記のコードは何を出力しますか?分析してみましょう:

var a=undefined;
a=10;
(function(){var a=undefined;
console.log(a)
a=1;
})();

これで、変数のプロモーションが何を意味するか理解できました。実際、これは宣言を前面に持ってくることを意味するので、

ES6 のスコープ

for(let i=0;i<10;i++){
}console.log(a)

出力 a はここでは定義されていません。 、let を使用して宣言された変数は、宣言中に使用できません。

a=3let a =10;alert(a)

は「定義されていません」と出力します。なぜですか? Ruan Yifeng の ES6 では、let コマンドがブロックレベルのスコープに存在する限り、宣言された変数はこの領域に「バインド」され、外部の影響を受けなくなると述べています。 ES6 では、ブロック内に let および const コマンドがある場合、このブロック内でこれらのコマンドによって宣言された変数は最初から閉じられたスコープを形成することを明確に規定しています。宣言前にこれらの変数を使用すると、エラーが発生します。

var a, b;

(function () {
    console.log(a);// undefined
    console.log(b);// undefined

    var a = b = 0;// (1)

    console.log(a);// 0
    console.log(b);// 0
})();

console.log('window', a);// window undefined
console.log('window', b);// window 0

関連する推奨事項:

phpのインクルードファイルの変数スコープの詳細な説明

JavaScriptの変数スコープ、メモリ、DOMリークおよびその他の問題の例の詳細な説明

JavaScriptの変数スコープの例の紹介

以上がJSの変数スコープの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。