.56 CorJ.S-2実行コンテキスト

出版する

カーネルJavaScript-鄭在南

1.実行コンテキストYes

実行コンテキスト(execution context)は、実行するコードに入力する環境情報を含むオブジェクトです.

同じ環境にあるコードを実行する場合は、必要な環境情報を収集してコンテキストを整理し、callスタックに積み上げ、最上位のコンテキストに関連するコードを実行してコード全体の環境と順序を保証します.
同じ環境は、グローバル空間、eval()関数、関数など、実行コンテキストを整理する方法です.보통 함수를 실행할 때 실행 컨텍스트를 구성한다고 생각하면 된다.

コンテキストと呼び出しスタックの実行

// ------------------------------- (1)
let a = 1;
function outer() {
	function inner() {
    	console.log(a);
        let a = 3;
    }
    inner(); // ------------------ (2)
    console.log(a);
}
outer(); // ---------------------- (3)
console.log(a);

グローバルコンテキスト(jsファイルを開いた瞬間アクティブ化)はcallスタックに含まれます.

に進むと、(3)outer関数が呼び出され、JavaScriptエンジンはouterに関する環境情報を収集し、outer実行コンテキストを生成してcallスタックに格納します.

グローバルコンテキスト関連コードの実行を一時停止し、外部実行コンテキスト関連コード(関数内部コード)を順次実行します.

(2)では、埋め込み関数の実行コンテキストがcallスタックの一番上にある場合、outer関数の実行を停止し、埋め込み関数の内部コードを実行する.

の内部でa変数に3を割り当てると、内部関数の実行が終了し、実行コンテキストが呼び出しスタックから削除されます.

は、下部の割り込みouter関数(2)を実行し、次から実行します.

ビットに示すように、残りのグローバルコンテキストが実行されると、callスタックから削除され、空のcallスタックのみが残ります.

2.コンテキストコンポーネントの実行

1. VariableEnvironment

2. LexicalEnvironment

3. ThisBinding

2-1. VariableEnvironment

現在のコンテキスト内の識別子に関する情報+外部環境情報.宣言時のLexicalEnvironmentスナップショットは、変更を反映しません.
environmentRecord + outer-EnvironmentReference
実行コンテキストを作成するときは、まずVariableEnvironmentに情報を入れ、元の場所にコピーしてLexicalEnvironmentを作成し、主にLexicalEnvironmentを使用します.

environmentRecord

現在のコンテキストに関連するコード식별자 정보들が格納される.コンテキスト全体で最初から最後までブラウズし、順番に収集します.
たとえば、関数自体、let、constとして宣言された変数の識別子などを収集します.これは実行前の状態です.つまり、JavaScriptエンジンは、その環境内のコードのすべての変数名を知っています.これは、識別者を最上位に引き上げ、実際のコードを実行する호이스팅の概念と同じである.

function a (x) {
  console.log(x);
  let x;
  console.log(x);
  let x = 2;
  console.log(x);  
}
a(1)

パラメータは、関数内の他のコードの前に宣言および割り当てられたものと見なすことができます.

function a () {
  let x =1; // 수집 대상 1 (매개변수 선언)
  console.log(x); // (1)
  let x; // 수집 대상 2 (변수 선언)
  console.log(x); // (2)
  let x = 2; // 수집 대상 3 (변수 선언)
  console.log(x);  // (3)
}
a()

シース処理を簡単にリストします.

function a () {
  let x; //수집 대상 1의 변수 선언 부분
  let x; //수집 대상 2의 변수 선언 부분
  let x; //수집 대상 3의 변수 선언 부분
  
  x =1; //수집 대상 1의 할당 부분
  console.log(x); // (1)
  console.log(x); // (2)
  let x = 2; //수집 대상 3의 할당 부분
  console.log(x);  // (3)
}
a(1)

// (1), (2) 모두 1이 출력, (3) 에서는 2 가 출력

2-2. LexicalEnvironment

最初はVariableEnvironmentと同じでしたが、変更はリアルタイムで反映されていました.

2-2-1. 関数宣言と関数式

関数宣言(関数宣言)

関数定義子のみで、個別の割り当てコマンド/必要な関数名

はありません.

function a () { } // a 가 함수명 이자 변수명
a()

関数式

関数は別の変数/記名関数式に割り当てられます.

匿名関数式

let b = function () { } // 익명 함수 표현식, b 가 함수명 이자 변수명
b()
let c = function d () { } // 기명 함수 표현식, 변수명은 c, 함수명은 d
c() // 실행 됨
d() // 실행 안됨 error

関数宣言文と式のエスケープの違い

console.log(sum(1, 2));
console.log(multiply(3, 4));

function sum (a, b) { // 함수 선언문 sum
  return a + b;
}

let multiply = function (a, b) { // 함수 표현식 multiply
  return a * b;
}

関数宣言文と関数式、シース完了

function sum (a, b) { // 함수 선언문은 전체를 호이스팅
  return a + b;
}

let multiply; // 변수는 선언부만 끌어올린다

console.log(sum(1, 2));
console.log(multiply(3, 4));

multiply = function (a, b) { // 변수의 할당부는 원래 자리에 남겨둔다.
  return a * b;
}

以上のように,함수 표현식は変数の付与部分が元の位置に残る関数式の特徴であり,コードを記述する際に安全な方法となる.
これに対して、함수 선언문は同じ名前の関数にプラス記号を付けて上書きされるため、先に宣言した関数は使用できないため、危険にさらされる可能性があります.

2-2-2. スキャン

スコープ識別子の有効範囲.JavaScriptは、グローバルスペースを除いて오직 함수에 의해서만 스코프가 생성です.

outer-EnvironmentReference

現在呼び出されている関数は、선언될 당시のLexicalEnvironmentを参照します.
宣言された時点は、과거에呼び出しスタック内の実行コンテキストがアクティブな場合にのみ、関数を宣言する動作自体もコードであり、すべてのコードは実行コンテキストがアクティブな場合に実行されるためです.

2-3. ThisBinding

thisは、実行コンテキストがアクティブになったときに指定されたthisを格納します.

ThisBindingは、この識別子が注目すべきターゲットオブジェクトです.