JavaScript 入門:作用域 Scope 和作用域鏈 Scope chain

更新 發佈閱讀 4 分鐘

作用域指的是「變數或函式在程式中可以被存取的範圍」。JavaScript 的作用域主要有三種:全域作用域、函式作用域、區塊作用域。

變數或函式的宣告可以參考這篇文章:【JavaScript 入門:一表看懂 var / let / const 三種宣告方式差異

全域作用域 Global Scope

宣告在程式最外層(函式外)的變數,屬於全域作用域,在整個程式內都能被存取。

var a = 5;		
let b = 6;
const c = 7;
function test(){
console.log(`${a},${b},${c}`);
}
test(); // 5, 6, 7

因為 a, b, c 三者宣告在最外層,函式內部可以存取。

全域物件

事實上,用 var 宣告的全域變數會成為全域物件的屬性,而 letconst 宣告的全域變數則不會成為全域物件的屬性喔!

全域物件會依照 Javascript 的執行環境有所區別,以網頁來說的全域物件就是 window,可以用 window.variable 來設定與存取全域變數。

var a = 10;
let b = 15;
console.log(window.a); // 10
console.log(window.b); // undefined

函式作用域 Function Scope

在函式內使用 var 宣告變數,變數的作用域會被限制在函式內。

function test(){
var a = 5;
console.log(a);
}
test(); // 5, 可順利印出
console.log(a); //錯誤, ReferenceError: a is not defined

變數 a 使用 var 宣告在 function 內部,因此函式外無法存取。


區塊作用域 Block Scope

使用 letconst 宣告,變數/常數只會在{}內有效。

if(true){
let a = 1;
const b = 2;
}
console.log(a); //錯誤, ReferenceError: a is not defined
console.log(b); //錯誤, ReferenceError: a is not defined

let const 都是區塊作用域,脫離 {} 就無法存取了。


作用域鏈 Scope Chain

在使用變數時,Javascript 會在當前的作用域尋找被使用的變數,如果沒找到就往外面一層一層找,這樣的層層向外的關係就是作用域鏈。但要留意的是,作用域鏈是「由內向外」的關係,只有內層看得到外面,外層無法向裡面看。先知道了作用域的概念,後續可以幫我們更好理解閉包的運作原理。


參考:

  1. Javascript 的作用域 (Scope) 與作用域鏈 (Scope Chain) 是什麼?
  2. 語法與型別



留言
avatar-img
Elaine 粼粼的林林總總
6會員
22內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
這篇文章分享了我在開發 LINE Bot 設定功能時,發現使用者輸入的冒號與底線雖然外觀相同,但實際上是不同的 Unicode 字元,導致系統無法正確解析。透過撰寫函式,我將全形、特殊變體符號轉換為標準半形符號。文章以簡單比喻讓非工程師也能理解,並附上程式碼與實測結果,適合開發者與一般讀者參考。
Thumbnail
這篇文章分享了我在開發 LINE Bot 設定功能時,發現使用者輸入的冒號與底線雖然外觀相同,但實際上是不同的 Unicode 字元,導致系統無法正確解析。透過撰寫函式,我將全形、特殊變體符號轉換為標準半形符號。文章以簡單比喻讓非工程師也能理解,並附上程式碼與實測結果,適合開發者與一般讀者參考。
Thumbnail
CodePen 是什麼? CodePen 是一個線上前端程式碼編輯器,可以即時撰寫與預覽 HTML、CSS、JavaScript 程式碼,適合練習、展示作品、或測試功能。無需安裝環境,只要打開瀏覽器就能開始寫程式! 👉 官方網站:https://codepen.io 為什麼要用
Thumbnail
CodePen 是什麼? CodePen 是一個線上前端程式碼編輯器,可以即時撰寫與預覽 HTML、CSS、JavaScript 程式碼,適合練習、展示作品、或測試功能。無需安裝環境,只要打開瀏覽器就能開始寫程式! 👉 官方網站:https://codepen.io 為什麼要用
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News