iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

轉職道上的萌芽人生 − 自學程式開發ing系列 第 6

邁步向前的 Day6- JavaScript - const/let 取代 var

  • 分享至 

  • xImage
  •  

提醒:由於看到這系列鐵人訂閱人數漸漸變多,標記一下這些內容是在「非常萌新時期」所寫,更多技術內容請參考我的 Github,歡迎跟我一起討論 ^ ^


今天就來談談昨天提到的建議以 const/let 取代 var 的原因吧


Hoisting

首先先來簡單介紹一下JS的 Hoisting 特性,JS中,宣告變數 var 、建立函式 function () {...},會被提到最前面先執行。
想像成看電影前,只先看了演員名單,提前知道有哪些演員,但他們可能在電影中段才出現,而你已經知道該演員會出現在這部電影。

console.log(a)

結果:a is not defined(a 這個變數不存在)

console.log(a)
var a

結果:undefined(存在 a 這個變數,但他是未定義的變數)

也就是說,在第2例中 var a 雖然寫在後面,但他會被提到最前面先執行,所以 a 已經被宣告了,這就是Hoisting的結果。
更深入內容可參考這篇

Scope

可以想像成在每個 scope 中,擁有他各自獨立的變數,而JS在查找變數時,會先在當前的 scope 中查詢,若無該變數,再往其上一層 scope 查找。
舉例:

var a = 1
var b = 3
function f(){
  var b = 2
  console.log(a+b)
}
f()

其中,在 function f( ) 中,有變數b,則取得變數b為2,而其中無變數a,則往上一層找到變數a,則取得變數a為1,因此結果a+b為3。

  • Blobal scope:範圍含括全域,在最外層宣告的變數,在任何地方皆可使用。
  • Function scope 範圍含括在該function中的變數
  • Block scope 則是指各別 {...} 內的範圍。

const/let 取代 var

  • 在前章節有提到,建議將變數都放在開頭時宣告。然而因為Hoisting的規則, var 在較後面宣告變數,能使得該變數附有值 undefined,而 const/let 則會提示錯誤為 not defined ,因此更能避免變數未在使用前宣告。
  • 因為在ES6前,只有 function 可以建立 scope,而 var 只能在 function scope 中建立獨有的變數。 const/let 伴隨著 block scope 的誕生,在 block scope 中以 const/let 宣告變數,則可建立在該 block scope 中獨有的變數,更容易防止與其他 scope 的變數衝突。

上一篇
邁步向前的 Day5- JavaScript 變數
下一篇
重新調整的Day7- 190923學習筆記 CSS Navigation Bar
系列文
轉職道上的萌芽人生 − 自學程式開發ing30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言