JavaScript スコープの 2 つのカテゴリとは何ですか?-フロントエンドQ&A-php.cn

JavaScript スコープの 2 つのカテゴリとは何ですか?

青灯夜游

リリース： 2023-01-07 11:43:58

オリジナル

2676 人が閲覧しました

JavaScript スコープは、グローバルスコープとローカルスコープの 2 つのカテゴリに分類されます。変数は関数の外部でグローバル変数として定義され、グローバル変数にはグローバルスコープがあります。つまり、Web ページ内のすべてのスクリプトと関数を使用できます。変数は関数内でローカルスコープとして宣言され、ローカルスコープは通常、関数内でのみ使用されます。固定コードフラグメント (関数など) には内部的にアクセスできます。

JavaScript スコープの 2 つのカテゴリとは何ですか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

変数のスコープとは、スクリプトコード内の変数の有効な読み取りおよび書き込み可能な範囲、つまり、変数を使用できるスクリプトコード内の領域を指します。

変数のスコープは、主にグローバルスコープとローカルスコープ (関数スコープとも呼ばれます) の 2 種類に分かれます。

対応するスコープ内の変数をそれぞれグローバル変数、ローカル変数と呼びます。グローバル変数はすべての関数の外部で宣言され、ローカル変数は関数本体または関数の名前付きパラメーター内で宣言された変数です。

グローバルスコープ

変数は関数の外部でグローバル変数として定義されます。グローバル変数にはグローバルスコープがあり、Web ページ内のすべてのスクリプトと関数が使用できます。

コード内のどこからでもアクセスできるオブジェクトはグローバルスコープを持ちます。一般に、次の状況がグローバルスコープを持ちます:

1. 最外部関数と最外部関数レイヤー関数の外側で定義された変数グローバルスコープを持つ

# 2. 定義されておらず、値が直接割り当てられていないすべての変数は、自動的にグローバルスコープを持つように宣言されます

# 3. ウィンドウオブジェクトのすべてのプロパティはグローバルスコープを持つ

通常、ウィンドウオブジェクトの組み込みプロパティには、window.name、window.location、window.top などのグローバルスコープがあります。

ローカルスコープ

変数は関数内でローカルスコープとして宣言されます。

グローバルスコープとは対照的に、ローカルスコープは通常、固定コードフラグメント (例: 関数) 内でのみアクセスできます。最も一般的なものは関数内にあるため、場所によっては、 this この種のスコープは関数スコープと呼ばれます。

つまり、JS パーサーが実行されると、最初に実行環境でグローバルオブジェクトが構築されます。定義したグローバルプロパティは、オブジェクトのプロパティとして読み取られます。トップレベルのコードでは、次を使用します。 this キーワードとウィンドウオブジェクトの両方からアクセスできます。

関数本体内のローカル変数は、関数実行時に生成される呼び出し元オブジェクト内にのみ存在し、関数実行と同時に破棄されます。

したがって、プログラミングでは、変数を合理的に宣言する方法を考慮する必要があります。これにより、不必要なメモリのオーバーヘッドが削減されるだけでなく、変数の繰り返し定義や以前に定義された変数の上書きによるデバッグが大幅に回避されます。

説明:

変数のスコープは、宣言メソッドと密接に関連しています。 var を使用して宣言された変数にはグローバルスコープと関数スコープがあり、let と const を使用して宣言された変数にはグローバルスコープとローカルスコープがあります。

注: 厳密な意味でのグローバル変数は window オブジェクトのプロパティに属しますが、let と const によって宣言された変数は window オブジェクトに属さないため、グローバル変数ではありませんここでは、それらはスコープの観点からのみグローバル変数です。

var は変数のプロモーションをサポートしているため、var 変数のグローバルスコープはページ全体のスクリプトコードに対して有効ですが、let と const は変数のプロモーションをサポートしていないため、let のグローバルスコープはconst変数が参照するのはページ全体の宣言文の先頭からスクリプトコードの最後までの全領域であり、宣言文より前の領域は無効となります。

同様に、var は変数のプロモーションをサポートしていますが、let と const は変数のプロモーションをサポートしていないため、var を使用して宣言されたローカル変数は関数全体で有効ですが、let と const を使用して宣言されたローカル変数は関数の先頭から有効です。宣言文から関数の末尾までが有効となります。ローカル変数とグローバル変数が同じ名前である場合、関数スコープ内ではローカル変数がグローバル変数を上書きする、つまり、ローカル変数は関数本体内で機能しますが、関数本体外では機能することに注意してください。グローバル変数は機能し、ローカル変数も機能します。変数は無効であり、ローカル変数を参照すると構文エラーが発生します。

例: 変数のスコープ

     var v1 = "JavaScript"; //全局变量
     let v2 = "JScript"; //全局变量
     let v3 = "Script"; //全局变量
     scopeTest();    //调用函数
     function scopeTest(){
         var lv = "aaa"; //局部变量
         var v1 = "bbb"; //局部变量
         let v2 = "ccc"; //局部变量

         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

ログイン後にコピー

上記のスクリプトコードは、それぞれ 4 つのグローバル変数と 3 つのローカル変数を宣言します。 scopeTest 関数の外側では、変数 v1、v2、v3、および v4 はグローバル変数であり、scopeTest 関数本体の内側では、lv と v2 はグローバル変数です。

ローカル変数 v1 および v2 がグローバル変数 v1 および v2 と同じ名前を持っていることがわかります。scopeTest 関数本体では、ローカル変数 v1 および v2 が有効であるため、関数内のこれら 2 つの変数の出力結果は次のようになります。本体は "bbb" " と "ccc" です。関数本体の外側では、グローバル変数 v1 と v2 が有効であるため、関数本体の外側では、これら 2 つの変数の出力結果はそれぞれ "JavaScript" と "JScript" になります。

また、グローバル変数 v3 と v4 は関数本体内で上書きされず、グローバル変数の値が出力されるため、v3 の関数本体内および関数外の出力結果は「スクリプト」となります。 v4 変数の割り当ては関数内にあります。呼び出し後、関数本体内の v4 の出力結果は「未定義」ですが、関数本体外の出力は宣言後であるため、結果は「VBScript」になります。 lv はローカル変数であるため、関数の外でアクセスすると「ReferenceError」エラーが報告されます。

上記のコードを Chrome ブラウザで実行した後、ブラウザのコンソールを開くと、以下に示すような出力が表示されます。

JavaScript スコープの 2 つのカテゴリとは何ですか?