JavaScript 核心觀念(4)-變數作用域(Scope)

嗨,大家好,我是Kris,今天要來講JS的小知識
不同作用域到底差在哪裡?在這一篇裡面跟大家介紹三種不同的作用域。


作用域(Scope)

如同上一篇JS的語法作用域裡面提到的-連結按這裡

在 JavaScript 中,當一個變數被宣告的時候,它就開始有影響力,而它所影響到的地方,我們就稱之為作用域。

每一個變數都會有自己的作用域,當離開時它就不能作用了,而作用域取決於這個變數產生的地方跟方式。


作用域的等級
JavaScript 中的作用域分為三個等級

Global Level Scope
Function Level Scope (Local Scope)
Block Level Scope (ES6)


Global Level Scope 全域作用域

在每個 JavaScript 環境中,都一定會有一個全域物件(全域環境),在 HTML 中我們稱之為 window。
在全域環境宣告的變數就稱之為全域變數,而它能影響的地方就是全域作用域。
全域變數的影響範圍非常廣大,不論是函式(function)內外,他的影響力遍布整個程式碼。


Function Level Scope (Local Scope) 區域作用域

在函式內被宣告的變數就稱為區域變數,所影響的地方就是區域作用域,也就是函式的大括號內,一旦離開 function 使用的話,就會出現 ReferenceError:xxx is not defined 未定義的錯誤訊息。

*在函式內,若變數沒有被宣告,就會被自動轉為全域變數


如上圖,b 在函式內沒有被宣告,所以變成全域變數,所以外面的 console.log 讀得到,而宣告過的 a 作用域只在test函式內作用

*如果在函式內外有相同的變數名稱,並且想要在函式內取得此變數的值,會優先使用區域變數的值,除非使用 window 才能去取得全域變數的值




Block Level Scope (ES6)  區塊作用域

是比區域更小的範圍,影響力只有變數被宣告的大括號和子區塊。
其實 function scope(區域作用域) 也可以被視為一種區塊作用域,在ES6之前的版本是不支持此區塊作用域的
在以前的版本使用var宣告變數時,是沒有區塊作用域的。
在 ES6 後才出現的 let、const ,就是支持區塊作用域,準確來說是他們只支持區塊作用域。


可以看到var宣告的變數是區域作用域,也就是整個 function,而 let 宣告的變數只作用在他的區塊與子區塊。



看完以後有沒有更瞭解不同用域實際運作的範圍呢?
希望這篇文章有幫助到大家~


『願多年後的我們,能深深愛上被年輕修修改改得自己。』

评论

此博客中的热门博文

JavaScript 核心觀念(5)-執行環境(Execution context)與執行堆疊(Execution stack)

JavaScript 核心觀念(6)-執行環境與作用域-範圍鍊

JavaScript 核心觀念(3)-的語法作用域(Lexical scope)