iT邦幫忙

2

JavaScript 的 var、let、const 個人總結疑惑確認

以下是紀錄的差別 :

塊作用域 暫存死區 創建全局屬性 可重新分配 可重新聲明
var X X V V V
let V V X V X
const V V X X X

以前我一直使用 var 打天下
現在新瀏覽器建議換成用 let 打天下
舊 IE 才用 var
const 除非常數要不然不用

請問我這樣的概念是否正確?
假如正確就當技術分享 ~


補充 : 認為 var 最坑的情況

function test() {
  var x = "1";
  var x = "2";
  console.log(x);
}

test(); // "2"

補充2 : 認為第二坑情況,莫名其妙變全局變數,有夠反邏輯 *(  ̄皿 ̄)/#_

function test() {
  x = "1";
}
test(); 
console.log(x); //1
看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2020-09-23 10:47:39 檢舉
原則喔...
被逼著直接在ie寫js用var,能用babel轉譯或直接使用chrome的話用let、const
如果有使用 ESLint 的 Airbnb 規範去幫你分析程式碼的話
會發現在 function block 裡沒被 reassign 的變數他都會叫你改成 const 宣告
不過規範都不盡相同 使用 ESLint 挑一個喜歡的直接規範怎麼寫最快
froce iT邦大師 1 級 ‧ 2020-09-23 11:53:40 檢舉
> 會發現在 function block 裡沒被 reassign 的變數他都會叫你改成 const 宣告

這是好習慣。
感謝兩位大神
skyway iT邦新手 5 級 ‧ 2020-09-23 17:10:49 檢舉
感謝大神
10
dragonH
iT邦超人 5 級 ‧ 2020-09-23 10:19:51
最佳解答

給你最簡單的規則

var 不要再用

會變更值的變數用 let 宣告

不會變更值的變數用 const 宣告

看更多先前的回應...收起先前的回應...
no027843 iT邦新手 5 級 ‧ 2020-09-23 10:26:43 檢舉

推推

/images/emoticon/emoticon42.gif

froce iT邦大師 1 級 ‧ 2020-09-23 10:48:21 檢舉

還是有該死的ie存在啦...

dragonH iT邦超人 5 級 ‧ 2020-09-23 10:57:16 檢舉

ie 不是被親生爸爸給... XD

用ie的大都是還在堅守 Win XP 的, 中部傳產很多/images/emoticon/emoticon20.gif

我還有一個純javascript寫的專案還在維護的。
他的頁面設計還在800x600的置中規範。
es6的寫法跟他無緣。

因為我勸業主重新改,他說能用就好了。
(xx的,當初還是學生,只拿2000元寫的東西)

Chris iT邦新手 5 級 ‧ 2020-09-23 11:27:02 檢舉

babel 救全家?

dragonH iT邦超人 5 級 ‧ 2020-09-23 11:28:13 檢舉

2000還包維護也太佛XD

咖咖拉 iT邦研究生 5 級 ‧ 2020-09-23 13:18:38 檢舉

誰來救救中部傳產....

當時拿來練手用。也剛好學生時代缺錢。
其實也只花了幾個小時用的東西。

後續維護其實還好,基本上來說大多都是放著給他看。
只有一次是留言板被洗板了清一下資料。

平常一個月有一篇留言就很不錯。突然進來10萬篇留言。
業主砍到受不了,就叫我幫清一下了。

6
浩瀚星空
iT邦超人 1 級 ‧ 2020-09-23 10:15:33

javascript 的抗可是非常的多。
畢竟它比較沒有非名確的變數宣告定義存在。

畢竟var的自由性太高了。一下全域一下私域。搞得快瘋了。

而javascript的function,並沒有像其它後端語言一樣有完全的封閉特性。
所以很容易被「滲透」進去,

我可以給我以前的開發規則。
畢竟現在的寫法是物件的應用。已經很難碰到這樣的問題了。

早期用純javascript的開發規則是。
共用的變數,一定會先在最外層var宣告好。
如果是在function內想要私域變數的情況下。
也一定會在其內先做var,並將變數名開頭多一個底線來區分變數。

看更多先前的回應...收起先前的回應...

感謝 浩瀚星空 大神經驗分享!

我剛看成 感謝 「浩瀚星空大」 「神經(病)」經驗分享!()不小心腦補上去。

XD

harutsuki iT邦新手 5 級 ‧ 2020-09-29 17:51:34 檢舉

this 也是個坑

2
Peter學程式
iT邦新手 3 級 ‧ 2020-09-23 11:29:11

這幾天剛好有寫到,歡迎訂閱、協助勘誤XD
Link

感謝您,已經追蹤!

4
eien_zheng
iT邦新手 5 級 ‧ 2020-09-23 11:55:44

白話講解:
let: 出了{} 就消失了
var: 會在整個專案都存在,等os自然排除
const: 生存範圍跟let一樣 只是它不能被從新assign

eien_zheng 大神,感謝您 !

1
glj8989332
iT邦新手 2 級 ‧ 2020-09-23 14:56:33

有看到這篇文章, 寫的很詳細: 我知道你懂 hoisting,可是你了解到多深?

作者基於ES3的規格解釋Hoisting, 我看了也才更懂, 完全是Execution Context的運作原理, 才知道Hoisting是這麼搞(我們)的.

感謝分享!

0
阿電
iT邦新手 5 級 ‧ 2020-09-24 10:13:52

因為var 是function scope,而let是block scope,const是常數不能被修改,var 使用上會有循環變數洩漏全局變數問題與內區塊變數覆蓋外區塊變數問題
Global →Function → Block,精準的使用let、const,取代使用var,希望對你有幫助
https://ithelp.ithome.com.tw/upload/images/20200924/20129187uZYNd2oXHz.png

我要發表回答

立即登入回答