JavaScriptコードの実行手順

8963 ワード

Execution Contexts and Call Stack

JavaScriptのコードがどのように動作しているかについて説明しましょう
javascriptのコードがエンジンのCallStackで実行されていることを知っています.
ここからもう少し深く入ります.

JavaScriptのコードはマシン言語にコンパイルされます.

グローバル実行コンテキストは、最上位コードの生成です.

最上位コード:関数外のコード

Execution context:JavaScriptを実行するために集約された環境.コードは、実行に必要なすべての情報を保存します.
ピザで例をあげましょうピザを注文すると、ピザボックスにピザと使い捨てナイフフォークなどが同時に配送されます.
ここで、ピザはJavaScriptコードであり、ピザボックスはピザ(JavaScriptコード)を食べるために必要なすべての箱、すなわちexecution contextを含む.
箱の中にはピザを食べるのに必要なもの、ナイフとフォーク、領収書などもあります.
JavaScriptプロジェクトがどんなに大きくても、プロジェクトにはグローバル実行コンテキストが1つしかありません.

top-level-コードは、グローバル実行コンテキストで実行されます.

関数が実行され、callback関数が待機します.

ここで、各関数は新しいExecution contextを生成します.

📍 ここで生成したExecution contextはCall Stackを生成します.

Execution Context in detail

Execution Contextにはどのような内容が含まれていますか?

Variable Environment

let、const、var宣言

関数

arguments object

Scope chain

this keyword

上の要素は、作成フェーズ、すなわち実行前に作成されます.

Creation phase

const name = 'BoHyeon';

const first = function(){
    let a =1;
    const b = second(7,9);
    a = a + b;
    return a;
}

const second = function(x,y){
    var c = 2;
    return c;
}
const x = first();

ここで、グローバル実行コンテキスト

name = 'BoHyeon'
first = <function>
second = <function>
x = <unknown> // first()가 실행되지 않았기 때문에 알 수 없다.

以上のように、execution contextの値は、技術的には実行時に表示されます.
しかし、ここでは説明のために、私は勝手に書きます.
first()の実行コンテキスト

a = 1
b = <unknown> //실행되지 않았기 떄문에 알 수 없다.

second()の実行コンテキスト

c = 2
arguments = [7, 9] // second가 호출 됬을때 넘어온 arguments들의 값들을 배열로 가지고 있다.

ここはコード量が小さくて簡単です.
しかし、100個の関数が100個のexecution contextを生成する場合、エンジンはどのように呼び出し関数の順序を追跡しますか?
そして、現在実行されている関数をどのように知るのでしょうか.
ここにCall Stackが登場しました

Call Stack

Execution contextの作業場所は、現在の実行手順を追跡できます.
一番上のExecution contextは現在実行されている関数です.
実行が完了すると、Call stackからExecution contextが削除され、その下のExecution contextが実行されます.
上記のコードを例に挙げます.
コードがコンパイルされ、実行が開始されました.

const name = 'BoHyeon';

const first = function(){
    let a =1;
    const b = second(7,9);
    a = a + b;
    return a;
}

const second = function(x,y){
    var c = 2;
    return c;
}
const x = first();

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

グローバル実行コンテキストはCall Stackに移動します.

const x = first();

first()関数を呼び出します.

first()の実行コンテキストが生成されます.

first()の実行コンテキストは、グローバル実行コンテキストの上にあるCall Stackに移動します.

const b = second(7,9);

second(7,9)を呼び出します.
ここで重要なのはfirst()の実行一時停止です.(JavaScriptは実行スレッドが1つしかないので)

second()の実行コンテキストを生成します.

second()の実行コンテキストは、first()の実行コンテキストの上にあるCall Stackに移動します.

second()の実行が完了すると、second()の実行コンテキストがcall stackでポップアップされ、停止したfirst()が続きます.

次に、first()の実行が完了すると、first()の実行コンテキストもCall Stackからポップアップされます.

Call Stackは、ブラウザなどのプログラムを終了するまでグローバル実行コンテキストにとどまる.

プログラムが終了すると、下部にあるグローバル実行コンテキストもポップアップされます.

Reference

この問題について(JavaScriptコードの実行手順), 我々は、より多くの情報をここで見つけました https://velog.io/@rlaqhguse/자바스크립트-코드의-실행과정

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

CodeKata 5

を使用してビルドcrudアプリのガイドと