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

トップレベルのコード、つまり fn 内にないコードのグローバル実行コンテキストの作成。したがって、fn の外側のコードが最初に実行されます。
fn-decln/exprsn の fn 本体内のコードは、呼び出されたときにのみ実行されます。

実行コンテキスト(EC)

JS の一部が実行される環境。
ローカル変数や fn に渡される引数など、実行されるコードに必要な情報をすべて保存します。
JS コードは常に EC 内で実行されます。
JS プロジェクトのサイズに関係なく、まさに 1 つのグローバル EC。
デフォルトのコンテキスト。fn 内にないコード用に作成されます。
次に、コードはグローバル EC
内で実行されます。 トップレベルのコードが実行された後、fns の実行と C/bs の待機
fn 呼び出しごとに、その fn を実行するための新しい EC が作成されます。メソッドもオブジェクトにアタッチされた fns であるため、同様のことがメソッドにも当てはまります。
これらすべての EC が一緒になってコールスタックを構成します。
すべての fns が実行されると、エンジンは CB が到着して実行されるのを待ちます。元。イベント ループによって提供されるクリック イベント コールバック。

ECの中には何があるのか

1. で構成される変数環境
2. let、const、var 宣言
3. 機能

4. arguments オブジェクト: fn に渡されるすべての args を EC に格納します。
   各 fn は、呼び出されたときに独自の EC を取得します。そして、宣言された変数は変数環境

に置かれます。

5. スコープチェーン:
   Fns は、スコープ チェーンを使用して fns の外部の変数にアクセスできます。
   現在の fn の外側にある変数への参照が含まれており、スコープ チェーンを追跡するために各 EC に保存されます。

6. 各 EC は「this」キーワードも取得します。

上記の 3 つはすべて、実行直前の「作成フェーズ」中に生成されます。これらはトップレベルでコードを実行するために必要なものです。

arrow fns ECの場合:

引数オブジェクト、このキーワードはありません。 Arrow fn は、上記の 2 つである最も近い通常の fn から使用します。

arguments: オブジェクトのような配列。arrow fn ではなく通常の fn に渡されるすべての引数を含みます。

呼び出しスタック メモリ ヒープ = JS エンジン

コールスタック

実行中のどこにいるかを追跡するために、EC が互いに積み重ねられる場所。一番上のECが私たちが運営しているECです。実行が終了すると、スタックの最上位から削除され、制御が基盤となる EC に転送されます。
ネストされた fn 呼び出しがある場合、JS には実行スレッドが 1 つしかないため、外側の fn 呼び出しは一時停止され、内側の fn の実行結果をコール スタックに返します。これで、前の EC がアクティブな EC になります
次に、返されたときに最上位の EC が呼び出しスタックから取り出されます。
呼び出しスタックの最下位はグローバル EC になり、最上位は順番に発生する fn 呼び出しになります。
実行順序が決して失われないようにします。
最終的にはプログラムが終了し、グローバル EC もコールスタックから取り出されます。

JS コードは EC 内で実行され、呼び出しスタックに配置されます。

Hence, we can say that each EC has:
1. Variable environment
2. Scope chain
3. 'this' keyword

スコーピング

プログラム変数がどのように編成され、JS Engine によってアクセスされるのか。
変数はどこに存在します
特定の変数にアクセスできる場所とアクセスできない場所。

語彙のスコープ:

JS にはライカル スコープがあり、コード内の fns とブロックの配置によってスコープが制御されることを意味します。
元。ネストされた fn は、その親 fn の変数にアクセスできます。

範囲：

特定の変数が宣言されている空間または環境(fnsの場合は変数環境)。 fns EC に保存される変数 env です。
fns の場合、Var env とscope はどちらも同じです。

Three scopes in JS are:
1. Global scope
2. Fn scope
3. Block scope [ES6]

スコープは変数が宣言される場所です。したがって、fns は変数に格納された単なる値であるため、Fns も true になります。

変数のスコープ

特定の変数にアクセスできるコードの領域。

スコープは変数のスコープとは異なりますが、微妙な違いがあります。

## Global Scope:
For top level code
For variables declared outside of any fn or block which are accessible from everywhere
Variables in this scope are at the top of scope chain. Hence, can be used by every nested scope.

## Fn Scope:
Each fn has creates its own scope
Variables are accessible ONLY inside fn, NOT outside. Else Reference Error
Also called local scope
Fn decln, exprsn, arrow all three create their own scopes.
Only way to create scope using ES5 which had only fn & global scope.

## Block Scope:
Introduced in ES6, not only fn but {} also create a scope known as block scope which work only for ES6 variables i.e let-const types. DOesn't work for variables declared with 'var' as its fn scoped.
Variables accessible only inside block i.e {} 
This only applies to variables declared with let-const only.
Fns are also block scoped in ES6 (only in strict mode, should be used)
variables declared using 'var' will be accessible outside the block
Scoped to the current fn or the global scope.
var variables only care about fn, they ignore blocks. They end up in nearest fn scope.

すべてのネストされたスコープは、その外側のスコープとグローバル スコープから変数にアクセスできます。 fn 引数にも同じことが当てはまります。

fn は、スコープ内で変数が見つからない場合、スコープ チェーンを検索して外側のスコープ内の変数を見つけます。このプロセスは、スコープ チェーンでの変数検索と呼ばれます。これは逆には機能しません。つまり、fn または外側のスコープの外側からネストされた fn 変数またはスコープにアクセスすることはできません。
兄弟スコープは互いの変数にアクセスできません
最も内側のスコープのみがその外側のスコープにアクセスでき、その逆にはアクセスできません。

各 fn に対して 1 つの EC が、fn が呼び出される正確な順序で、EC 内の変数とともに呼び出しスタックに配置されます。 Global EC はコールスタックの一番下にあります

Scope chain:
Its all about the order in which fns are written in the code.
Has nothing to do with order in which fns were called.
Scope chain gets the variable environment from the EC.
Order of fn calls is not relevant to the scope chain at all.

const a = 'Alice';
first();

function first(){
  const b = "Hello";
  second();

  function second(){
    const c = "Hi";
    third();
  }
}

function third(){
  const d = "Hey";
  console.log(d + c + b + a); // Reference Error
}

## Call Stack order:
third() EC - top
second() EC
first() EC
global EC - bottom


Scope Chain:
second() --nested inside--> first() --nested inside--> global scope.
third() is independently defined inside gloabal scope.

Reference Error occurred because both 'c' as well as 'b' cannot be accessed using the scope chain.

Summary:
E-C, Var Env, Cl-Sk, Scope, Scope-chain are all different but related concepts.
Scoping asks the questions where do variables live, where can we access the variables and where not.
Lexical Scoping in JS: Rules of where we can access variables are based exactly where in the code fns and blocks are written.
Every scope has access to all the variables from all its outer scopes. This is scope chain which is a one-way street. An outer scope can never access variables of inner scope.
Scope chain of a certain scope is equal to adding together all the Var Envs of all the parent scopes.
Scope chain has nothing to do with the order in which fns are called. It does not affect the scope chain at all.
When a variable is not found in current scope, engine looks up the scope chain until it finds the variable its looking for. This is called variable look-up.

以上が実行コンテキストと呼び出しスタックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。