JavaScript の 2 種類の変数スコープの違いは何ですか?

違い: グローバル スコープでは、変数はページ スクリプト全体で表示され、自由にアクセスできます。ローカル スコープでは、変数は宣言された関数内でのみ表示でき、関数の外部からアクセスすることはできません。関数が実行された後、ローカル スコープは破棄されます。

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

変数スコープとは、「変数スコープ(Scope)」とも呼ばれ、プログラム内で変数がアクセスできる有効範囲のことを指し、変数の可視性とも呼ばれます。

スコープ

1. スコープとは

一般的に、プログラム コードの一部は常に有効で利用できるとは限らず、名前の利用可能性を制限するコード スコープは名前のスコープです。

JS スコープ: コード名 (変数) のスコープです

スコープの目的: プログラムの信頼性を向上させること、そしてより重要なことに、名前の競合を減らすことです

2. JS スコープの分類 (ES6 以前)

JS スコープは、グローバル スコープとローカル スコープ (関数スコープ) の 2 つのカテゴリに分類できます。

1) グローバル スコープ:

script タグに直接記述された JS コードはグローバル スコープです;

または別の JS ファイルに記述されます。

グローバル スコープは、ページが開かれたときに作成され、ページが閉じられたときに破棄されます。

グローバル スコープには、グローバル オブジェクト ウィンドウがあります (ブラウザによって作成されたブラウザ ウィンドウを表します)。 )、直接使用できます。

グローバル スコープでは、

• 作成されたすべての変数がウィンドウ オブジェクトのプロパティとして保存されます。

#作成されたすべての関数は、ウィンドウ オブジェクトのメソッドとして保存されます。

2) ローカル スコープ (関数スコープ):

関数内はローカル スコープであり、この名前はこのコードは関数内でのみ機能します。

関数のスコープは、関数が呼び出されたときに作成されます。関数が実行されると、関数のスコープは破棄されます。

毎回新しいスコープが作成されます。関数のスコープは互いに独立しています。

分析例:

この例では、un 関数のローカル スコープに num 変数があり、グローバル スコープにも num 変数があります。スクリプトタグの。

(1 つはグローバル スコープにあり、もう 1 つはローカル スコープにあります。2 つの変数の変数名は競合しますが、影響はありません。)

したがって、異なる関数では次のようになります。ドメインでは、同じ名前の変数は影響を受けないため、名前の競合が効果的に軽減されます。

<script>
    var num = 10;
    function nu(){
        var num = 20;
        console.log(num);
    }
    nu();
    console.log(num);
</script>

この段階 (ES6 以前) では JS にブロックレベルのスコープはありません。ブロックレベルのスコープは中括弧 ({}) で囲まれています。

2. 変数のスコープ

JavaScript 変数は、グローバル変数とローカル変数に分けることができます:

• グローバル変数: 変数はページ全体にありますscript これらはすべて表示され、自由にアクセスできます。スコープはグローバル スコープです。

• ローカル変数: 変数は、宣言された関数内でのみ表示でき、関数の外部からアクセスすることはできません。変数のスコープはローカル スコープです。

例 1

次の例は、グローバル変数とローカル変数の関係を示しています。

var a = 1;  //声明并初始化全局变量
function f(){  //声明函数
    document.write(a);  //显示undefined
    var a = 2;  //声明并初始化局部变量
    document.write(a);  //显示 2
}
f(); //调用函数

同じ名前のローカル変数 a が関数内で宣言されているため、プリコンパイル期間中、JavaScript はこの変数を使用して関数内のグローバル変数の影響をオーバーライドします。実行の開始時、ローカル変数 a には値が割り当てられていないため、関数のコードの最初の行で読み取られるローカル変数 a の値は未定義です。関数のコードの 2 行目が実行されると、ローカル変数には値 2 が代入されるため、3 行目には 2 と表示されます。

例 2

次の例は、ローカル変数を明示的に宣言しない場合の結果を示しています。

var jQuery = 1;
(function () {
    jQuery = window.jQuery = window.$ = function(){};
})()
document.write(jQuery);  //显示函数代码：function(){}

したがって、関数本体内でグローバル変数を使用することは危険な行為です。このような問題を回避するには、関数本体内で var ステートメントを使用してローカル変数を明示的に宣言する習慣を身に付ける必要があります。

[推奨学習:

JavaScript 上級チュートリアル]

以上がJavaScript の 2 種類の変数スコープの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。