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 粼粼的林林總總
13會員
40內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
你可能也想看
Thumbnail
這篇文章分享了我在開發 LINE Bot 設定功能時,發現使用者輸入的冒號與底線雖然外觀相同,但實際上是不同的 Unicode 字元,導致系統無法正確解析。透過撰寫函式,我將全形、特殊變體符號轉換為標準半形符號。文章以簡單比喻讓非工程師也能理解,並附上程式碼與實測結果,適合開發者與一般讀者參考。
Thumbnail
這篇文章分享了我在開發 LINE Bot 設定功能時,發現使用者輸入的冒號與底線雖然外觀相同,但實際上是不同的 Unicode 字元,導致系統無法正確解析。透過撰寫函式,我將全形、特殊變體符號轉換為標準半形符號。文章以簡單比喻讓非工程師也能理解,並附上程式碼與實測結果,適合開發者與一般讀者參考。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
這一篇會介紹非常重要的 JavaScript 函式概念 - 高階函式(Higher-order function),高階函數是將一個或多個函數作為參數,或將一個函數作為結果返回的函數。在本文中,我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數,函式導向是什麼?
Thumbnail
這一篇會介紹非常重要的 JavaScript 函式概念 - 高階函式(Higher-order function),高階函數是將一個或多個函數作為參數,或將一個函數作為結果返回的函數。在本文中,我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數,函式導向是什麼?
Thumbnail
CodePen 是什麼? CodePen 是一個線上前端程式碼編輯器,可以即時撰寫與預覽 HTML、CSS、JavaScript 程式碼,適合練習、展示作品、或測試功能。無需安裝環境,只要打開瀏覽器就能開始寫程式! 👉 官方網站:https://codepen.io 為什麼要用
Thumbnail
CodePen 是什麼? CodePen 是一個線上前端程式碼編輯器,可以即時撰寫與預覽 HTML、CSS、JavaScript 程式碼,適合練習、展示作品、或測試功能。無需安裝環境,只要打開瀏覽器就能開始寫程式! 👉 官方網站:https://codepen.io 為什麼要用
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News