一、JavaScript的執行過程

假如我們有下面一段代碼，它在JavaScript中是如何被執行的呢？

1.1 第一步：初始化全局對象

• js引擎會在執行代碼之前，會在堆內存中創建一個全局對象：Global Object（GO）
• 該對象 所有的作用域（scope）都可以訪問；
• 里面會包含Date、Array、String、Number、setTimeout、setInterval等等；
• 其中還有一個window屬性指向自己；
  

1.2 執行上下文棧（調用棧）

js引擎內部有一個執行上下文棧（Execution Context Stack，簡稱ECS），它是用于執行代碼的調用棧。

那么現在它要執行誰呢？執行的是全局的代碼塊：

• 全局的代碼塊為了執行會構建一個 Global Execution Context（全局執行上下文）（GEC）；
• GEC（全局執行上下文）會 被放入到ECS（執行上下文棧）中 執行；

GEC被放入到ECS中里面包含兩部分內容：

• 第一部分：在代碼執行前，在parser轉成AST的過程中，會將全局定義的變量、函數等加入到GlobalObject中，但是并不會賦值； 這個過程也稱之為變量的作用域提升（hoisting）
• 第二部分：在代碼執行中，對變量賦值，或者執行其他的函數；

1.3 第二步：將全局執行上下文放入執行上下文棧中

1.4 第三步：全局執行上下文開始執行代碼

二、遇到函數如何執行？

在執行的過程中執行到一個函數時，就會根據函數體創建一個函數執行上下文（Functional Execution
Context，簡稱FEC），并且壓入到EC Stack中。

FEC中包含三部分內容：

• 第一部分：在解析函數成為AST樹結構時，會創建一個Activation Object（AO）：
  AO中包含形參、arguments、函數定義和指向函數對象、定義的變量；
• 第二部分：作用域鏈：由VO（在函數中就是AO對象）和父級VO組成，查找時會一層層查找；
• 第三部分：this綁定的值
  

下面看看如下代碼的執行過程：

2.1 第一步：初始化全局對象

2.2 第二步： 將全局執行上下文 放入 執行上下文棧中

2.3 第三步：全局執行上下文 開始執行代碼

3.4 第四步：遇到函數調用則 創建函數執行上下文FEC，并把FEC放入 執行上下文棧ECS中

3.5 第五步：函數執行上下文FEC開始執行代碼

最后瀏覽器控制臺輸出: foo

三、練習題：

注意：函數中的變量沒有使用var關鍵字來定義時，相當于會在GO對象中定義并保存這個變量，所以即使函數執行完成后，函數內的變量會被銷毀，但是函數外部仍然可以獲取到這個變量

總結

以上是生活随笔為你收集整理的JS高级——函数执行、作用域链内存结构图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。