javascript的執行環境

javascript語言特性很特別
因此筆者認為在學會基礎語法後
應該要知道javascript engine的運作方式
不然可能會出現很多不知道原因的邏輯錯誤

一開始要來說javascript是怎麼創造執行環境的
要先搞懂以下三個意義
1. 語法解析器: 逐行將程式碼轉換成電腦懂的語言,並進行語法檢查
2. 詞彙環境(LEXICAL ENVIRONMENT):定義變數的上下文,在程式碼中的實際物理位置
3. 執行環境:真正執行程式的地方

javascript創造執行環境可以分成2個步驟

  1. 提升(Hoisting)
    將全域物件及this設置於記憶體中,並經由語法解析器創造變數及函數的外部環境
  2. 執行
    依照詞彙環境,開始逐行執行所撰寫的程式碼

執行的階段就不用多做解釋了,就是執行
要討論的是,抬升的部分
先來一段範例

b()
console.log(a)

var a = 'Hello World!';

function b() {
    console.log('Called b!')
}

執行結果為:
Called b!
undefined
這是為什麼呢?
在宣告變數a、函數b之前,居然可以log出來
而且函數b是可以執行的

這就是javascirpt engine的特性:提升
在程式執行前,設定變數及函數至記憶體中
為什麼javascript知道有變數呢?
靠得就是語法解析器
也就是這段程式碼在執行前會被改寫成

var a

function b() {
    console.log('Called b!')
}

b()

console.log(a)

a = 'Hello World!';

注意喔,不是真的移動了程式碼
只是在執行前的時候,javascript會在engine這樣做
變數會先在記憶體中分配空間,並給予undefined的值
函數則是會直接設定好
因此函數b才會可以使用
而a的真正賦值則是在執行時期
在詞彙環境遇到=的時候,才會將’Hello World’字串給予a

提升就是這麼一回事
雖然有抬升這個功能
但請不要依賴
原因是有可能變數本身真的就被定義為undefined
這樣使用上會容易搞錯
最好的辦法還是在使用前
宣告好變數及函數

這些東西是在Udemy的課程中學到的
課程名稱:JavaScript 全攻略:克服 JS 的奇怪部分
推薦給大家

佶曰:當有這樣的一種程式語言出現:它能讓工程師用簡單的英語寫程式,你將會發現,工程師都開始不會說英語。

發佈留言