JavaScriptブロックレベルスコープの実装原理（画像と文章で詳しく解説）-jsチュートリアル-php.cn

JavaScriptブロックレベルスコープの実装原理（画像と文章で詳しく解説）

WBOY

リリース： 2022-02-01 06:00:31

転載

2845 人が閲覧しました

この記事では、JavaScript におけるブロックレベルスコープの実装原則についての知識を提供します。ES6 より前では、ブロックレベルスコープは JavaScript でサポートされていませんでした。JavaScript はどのようにしてブロックレベルスコープをサポートしましたか? 毛糸?この記事では、ブロックレベルのスコープの基本的な実装原則について説明します。皆様のお役に立てれば幸いです。

JavaScriptブロックレベルスコープの実装原理（画像と文章で詳しく解説）

スコープと実行コンテキスト

スコープと実行コンテキストは同じ概念であると多くの人が考えていますが、この考えは完全に間違っています。

スコープ

スコープは、関数が宣言されたときに決定されます。スコープは、名前に基づいて変数を検索するための一連のルールであり、現在実行中のコードのアクセス権を決定します。変数。 JavaScript は、グローバルスコープ、関数スコープ、ブロックレベルスコープの 3 種類のスコープをサポートしています。

実行コンテキスト

実行コンテキストとは、プリコンパイル時にjsエンジンが実行するための、解釈から実行までの準備作業であり、現在の領域の実行環境を作成します。実行コンテキストです。

実行スタック

コールスタックは、JS コードにさまざまな実行コンテキストをインストールするために使用され、JS エンジンが関数の実行を追跡するメカニズムです。

次のコードを例にします:

console.log(1);
function pFn() {
    console.log(2);
    (function cFn() {
        console.log(3);
    }());
    console.log(4);
}
pFn();
console.log(5);
//输出：1 2 3 4 5

ログイン後にコピー

まず、グローバル環境の実行コンテキストがあり、pFn を呼び出した後、関数環境 pFn の実行コンテキストがスタックにプッシュされます。 cFn は pFn 関数内で実行されるため、cFn 関数の実行コンテキストをプッシュし続け、実行後に順番にスタックからポップします。

グローバルコンテキストは、Web ページを閉じるかブラウザを終了するなど、アプリケーションが終了する前にのみ破棄されます。

JavaScriptブロックレベルスコープの実装原理（画像と文章で詳しく解説）

JavaScript はブロックレベルをどのようにサポートしますかscope

js の初期設計が標準ではないため、var キーワードを使用して変数を定義すると、変数の昇格などの一連の問題が発生することはわかっていますが、互換性を維持するために、変数を宣言する var メソッドのサポートを維持する必要があります。つまり、JavaScript は変数のプロモーションとブロックレベルのスコープの両方をどのようにサポートするのでしょうか?

次のコードを例に挙げます。

function foo() {
   var a = 1;
   let b = 2;
   {
   let b = 3;
   var c = 4;
   let d = 5;
   console.log(a);
   console.log(b);
   }
   console.log(b);
   console.log(c);
   console.log(d);
}

ログイン後にコピー

まず、関数内で var で宣言された変数は変数環境に格納され、let で宣言された変数はレキシコンに格納されます。プリコンパイルの段階では、もちろん、関数本体内のブロックスコープで let によって宣言された変数は字句環境には保存されません。

JavaScriptブロックレベルスコープの実装原理（画像と文章で詳しく解説）