［実行コンテキスト(Execution Context)］

実行コンテキスト

JavaScriptコードを実行する環境または計算範囲を表す抽象領域.
実行コンテキストはよく書かれているだけで,開発者が作成したコード実行環境を構成するコンテナである.
簡単に言えば、これは私たちが卵を焼くために、ガスコンロやフライパンが必要なように、コードを実行するために宣言した設定変数と関数を実行し、実行する概念です.
JavaScriptランタイムエンジンがheapとstack領域で構成されていることは以前から知られていました.では、スタック上で実行されるコードがどのような構成でマウントされているかを見てみましょう.

コンテキスト分類の実行

開発では,ある概念が存在するとよく分類される.だから疲れた...実行コンテキストは、2つのクラスに分けることもできます.

1.グローバル実行コンテキスト

実行時にエンジンがコードを実行すると、グローバル実行コンテキスト領域が生成されます.作成中にグローバルオブジェクトWindow Objectが作成されます.

2.関数実行コンテキスト

JavaScriptコードとして宣言された関数を呼び出すたびに、関数のみを呼び出す実行コンテキストが生成されます.
ランタイムエンジンは、コードを実行するときに最初にグローバル実行コンテキスト領域を作成し、関数を呼び出すたびに関数専用の機能実行コンテキストを作成します.

コンテキスト構造の実行

コールスタック実行プロセス

Call Stackで実行コンテキストをスタックし、コードを実行します.
餅串で例えると簡単です.軽食店のおばさんが餅串を作るときは、下から上へ順番に差し込みます.そして、私たちが無名の時、私たちは上から食べ始めます.この構造と同様に,LIFO(Last in,First out)構造を示した.

実行手順をコードと画像で説明します.次のコードはヨロコムを実行します.

// ES6
const first = () => {
    console.log('first')
    second();
}

const second = () => {
    console.log('second');
}

first();
// first
// second

このようなコードがあると仮定します.first関数では、secondを呼び出す構造が現れる.内部では、最初にグローバル実行コンテキストを作成し、各関数に実行コンテキストを作成します.CallStackに積み上げた時はPUSH、クリアした時はPOPです.

手順1:コード実行前にグローバル実行コンテキストとPUSHを作成する

ステップ2:first関数呼び出し
(first関数の機能実行コンテキストとPUSHを作成)

ステップ3:first関数内部呼び出しconsole.log('first')(console.log関数の機能実行コンテキストとPUSHを作成)

ステップ4:console.log(‘first’)終了
(console.log関数機能実行コンテキストPOP)

呼び出し手順5:second関数
(second関数の機能実行コンテキストとPUSHを作成)

ステップ6:second関数でconsole.log('second')を呼び出す
(console.log関数の機能実行コンテキストとPUSHを作成)

ステップ7:console.log(‘second’)終了
(console.log関数機能実行コンテキストPOP)

ステップ8:second関数終了
(second関数機能実行コンテキストPOP)

ステップ9:first関数終了
(first関数機能実行コンテキストPOP)

ステップ10:実行終了後グローバル実行コンテキストPOP

簡単に言えば、各関数呼び出しは実行コンテキストを生成する.次に、Drilldown構造を使用してコンテキストを作成および削除します.例えば、firstには、console.log関数およびsecond関数呼び出しコードがある.console.log 関数はログのみを撮るやつなので、最後のデップです.console.log関数コンテキストを実行すると、second関数実行コンテキストが生成され、内部でもconsole.log('second')が呼び出されるため、console.logの実行コンテキストが生成され、コードが実行されます.

関数の実行が終了するまで、機能実行コンテキストは変わらないと考えられます.

コンテキスト作成プロセスの実行

実行コンテキストの作成は、ステップの作成と実行によって組織されます.
作成フェーズ

-作成フェーズ

実行フェーズ-

未満または実行
すべての実行コンテキストを作成するには、create>executeの手順に従います.生成フェーズと生成フェーズを区別するために、生成フェーズをcreateと名付けます.この段階を経ると、このオブジェクトが生成され、エスケープされます.また,実行コンテキストがグローバルであるか関数であるかでは,グローバルオブジェクト,パラメータなどの生成因子の違いがある.

1.グローバル実行コンテキスト

グローバル実行コンテキストでは、次のcreateステップが実行されます.

グローバルオブジェクトを生成します.

このオブジェクトをバインドする

.

変数と関数のメモリを準備します.

変数の割り当ては定義されておらず、関数宣言は実際にメモリに割り当てられます.

次のexecuteステップでは、undefinedが割り当てられた変数を検索し、実際の値を割り当てます.そうだ.ハウスティンは立ち上がった.

以下に説明するcreate、executeステップはコードで表される.実際にはそのような内部構造を持っているわけではないが,理解のためにjson objectとして表現されている.

var name = 'carrots';
var age = 29;

function getUserInfo() {
    return {
        name: name, 
        age: age
    }
}

// 생성 단계 결과
Global Execution context : {
    Window : Global Object,
    this : Window,
    name : undefined,
    age : undefined,
    getUserInfo : function object
}

// 실행 단계 결과
Global Execution context : {
    Window : Global Object,
    this : Window,
    name : 'carrots',
    age : 29,
    getUserInfo : function object
}

2.関数実行コンテキスト

関数実行コンテキストもcreate、executeステップで作成されます.

パラメータオブジェクトを生成します.

このオブジェクトをバインドする

.

変数と関数のメモリを準備します.

変数の割り当ては定義されていません(var変数のみ)、関数宣言は実際にメモリに割り当てられます.

グローバル実行コンテキストとは異なり、グローバルオブジェクトではなくパラメータオブジェクトが作成されます.その他の事項はほぼ同じです.関数内部で使用される変数についても,エスケープが現れる点は同じである.Argumentsは、この関数を呼び出すときに使用されるパラメータの集合です.

以下に説明するcreate、executeステップはコードで表される.実際にはそのような内部構造を持っているわけではないが,理解のためにjson objectとして表現されている.

var name = 'carrots';
var age = 29;

function getUserInfo(param) {
    var sex = '상남자';
    return {
        name: name, 
        age: age
    }
}

getUserInfo(1); // 실행 컨텍스트 생성

// 생성 단계 결과
Function Execution context : {
    argument : { 0 : 1, length : 1 }
    this : Window
    param : 1,
    sex : undefined
}

// 실행 단계 결과
Global Execution context : {
    argument : { 0 : 1, length : 1 }
    this : Window
    param : 1,
    sex : '상남자'
}

整理する

JavaScriptの実行単位コンテキストのタイプと内部構造について理解しました.もち串を想像してみましょう
今晩は餅串を食べます.🥕
関連項目:https://medium.com/sjk5766/call-stack%EA%B3%BC-execution-context-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-3c877072db79