実行コンテキスト(1)-概要と構成

実行コンテキストはJavaScriptが実行する根本的な内容です.
実行コンテキストについては、次の3つのディレクトリをまとめます.
実行コンテキスト(1)-概要と構成👈
実行コンテキスト(2)-管理と作成👈
実行コンテキスト(3)-識別子+モジュールの検索👈

🧩 実行コンテキストとは?

Execution Context実行可能コードが必要な環境

では、実行可能なコードとは何でしょうか.

グローバルコード→関数で実行されるコードではなく、すべてのグローバルオブジェクトウィンドウで定義されたコード

関数コード→関数内のコード

evalコード→eval関数
したがって、実行コンテキストには3つのタイプがあります.
グローバル実行コンテキスト、機能実行コンテキスト、Evalの3つに分類できます.

🧩 実行コンテキストの設定

実行コンテキストを詳細に構成する前に、図全体を確認してください.

実行コードは、実行に必要なすべての情報をコンポーネント形式で表すことができる.

ExecutionContext = {             // 실행문맥
	LexicalEnvironment: {},        // 렉시컬 환경 컴포넌트
	VariableEnvironment: {},       // 변수 환경 컴포넌트
	ThisBinding: null,             // 디스 바인딩 컴포넌트
}

(実際のコードではなく表示用のコード)
上の構成部分を一つ一つ掘り起こす.
1πメキシコ環境(レイクシー環境コンポーネント)

は、関数またはブロックの有効範囲内の識別子および結果の位置

を記憶する.
JavaScriptエンジンは、コードの有効範囲内の識別子と値をkeyとvalueにバインドして記録します.
(EnvironmentRecord → Declarative Environment Record + Object Environment Record)
レクシー環境要素は以下の構成で構成されています.

LexicalEnvironment: {                      // 렉시컬 환경 컴포넌트
	EnvironmentRecord: {},                   // 환경 레코드
	OuterLexicalEnvironment Reference: {}    // 외부 렉시컬 환경 참조 
}

1▼▼-1▼▼▼EnvironmentRecord(環境記録)
環境レコードは、レコード+実行有効範囲内の識別子の領域である.
Lexical環境の識別子と値はここに記録されます.
1▼▼-2▼▼▼企業環境参考(外部ディレクトリ環境参照)
関数を囲むコードが属する集合環境コンポーネントの参照(アドレス値)を格納します.
JavaScriptエンジンでは、外部ディレクトリ環境参照を使用して親環境を段階的に検索できます.
有効範囲チェーンで重要な使用.
環境記録(EnvironmentRecord)のコンポーネント
環境記録はまた2つに分けられる.

EnvironmentRecord: {                            // 환경 레코드
	DeclarativeEnvironmentRecord: {},             // 선언적 환경 레코드
	ObjectEnvironmentRecord: {}                   // 객체 환경 레코드
}

1▼-1▼-1▼▼▼D e c l arativeEnvironmentRecord(宣言的環境記録)
実際の関数と変数、Catch文の識別子、および実行結果を格納する領域.
識別子と実行結果をキー値ペアとして保存

// 선언적 환경 레코드 예시
DeclarativeEnvironmentRecord: {
	a : 1,
	b : 2
}

1▼-1▼-2▼ObjectEnvironmentRecord(対象環境記録)
実行コンテキスト以外のオブジェクトの一部に保存オブジェクトをマッピングします.
bindObjectプロパティにバインドして、オブジェクトの値を実際にキー値として保存するのではなく、オブジェクト全体のアドレスを格納します.

// 객체 환경 레코드 예시
ObjectEnvironmentRecord: {
	bindObject: someObject 
}

2朕変数環境(変数環境要素)
変数環境要素はLexicalEnvironmentと少し異なります.
以下の相違点を除き、ほぼ同一の構成を有するものと考えられる.

LexicalEnvironmentはVariableEnvironmentを参照.

VariableEnvironmentは機能レベルScopeに変数を割り当て、LexicalEnvironmentはBlockレベルScopeに変数を割り当てます.

function test(){
	var testA = 1
	const testB = 2
	if(true){
		var testC = 3
		let testD = 4
	}
}
test()

上記のテスト関数を実行するときに生成される実行時コンテキストを決定した場合は、
図のような構造が確認できます.

このように,ブロックレベルLexicalEnvironment,関数レベルVariableEnvironmentを覚えればよい.
関数のifブロックのtestDの場合は、関数の(if文の外)外部環境をコレクション環境に参照します.
testBの場合は、外部可変環境を参照してください.
var変数として宣言されたtesta、testBについては、関数レベルの影響のみを受けるため、関数外(global)のouterを参照します.
3️⃣ ThisBinding
ThisBindingコンポーネントは、関数を呼び出すオブジェクトの参照の格納場所であり、その値が実行コンテキストのthisとなる.

🧩 実行コンテキスト全体の理解

通常動作コンテキストの構造

グローバル実行コンテキストの構成

References

現代JavaScript入門
JS実行コンテキストとCall Stack-うん?ああ...はあ…|Dev X