Jeff的隨手筆記

學習當一個前端工程師

0%

『新手日記』Day-15 Scope變數作用域

Posted on In

『新手日記』Day-15 Scope變數作用域

https://miro.medium.com/max/1400/1*f-3e4xhqGcwsg0FjiXB20A.png

這也太跳痛了吧，這個題目不是應該一開始就要說，怎麼到現在才講。

其實本來是想要來紀錄 Closure(閉包)的，但…我高估自己了，很多東西是懂非懂(麵非麵？？？)，只好到網路上找文章，突然發現了這篇文章，想說跟大家分享一下～

根據此篇作者所說，想要了解Closure(閉包)，就要先了解一下4個面向：

變數運作行為

變數作用域 (Scope)

Hoisting (宣告的提升效果)

立即函數

太棒了！！！又可以撐過4天了(喂～)，今天先來了解一下變數作用域 (Scope)。

看專業術語就讓人害怕

相信這對所有像我一樣的程式新手來說都是很令人頭痛的事情吧，但不搞懂又不行只好硬著頭皮硬上，所以用簡單好理解的講解方式真的是對新手很大的福利！

**一個變數能生效的範圍有多廣，就稱為這個變數的作用域(Scope)**。

但怎麼去區分它們的範圍呢？作者用很有趣的方式來解說：

範圍就是知名度變數就是明星

知名度對明星來說既現實又殘酷，就像作用域之於變數。

同樣是宣告一個變數，有的變數只有在他宣告的地盤才有作用；有的變數即使不是宣告在這個區塊，依然能跨界發揮影響力。

變數作用域的範圍，取決於這個變數宣告的地方與方式。

在 JavaScript 裡，有 3 種等級的作用域：香港喜劇天王星爺 — — Function Level Scope國際巨星阿湯哥 — — Global Level Scope住在隔壁號稱歌神的里長阿伯 — — Block Level Scope (ES6)

Function Level Scope（香港喜劇天王星爺）

離開了Function 就沒有人認識他，就好比星爺在台灣無人不知無人不曉，但到歐美認識他的反而是少數。

這種變數我們常稱為區域變數(Local Variables)

Global Level Scope(國際巨星阿湯哥)

在每個執行 JavaScript 程式的環境，會有一個**全域物件 (Global Object)**：

  • 在 HTML 裡，全域物件是 window object。
  • 在 Node.js 裡，全域物件是 global object。

存放在全域物件裡的變數，無論在哪裡宣告，效力都能遍及整個程式，我們稱為**全域變數 (Global Variables)**。

就好比你現在去捍衛戰士2有上映的國家，問認不認識阿湯哥一樣，大家都知道他是誰。

注意！！！在 JavaScript 裡有一種狀況會自動產生全域變數，那就是賦值給未宣告的變數。

Block Level Scope(住在隔壁號稱歌神的里長阿伯)

Block Level 的作用域範圍可能非常小，只是一個函數裡的某一段程式。程式裡 Block 指的是一段用大括號 ({ 和 }) 包起來的區塊。

雖然可能出了這一里就沒人認得他們，但在這一里的範圍內，他們就是婆婆媽媽們心中最強的情歌王子。

但在 ES5 之前，用 var 關鍵字去宣告的變數，只會有 Global Level 和 Function Level 兩種等級的作用域，因此沒有這個概念。但在ES6 導入了新的變數宣告關鍵字：let 和 const，不僅提高變數控管的嚴謹性，也增加了 Block Scope 的用途。

傳統 var 和 創新 let & const

傳統 var 宣告變數的語法如下：

1
2
3
4
var gameName = "IT Help 2019";
var gamer = "OneJar", topic = "Something about JavaScript", progress = 7;
var isFinished;
// A variable declared without a value will have the value **undefined**.

要點懶人包：

  • 使用 var 關鍵字來宣告變數。
  • 可只用一次 var 一次宣告多個變數，用逗號 (,) 區隔。
  • 宣告的同時可進行初始化，也就是賦值。
  • 若沒有初始化，則預設值會是 undefined。

傳統 var 宣告變數的 3 個缺點：

  1. 語法允許重複宣告 (Re-Declaring)
  2. 不支援區塊作用域 (Block Scope)
  3. 不支援常數 (Constant) 特性

針對上面的問題在ES6時做了一次改進，下面簡單介紹 let & const

let

  • 支援 Block Scope。
  • 禁止同一層 Block 重複宣告變數。
  • 不會產生 Global Scope 變數。

const

  • 具備 let 的所有特性。
  • 定義時必須初始化 (Initialization)。
  • 後續不能更改值。

應避免使用 var，改用 let 和 const

ES6 導入 let 和 const，改善 var 在變數宣告和管制上的不足，讓程式的變數控管可以更加嚴謹，減少出錯的機率。

因此未來撰寫 JavaScript 時，應該全面使用 let 和 const 來取代 var，讓程式碼更加嚴謹安全。

這篇是簡單的把作者的幾篇文章剪輯起來，整理成一篇筆記。並沒有像之前一樣參考2~3份資料融合起來。

學習程式真的是一件痛苦又好玩的事情，痛苦的事資料越讀越多，但好玩是指會在某一天你就突然看懂之前完全不了解的事情，像之前第一次碰到arrow function 我完全不知道這到底怎麼用，但這次在複習時就覺得之前的自己是笨蛋嗎？當初居然還要想這麼久！

忘記是哪看來的：『先把書讀厚，然後要越讀越薄』我自己理解的是：在學習過程，在書上解釋不清楚的或是只有稍微點到沒深入講解的內容，我要多去找書本外的知識;然後要把知識理順內化成自己的想法！

目前還在讀厚的階段！

參考資料：

https://ithelp.ithome.com.tw/articles/10203387