iT邦幫忙

2021 iThome 鐵人賽

DAY 4
1
自我挑戰組

JavaScript 核心觀念系列 第 4

【Day04】執行環境與執行堆疊

  • 分享至 

  • xImage
  •  

執行環境(Execution context)

函式執行環境

昨天有提到函式的作用域是限制在 function 內,

所以當我們宣告一個變數在 function 內時,

那該變數的作用域會限制在 function 中,

當我們執行函式時,會產生一個執行環境,

如果沒有執行函式時,就不會產生執行環境,

當我們不斷調用函式,就會不斷產生新的執行環境,

而這個執行環境會限制該函式的作用域,以及有自己的 this

全域執行環境

全域也有自己的全域執行環境,

當網頁或後端的 Node.js 只要一開啟,

就會建立好全域執行環境,

在建立全域執行環境時會自動生成 windowglobal

如果使用瀏覽器的話會產生 window,Node.js 則會產生 global

而全域執行環境也會產生 this

執行環境重點整理:

  • 函式執行環境

    • 限制作用域
    • 有自己的 this
  • 全域執行環境

    • 產生 windowglobal
    • this,此時 this 會等於 windowglobal

執行堆疊(Execution stack)

在 JavaScript 中,執行環境一層一層向上堆疊而成,

而最底層一定是全域執行環境,

而這些堆疊的執行環境,稱為執行堆疊

這樣講也許聽不懂,直接看範例比較清楚

範例:

function sayHi() {
    return 'Hi weiwei'
}

function doSomething() {
    console.log(sayHi());
}

doSomething();

執行堆疊的部分可以使用 Chrome 瀏覽器的開發人員工具來查看

執行上述步驟後,程式碼會先停留在 doSomething() 的位置,

doSomething() 還沒被執行,

而在執行推疊的部分看到函式執行之前就已經存在全域執行環境 (anonymous)

進下一步之後,

在全域執行環境中呼叫 doSomething() 的函式時,

可以看到 doSomething 執行環境疊在全域執行環境上面,

而現在的執行環境是 doSomething

再下一步之後,

doSomething() 函式中呼叫 sayHi() 這個函式,

sayHi 的執行環境疊在 doSomething 的上面,

而當前的執行環境為 sayHi

sayHi 執行完畢後,會直接離開 sayHi 執行環境,

doSomething 執行完後,也會離開 doSomething 的執行環境,

最後就會回到全域執行環境 (anonymous)

上述步驟以圖形表示的話

以上就是今天的內容,明天說明範圍鍊的部分。


上一篇
【Day03】語法作用域(Lexical scope)
下一篇
【Day05】範圍鍊(Scope Chain)
系列文
JavaScript 核心觀念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言