JS學習筆記#20 | 作用域(Scope)

更新 發佈閱讀 3 分鐘


一、 Scope

作用域是指程式中變數的可訪問範圍,也就是變數在哪裡可以被存取。

JavaScript 有幾種作用域類型:

1.全域作用域(Global Scope)

變數在程式最外層定義,任何地方都可以存取。

var globalVar1 = "我是全域的1";
let globalVar2 = "我是全域的2";
const globalVar3 = "我是全域的3";
function sayHi() {
console.log(globalVar1); // 輸出:我是全域的1
console.log(globalVar2); // 輸出:我是全域的2
console.log(globalVar3); // 輸出:我是全域的3
}
sayHi();

2.函數作用域(Function Scope)

在函數內宣告的變數,只能在該函數內存取,外層無法看到。

function test() {
var localVar = "我是區域的";
console.log(localVar); // 輸出:我是區域的
}
test();
console.log(localVar); // 報錯:ReferenceError

3.塊級作用域(Block Scope)

使用 letconst 宣告的變數,限制在 {} 塊內(比如 if for)。

var 沒有塊級作用域,會穿透{} 塊。

if (true) {
let blockVar = "我在塊裡";
var notBlockVar = "我跑出去";
console.log(blockVar); // 輸出:我在塊裡
}

console.log(blockVar); // 報錯:ReferenceError
console.log(notBlockVar); // 輸出:我跑出去

4.模組作用域(Module Scope)

在 ES6 模組(.js 檔案使用 import/export)中,變數預設限制在模組內,除非明確匯出(export)。

模組作用域類似於一個獨立的作用域,外界無法直接存取模組內的變數。

// module.js
let moduleVar = "模組內變數";
export function sayHi() {
console.log(moduleVar); // 輸出:模組內變數
}
// main.js
import { sayHi } from './module.js';
sayHi(); // 輸出:模組內變數
console.log(moduleVar); // 報錯:ReferenceError

特性

    • 模組頂層的變數不會污染全域作用域。
    • 必須透過 export 匯出才能被其他檔案使用。


二、作用域鏈(Scope Chain)

JavaScript 解析變數時的查找機制。當程式需要存取某個變數時,會從當前作用域開始,沿著外層作用域逐級查找,直到全域作用域。

var outer = "外層";
function innerFunc() {
console.log(outer); // 輸出:外層
}
innerFunc();

innerFunc 內找不到 outerVar,於是沿著作用域鏈往外找,找到全域作用域的 outerVar。



留言
avatar-img
koko的沙龍
1會員
34內容數
koko的沙龍的其他內容
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
看更多
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
Thumbnail
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
本書介紹了戰略設計、管理領域複雜度、實際應用領域驅動設計等主題。透過對核心子領域、支持子領域、限界上下文等概念的探討,提供了領域驅動設計的相關知識。這篇文章中還涉及了微服務、事件驅動架構和資料網格等相關主題,提供了設計系統和應用領域驅動設計的指導。
Thumbnail
本書介紹了戰略設計、管理領域複雜度、實際應用領域驅動設計等主題。透過對核心子領域、支持子領域、限界上下文等概念的探討,提供了領域驅動設計的相關知識。這篇文章中還涉及了微服務、事件驅動架構和資料網格等相關主題,提供了設計系統和應用領域驅動設計的指導。
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
Thumbnail
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News