iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

JavaScript 菜鳥研究室系列 第 24

菜鳥日記Day 24-ES6系列:var、let、const的區別與hoisting

  • 分享至 

  • xImage
  •  

在尚未學習ES6的概念前,我習慣以var作為變數名稱的起手式,但後來發現用var宣告變數,有汙染全域變數的風險。因此在口罩地圖與預約訂房網的專案裡,我開始使用let與const來宣告變數。let與const兩者都有區域變數的特性,但const多了唯讀的作用,特別適合用來宣告axios.get/post/delete 的url網址與token。

token就如同憑證一樣,其內容具有唯讀性,在串接某些付費API服務時,例如Google地圖,使用者會獲得一組憑證,作為使用量追蹤的根據。因此,除非該變數的內容具有唯讀性,否則都用let宣告變數即可。 

另外要特別注意的是var具有hoisting的特性,但let與const並沒有,因此在宣告變數時,必須特別注意其所在位置。
用var宣告時間變數,但位置錯誤,會顯示「無法讀取未定義的屬性」
https://ithelp.ithome.com.tw/upload/images/20201008/20130039Zw0oevAtFe.png

用let宣告時間變數,但位置錯誤,會顯示「初始化前無法存取」
https://ithelp.ithome.com.tw/upload/images/20201008/2013003916UhSx66i6.png

因_date與_thisDate兩者皆為變數,即使以var宣告變數,但因為兩者都具有hoisting的效果,因此_thisDate還是無法獲得_date的資訊。

除了var變數具有hoisting的效果,function函式也具有同樣的效果,例如
在宣告function函式後,呼叫getData,能得到時間資訊
https://ithelp.ithome.com.tw/upload/images/20201008/20130039ngZJDNykrg.png

在宣告function函式前,呼叫getData,一樣能得到時間資訊
https://ithelp.ithome.com.tw/upload/images/20201008/201300398RUkNIQMWT.png


上一篇
菜鳥日記Day 23-運算子
下一篇
菜鳥日記Day 25-ES6系列:this與作用域
系列文
JavaScript 菜鳥研究室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言