JS の実行コンテキストを理解するためのステップバイステップの指導

この記事では、JavaScript の実行コンテキストを深く理解するために段階的に説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

実行コンテキストを理解することによってのみ、変数のプロモーション、スコープ、クロージャなどの JavaScript 言語自体をより深く理解することができます。実行コンテキスト

実行コンテキストは、現在のコードの実行環境です。

実行コンテキストには主に 3 つのタイプがあります:

グローバル実行コンテキスト: グローバル実行環境は、最も周辺的な実行環境です。ブラウザ グローバル オブジェクトは window です。これはこのオブジェクトを指します。

• #関数実行コンテキスト: 無数に存在する可能性があり、関数が呼び出されたときに作成されます。各関数呼び出しにより、新しい実行コンテキストが作成されます。

• eval 実行コンテキスト。めったに使用されません。

• 各実行コンテキストには 3 つの重要な属性があります:

変数オブジェクト、VO)

:各実行環境には変数オブジェクトが関連付けられており、環境内で定義されたすべての変数と関数はこのオブジェクトに格納されます。私たちが作成するコードはこのオブジェクトにアクセスできませんが、パーサーはデータを処理するときにバックグラウンドでこのオブジェクトを使用します。

• 関数のコンテキストでは、アクティベーション オブジェクト (AO) を使用して変数オブジェクトを表します。アクティブ オブジェクトと変数オブジェクトは実際には同じものです。実行環境に入ったときのみ、この実行コンテキストの変数オブジェクトがアクティブになります。このとき、アクティブ オブジェクト (AO) と呼ばれます。アクティブ オブジェクト上のプロパティのみです。にアクセスできます。

スコープ チェーン (スコープ チェーン)

: 環境内でコードが実行されると、変数オブジェクトのスコープ チェーンが作成されます。スコープ チェーンの目的は、実行環境がアクセスできるすべての変数と関数への順序付けされたアクセスを保証することです。

• #this

• 実行コンテキストのライフ サイクル: 作成 -> 実行 -> リサイクル

1. 作成フェーズ:

#1.1 変数オブジェクトの作成:

## 初期化関数のパラメータ引数

関数宣言変数宣言

• 変数オブジェクトを理解するための簡単な例

function getName(name) {
    var b = 2;
    function foo() {};
    var bar = function() {};

}
getName('lucystar')

• このときのAOは大まかに以下のとおりです

AO = {
    arguments: {
        0: 'lucystar',
        length: 1
    },
    name: 'lucystar',
    b: undefined,
    foo: reference to function foo(){},
    bar: undefined
}

• 上記の例 変数プロモーションと関数プロモーションが関係していますが、この記事の
JS の底から var、let、const を理解する

でも紹介されています

1.2スコープ チェーン

関数のスコープは、関数の定義時に決定されます。スコープ チェーン自体には変数オブジェクトが含まれています。変数を探すときは、まず現在のコンテキストの変数オブジェクトから検索します。見つからない場合は、変数が見つかるまで親実行コンテキストの変数オブジェクトから検索します。

1.3 この方向を決定する

この部分はさまざまな状況に分かれています。詳細については、別の記事を確認してください

これと呼び出しと適用とバインドの理解

2. 実行フェーズ

#変数の代入とコードの実行

##3. リサイクル フェーズ

実行 コンテキストはスタックからポップされ、ガベージ コレクション メカニズムによってリサイクルされます。メモリリサイクルの内容については、

V8 メモリ管理とガベージコレクションメカニズム

実行コンテキストスタック

実行コンテキストスタックが使用されます。実行コンテキストを管理します。実行コンテキストが作成された後、JavaScript エンジンは実行コンテキストをスタックにプッシュします。実行コンテキストの管理に使用されるこのスタックは、通常、実行コンテキスト スタックと呼ばれ、コール スタックとも呼ばれます。

let a = 'javascript';

function foo() {
    console.log('foo');
    bar();
}
function bar() {
    console.log('bar');
}
foo();

上記のコードがブラウザに読み込まれると、JavaScript エンジンはグローバル実行コンテキストを作成し、それを現在の実行スタック。

foo()

関数呼び出しが発生すると、JavaScript エンジンは foo 関数実行コンテキストを作成し、それを現在の実行スタックの先頭にプッシュします。
• bar()

  関数が foo() 関数内から呼び出される場合、JavaScript エンジンは bar 関数実行コンテキストを作成し、現在の実行スタックの先頭にプッシュされます。

• 関数バーが実行されると、その実行コンテキストが現在のスタックからポップされ、制御フローは次の実行コンテキスト、つまり foo の実行に到達します。 () 関数コンテキスト。

foo() が実行を完了すると、その実行コンテキストがスタックからポップされ、制御フローがグローバル実行コンテキストに到達します。すべてのコードの実行が完了すると、JavaScript エンジンはグローバル実行コンテキストを削除します。現在のスタックからの実行コンテキスト 実行コンテキスト。

基本データ型はスタックに保存され、参照データ型はヒープに保存されるのはなぜですか? JavaScript エンジンは、プログラム実行中にコンテキストの状態を維持するためにスタックを使用する必要がありますが、スタック領域が大きいと、すべてのデータがスタック領域に格納されるため、コンテキスト切り替えの効率、ひいてはプログラムの実行効率に影響を及ぼします。プログラム全体。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がJS の実行コンテキストを理解するためのステップバイステップの指導の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。