実行コンテキストはJavaScriptの操作原理を含む核心概念である.

1.ソースコードの評価と実行

JavaScriptエンジンは、ソースコードの処理を「評価」と「実行」の2つのプロセスに分けます.
¥評価:
評価の過程で、実行コンテキストが作成され、実行コンテキストによって管理されるscopeに、変数、関数などの宣言のみを実行することによって生成された変数または関数識別子が登録されます.
今すぐ実行:
評価プロセスが終了すると、宣言以外のソースコードが順次実行されます.
このとき、ソースコード実行に必要な情報(変数または関数の参照)が、コンテキスト管理を実行するscopeで検索され、取得されます.
次に、変数値の変更などのソースコードの実行結果が、コンテキスト管理を実行するscopeに再登録されます.
例1.

var x; // 소스코드의 평가 과정에서 변수선언문 var x;를 실행.
// 변수 식별자 x는 실행 컨텍스트가 관리하는 스코프에 등록되고 undefined로 초기화 된다.

x = 1; // 소스코드의 실행 과정에서 x=1; 이 실행되는데
// 변수에 값을 할당하기 전 x 변수가 선언된 변수인지 확인한다.
// 실행 컨텍스트가 관리하는 스코프에 x 변수가 등록되어 있는지 확인 후
// (만약 x 변수가 스코프 내에 있다면 x 변수는 소스코드의 평가 과정에서 선언문이 실행되어 등록된 변수이다.)
// x 변수가 선언된 변수임이 확인되면 값을 할당하고 할당 결과를 실행 컨텍스트에 등록하여 관리한다.

2.コンテキストを実行する役割

例2.

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function outer(a) {
    // 지역 변수 선언
    const x = 10;
    const y = 20;

    // 메서드 호출
    console.log(a + x + y); // 130
}

// 함수 호출
outer(100);

// 메서드 호출
console.log(x + y); // 3

例2.実行プロセスを見てみましょう.
1朕グローバルコード評価:
宣言のみを先に実行します.(グローバルコードの変数宣言文と関数宣言文のみが先に実行されます.)生成されたグローバル変数とグローバル関数は、コンテキスト管理を実行するグローバル範囲に登録されます.
この時点で、varキーワードで宣言されるグローバル変数と、関数宣言文で定義されるグローバル関数は、グローバルオブジェクトのPropertyとメソッドになります.
2朕はグローバルコードを実行する:
ソースコードは順番に実行されます.
グローバル変数に値を割り当て、関数を呼び出します.(関数が呼び出されると、グローバルコードの実行を一時停止し、関数の内部に入ります.)
3朕関数コード評価:
関数が呼び出されると、関数評価プロセスが実行されます.
まず、パラメータとゾーン変数宣言を実行し、生成されたパラメータとゾーン変数がコンテキスト管理を実行するゾーンスキャンに登録されます.
また、関数内部では、領域変数のように使用できるargumentsオブジェクトが作成され、領域スキャンに登録され、バインドが決定されます.
4▼▼▼▼関数コード:
関数評価プロセスが終了したら、順に関数コードを実行します.
パラメータと領域変数に値を指定し、consoleにします.logメソッドを呼び出します.
console.logメソッドを呼び出すために、scopeチェーンを介して識別子consoleを検索します.コンソール識別子は、グローバル・オブジェクトのプロパティであり、グローバル・スキャンで検索できます.
(Scopeチェーン:コンソール識別子のナビゲーションを完了するには、地域Scopeの「勘定科目」「勘定科目」「グローバルScope」「検索」を参照してください.)
コンソールオブジェクトのプロトコルタイプチェーンを使用してlog propertyを検索します.次に,因数伝達としてのa+x+yを評価した.(各識別子はスキャンチェーンで検索されます)
関数コードの実行プロセスが終了し、グローバルコードの実行を続行します.
5”整理:
上記の例2.に示すように、コード実行にはスキャン、識別子、コード実行順序などの管理が必要です.
管理するのは実行コンテキストです!
実行コンテキストは、ソースコードを実行するために必要な環境を提供し、コードの実行結果を管理します.
実行コンテキストのディレクトリ環境として管理されるのは、MFP識別子とscopeです.
実行順は、実行コンテキストスタックによって管理されます.

3.コンテキストスタックの実行

例3.

const x = 1;

function outer() {
    const y = 2;

    function inner() {
        const z = 3;
        console.log(x + y + z);
    }

    inner();
}

outer(); // 6

例3.グローバルコードと関数コードで構成されています.
JavaScriptエンジン
まず、グローバルコードを評価し、グローバル実行コンテキストを作成します.
関数を呼び出すと、計算関数コードの実行コンテキストが生成されます.
生成された実行コンテキストはスタックデータ構造によって管理される.

実行コンテキストには、上図に示す「後入先出」(Last In First Out,LIFO)構造があります.
例3.活動場所を表す
図中のブルーボックス1はグローバル実行コンテキストであり、ブルーボックス2はouter関数実行コンテキストであり、ブルーボックス3は内部関数コンテキストである.
コードの実行は、最上位ボックスの実行コンテキストによって制御されます.最上位のスタックが削除されると、コード実行は最上位のスタックによって制御されます.
すなわち,コンテキストスタック管理コードの実行順序を実行する.

4.リモート環境

Lexical環境は、識別子と識別子のバインディング値および位相スキャンへの参照を記録する資料構造である.
Lexical環境では、キーと値を持つオブジェクトボディのスキャン(グローバル、関数、ブロックスキャン)を生成することで、識別子をキーとして登録し、識別子にバインドされた値を管理します.
つまり、Lexical環境は、識別されたリポジトリの登録と管理を担当するLexical Scopeエンティティです.
Lexical環境は2つのコンポーネントで構成されています.
1朕環境記録:
タグに含まれる識別子を登録し、その識別子にバインドされた値を管理するリポジトリ.
2朕外部LexicalEnvironmentReference:
大尉を指す.
注:モダンJavaScript Deep Dive(第23章p.359~p.387)李雄模知音
画像:https://media.vlpt.us/images/tiiranocode/post/0c3b8a68-f29c-4836-91ff-2f0ef25dc704/stack.png(スタックデータ構造)