ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptのスコープとは何ですか
JavaScriptのスコープとは何ですか
- 青灯夜游オリジナル
- 2022-01-18 17:50:353516ブラウズ
JavaScript では、スコープは変数 (オブジェクト、関数) のアクセス可能な範囲であり、スクリプト コードで読み書きできる変数の有効範囲です。スコープは変数の可視性とライフ サイクルを制御できます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
ほとんどすべての言語にはスコープの概念があります。簡単に言うと、scope (スコープ) は変数のアクセス可能なスコープです。つまり、スコープは変数の可視性とライフサイクルを制御します。変数。
JavaScript では、オブジェクトと関数も変数です。
ECMAScript6 以前は、変数のスコープは主にグローバル スコープとローカル スコープ (関数スコープとも呼ばれます) に分かれていましたが、ECMAScript6 以降では変数のスコープは主に次の 3 種類に分かれます。グローバル スコープ、ローカル スコープ、ブロック レベル スコープ。
対応するスコープ内の変数は、それぞれグローバル変数、ローカル変数、ブロックレベル変数と呼ばれます。
グローバル変数はすべての関数の外部で宣言されます。
ローカル変数は、関数本体または関数の名前付きパラメーター内で宣言された変数です。
ブロックレベル変数は、ブロック内で宣言された変数であり、ブロック内でのみ有効です。
変数のスコープは、宣言方法と密接に関連しています。 var を使用して宣言された変数には、グローバル スコープと関数スコープがあり、ブロック レベルのスコープはありません。let および const を使用して宣言された変数には、グローバル スコープ、ローカル スコープ、およびブロック レベルのスコープがあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var v1 = "JavaScript"; //全局变量
let v2 = "JScript"; //全局变量
let v3 = "Script"; //全局变量
scopeTest(); //调用函数
function scopeTest() {
var lv = "aaa"; //局部变量
var v1 = "bbb"; //局部变量
let v2 = "ccc"; //局部变量
if (true) {
let lv = "123"; //块级变量
console.log("块内输出的lv = " + lv); //123
}
console.log("函数体内输出的lv = " + lv); //aaa
console.log("函数体内输出的v1 = " + v1); //bbb
console.log("函数体内输出的v2 = " + v2); //ccc
console.log("函数体内输出的v3 = " + v3); //Script
//v4为全局变量，赋值在后面，因而值为undefined
console.log("函数体内输出的v4 = " + v4);
}
var v4 = "VBScript"; //全局变量
console.log("函数体外输出的lv = " + lv); //① 报ReferenceError错误
console.log("函数体外输出的v1 = " + v1); //JavaScript
console.log("函数体外输出的v2 = " + v2); //JScript
console.log("函数体外输出的v3 = " + v3); //Script
console.log("函数体外输出的v3 = " + v4); //VBScript
</script>
</body>
</html>上記のスクリプト コードは、4 つのグローバル変数、3 つのローカル変数、および 1 つのブロックレベル変数をそれぞれ宣言します。 scopeTest 関数の外側では変数 v1、v2、v3、v4 がグローバル変数、scopeTest 関数本体内では lv と v2 がグローバル変数、if 判定ブロックでは lv がブロックレベル変数です。
ローカル変数 v1 および v2 がグローバル変数 v1 および v2 と同じ名前を持っていることがわかります。scopeTest 関数本体では、ローカル変数 v1 および v2 が有効であるため、関数内のこれら 2 つの変数の出力結果は次のようになります。本体は "bbb" " と "ccc" です。関数本体の外側では、グローバル変数 v1 と v2 が有効であるため、関数本体の外側では、これら 2 つの変数の出力結果はそれぞれ "JavaScript" と "JScript" になります。
また、ブロックレベル変数 lv とローカル変数 lv は同名です。 if 判定ブロックではブロックレベル変数 lv が有効なので、ブロック内の出力結果は「123」となります。 "、ブロックの外では、ローカル変数 lv は有効ですが、lv 変数の出力結果は "aaa" になります。
また、グローバル変数 v3 と v4 は関数本体内で上書きされず、グローバル変数の値が出力されるため、関数本体内および本体外の v3 の出力結果は「スクリプト」となります。 "、および v4 変数への代入は関数呼び出しの後であるため、関数本体内の v4 の出力結果は「未定義」ですが、関数本体外の出力は宣言の後であるため、結果は「VBScript」になります。 lv はローカル変数であるため、関数の外でアクセスすると「ReferenceError」エラーが報告されます。
上記のコードを Chrome ブラウザで実行した後、ブラウザのコンソールを開くと、次の図に示す出力が表示されます。
28 行目のエラーの理由:
lv 変数はローカル変数であり、関数を終了した後は無効になります。このコード行をコメントにして実行します。この時点で、ブラウザ コンソールを開くと、次の内容が表示されます:
[関連する推奨事項: JavaScript 学習チュートリアル]
以上がJavaScriptのスコープとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。