執行上下文和呼叫堆疊

為頂層程式碼建立全域執行上下文，也就是不在任何 fn 內的程式碼。因此，首先執行 fn 以外的程式碼。
fn-decln/exprsn 的 fn 主體內的程式碼僅在呼叫時執行。

執行上下文(EC)

一段JS執行的環境。
儲存所有要執行的程式碼的必要訊息，例如局部變數、傳遞給 fn 的 args。
JS 程式碼始終在 EC 內運作。
無論 JS 專案有多大，都只有一個全域 EC。
預設上下文，為不在任何 fn 內的程式碼建立。
然後程式碼在全域EC內部執行
頂層程式碼執行完畢後，執行fns並等待C/bs
對於每個 fn 調用，都會建立一個新的 EC 來執行該 fn。方法也是如此，因為它們也是附加到物件的 fns。
所有這些 EC 共同構成了呼叫堆疊。
當所有 fns 執行完畢後，引擎等待 CB 到達並執行它們。前任。點選事件回調，由事件循環提供。

EC裡面有什麼

1. 變數環境由
組成
2. let、const、var 聲明
3. 功能

4. arguments 物件：將傳遞給 fn 的所有參數儲存在其 EC 中。
   每個 fn 都有自己的 EC 作為名稱。宣告的變數最終位於變數環境

5. 範圍鏈：
   Fns 可以使用作用域鏈存取 fns 以外的變數。
   包含位於目前 fn 之外的變數的引用並追蹤作用域鏈，它儲存在每個 EC 中。

6. 每個 EC 也取得 'this' 關鍵字。

以上三個都是在執行之前的「創建階段」產生的。這些是在頂層運行程式碼所必需的。

對於箭頭 fns EC：

我們不會有：arguments 物件、this 關鍵字。箭頭 fn 使用最接近的常規 fn，即上述兩個。

參數：類別數組對象，包含傳遞到常規 fn 的所有參數，而不是箭頭 fn。

呼叫棧記憶體堆=JS引擎

呼叫堆疊

EC 相互堆疊的地方，以追蹤我們在執行中的位置。最頂層的 EC 是我們正在運行的 EC。當執行結束時，它會從堆疊頂部移除，控制權會轉移到底層 EC。
如果存在巢狀的 fn 調用，由於 JS 只有一個執行線程，因此會暫停外層 fn 調用，以便在調用堆疊上返回內層 fn 的執行結果。現在上一個 EC 將成為活動 EC
然後最頂層的 EC 在返回時從呼叫堆疊中彈出。
呼叫堆疊中最低的是全域 EC，最上面的是依序發生的 fn 呼叫。
確保執行順序永遠不會遺失。
最終程式完成，全域EC也會從Call Stack中彈出。

JS 程式碼在 EC 內部運行，EC 放置在 Call Stack 上。

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

範圍界定

JS 引擎如何組織和存取我們的程式變數。
變數存在於哪裡
我們在哪裡可以存取某些變量，哪裡不能。

詞彙範圍：

JS 具有 Leical 作用域，這表示作用域是透過程式碼中 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 只是儲存在變數中的值。

變數的範圍

可以存取某個變數的程式碼區域。

作用域與變數的作用域有細微的差別。

## 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 都有一個 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中文網其他相關文章！