前言

今天我們將講解JavaScript的三種Scope類型

說明

Scope（作用域）

作用域代表著變數的可訪問性(accessibilty)

可訪問性比喻：可見到的人(變數)

下方舉例使用scope1和scope2兩種function，看是否可訪問到變數x

function scope1() {
  let x = 10;
  console.log(x);
}

function scope2() {
  console.log(x);
}

scope1(); // 10
scope2(); // ReferenceError

結果可看到scope2 function並無法訪問到變數x，會丟出Reference error錯誤

Scope type（作用域類型）

Scope主要有三種，以下舉例

1. Global Scope：

• 在Function或Block外宣告的變數
• Global scope宣告的變數可稱為Global variable
• Global variable可在程式碼中任何一處被訪問到（函式內外部）

Global variable就像雲一樣，不論你在哪只要抬頭即可看見

let x = 10;

function scope1() {
  console.log(x);
}

function scope2() {
  console.log(x);
}

scope1(); // 10
scope2(); // 10

上例中x variable就屬於Global variable，因次scope1和scope2都可以順利訪問到

2. Function Scope

• 在JavaScript中每創造Function都會創造新的Scope
• 在Function內宣告的Variable，無法在Function外處訪問

function scope1() {
  let x = 10;
  console.log(x);
}

function scope2() {
  console.log(x);
}

scope1(); // 10
scope2(); // ReferenceError

一開始我們的舉例，即屬於Function scope例子
變數x是在scope1 function內被宣告的，因此也只能在function1內被訪問

3. Block Scope

• Block scope為ES6（ECMAScript 2015）引入的新特性
• 定義於{}(大括號)內且使用const和let宣告的變數

注意只限使用const, let宣告的變數

if(true){
  const x = 1;
  let y = 2;
  var z = 3;
}

console.log(x); //Uncaught ReferenceError: x is not defined
console.log(y); //Uncaught ReferenceError: y is not defined
console.log(z); // 3

在上例中，只有使用var宣告的變數z，可被訪問，x以及y由於屬於block scope只能在{}內訪問
那var的作用機制為何呢？

在上例var declaration中scope為Function scope

var x = 5;
for (var x = 0; x < 10; x++){}
console.log(x) //10

由於var在任何處都可以被訪問（無block scope），在for loop中x又被重新賦值從0一路增加到10