# JavaScript - Scope 作用域 & Closure 閉包

## Scope 作用域

### 什麼是作用域

> 「作用域就是一個變數的生存範圍，一旦出了這個範圍，就無法存取到這個變數」。

當我們把變數 `a` **宣告在 function 中**，function 之外的地方都無法取用這個變數：

// 把變數宣告在 function 中
function test1() {
    var a = "hello"
}
console.log(a) // Uncaught ReferenceError: a is not defined

但當我們把變數 `b` **宣告在全域**，function 裡面也可以取用外面的變數：

// 把變數宣告在全域
var b = 123
function test2() {
  console.log(b) // 123
}
test2()

再看看這個例子：

// 宣告函式
function outer() {
    var x = 5
    // 在函式裡面宣告另一個函式
    function inner() {
        var y = 4
        console.log(x+y) // 9
    }
    inner()
    console.log(y) // Uncaught ReferenceError: y is not defined
}
// 呼叫函式
outer()

- `y` 不能被 `outer` 取用：`y` 不在 `outer` function 的作用域中因此無法被 `outer` 取用
- 但 `x` 可以被 `inner` 取用：`inner` 在自己的作用域中找不到 `x` ，便開始向外尋找，最後在 `outer` 的作用域中取用 `x`

:::info
結論：
- 外面存取不到裡面的，但內層可以存取到外層的
- 倘若一直向外查找到全域都找不到變數，就會出現的 `ReferenceError: variable is not defined` 錯誤訊息
:::

### 靜態作用域 / 語法作用域

Javascript 的作用域是採用「靜態作用域（static scope）」，也稱作「語法作用域 (lexical scope)」（也有人翻成「詞法作用域」、「語彙作用域」）。「靜態作用域」是相對於「動態作用域(dynamic scope)」而來。

#### 靜態作用域
靜態作用域決定作用域的方式是根據**函式在哪裡被宣告**，與函式在哪裡被呼叫無關，查找變數的流程不會因為函式實際執行的位置不同而改變。

#### 動態作用域
動態作用域決定作用域的方式是以呼叫堆疊 (call stack) 為準，查找變數的流程是執行時才決定的。

來看看這個例子：

var name = "Peter";  // 全域變數

function init() {
  var name = "Amy";  // 局部變數
    
  function displayName() {
    console.log(name); // "Peter" or "Amy"?
  }
    
  displayName();
}

init();

答案是 Amy。
1. `init()` 函式在自己的作用域建立了局部變數 `name` 以及 `displayName()` 函式
2. `displayName()` 函式的作用域中沒有局部變數 `name` ，因此開始向外層尋找，先找到了 `init` 作用域的 `name` 變數 --> 因此答案是 Amy

再看看另一個例子：

var name = "Peter"; // 全域變數

function displayName() {
    console.log(name); // "Peter" or "Amy"?
}

function init() {
  var name = "Amy";  // 局部變數
  displayName();
}

init();

答案是 Peter。

- `displayName` 裡的 `name` 其實就是 global 的 `name`，跟 `init` 裡的 `name` 沒有關係。
- 這是因為 Javascript 是採用「靜態作用域」的關係， `displayName()` 是在全域中**被宣告**，即使是在 `init()` 中**被呼叫**，它的作用域仍與 `init()` 無關。（在某些採用「動態作用域」的程式語言中， `name` 確實有可能會是 `"Amy"`）。

:::info
這邊可以知道：
- 作用域跟這個 function 在哪裡被「呼叫」一點關係都沒有
- 靜態作用域是在 function 被「宣告」的時候就決定了，而不是 function 被「執行」的時候
:::
### 如何產生作用域
作用域有三種：
- 全域 Global Scope
- 函式作用域 Function Scope
- 塊級作用域 Block Scope (ES6)

### 全域 Global Scope
Javascript 執行的一開始就會創建一個全域環境，被定義在 function-scope 或是 block-scope 以外的變數就叫做全域變數 (global variable)。
- 不在函式或區塊內宣告的變數就是全域變數
- 可以在任何地方取用的變數
- **如果在定義變數時沒有加上宣告變數，即使在函式內也會成為全域變數**（應避免這種情形）

    function hello() {
        name = 'Jack';
    }
    hello(); // 先執行 hello() 才宣告了 name 這個變數
    console.log(name); // Jack，即使變數是在函式中被定義，還是變成了全域變數

### 函式作用域 Function Scope
每建立一個函式就會創建一個新的函式作用域。
- 在函式中宣告的變數只能在函式（該作用域中）使用
- **不論是透過 `var`, `let`, `const` 宣告的變數，當他們在函式中宣告時都屬於函式作用域**

function foo(){
    var num = 10; // function scope
}
console.log(num); // Uncaught ReferenceError: num is not defined

### 塊級作用域 Block Scope
在 ES6 中引入了 `let` 與 `const` 變數，這兩個變數的宣告方式提供了「區塊作用域」。
- 區塊作用域的範圍只存在於大括號 `{}`（例如 if 或 for）
- 區塊作用域與函式作用域相同，內部宣告的變數不能從外部取用
- **`var` 宣告的變數不會有區塊作用域，透過 `let` 與 `const` 宣告才能讓變數具有區塊作用域**

// 在 {} 中用 let 或 const 宣告的變數具有區塊作用域
function foo1() {
    if (true) {
        const user = "花爸"; // block scope
    }
    console.log(user); // Uncaught ReferenceError: user is not defined
}
foo1();

// 在 {} 中用 var 宣告的變數不會有區塊作用域
function foo2() {
    if (true) {
        var user = "花媽"; // function scope
    }
    console.log(user); //花媽
}
foo2();

在上述的例子中，
- `foo1()` 使用了 `const` 宣告變數，所以 if 的 `{}` 內為區塊作用域，`const user = "花爸"` 只存在於該 `{}` 區塊中。既便是同函式中的 `console.log(user)` 也無法取用 if `{}` 內宣告的變數。
- `foo2()` 使用了 `var` 宣告變數，不會有區塊作用域，`var user = "花媽"` 存在於 `foo2` 函式中。因此同函式中的 `console.log(user)` 可以取用該變數。

### 作用域鏈 Scope Chain
Javascript 在使用一個變數的時候，會先在當層的作用域尋找該變數。若當前的作用域找不到該變數，會再往父層作用域尋找，就這樣一層一層往上找，一直到全局作用域如果還是沒找到就會報錯。這種由內而外搜尋的行為就是「作用域鏈」。

> 事實上，每個函式在執行時都會建立一個對應的作用域鏈。（延伸閱讀：[前端中階：JS令人搞不懂的地方-Closure(閉包)](https://hugh-program-learning-diary-js.medium.com/%E5%89%8D%E7%AB%AF%E4%B8%AD%E9%9A%8E-js%E4%BB%A4%E4%BA%BA%E6%90%9E%E4%B8%8D%E6%87%82%E7%9A%84%E5%9C%B0%E6%96%B9-closure-%E9%96%89%E5%8C%85-cbb9c6a4185c)）

function outer() {
    var a = 10
    function inner() {
        console.log(a) // 10
    }
    inner()
}
outer()

上述例子中，`inner` 函式在自己的作用域中找不到 `a` 變數，就會往上一層的 `outer` 作用域找，如果還是找不到就會再往上一層找直到最上層的 `global` 作用域為止，如果最後還是找不到就會報錯。

查找方向：【 inner function scope 】 -> 【 outer function scope 】 -> 【 global scope 】，這個過程就構成了一個作用域鏈。

對 `inner` 來說，`a` 變數並不存在於它的作用域中，但它仍能存取這個變數，這樣的變數也叫做「**自由變數 (free variable)**」。

## Closure 閉包

### 什麼是 closure
根據 [MDN 的敘述](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Closures)：
> 閉包（Closure）是函式以及該函式被宣告時所在的作用域環境（lexical environment）的組合。

const outer = () => {
    const greet = 'Hi'
    const inner = () => {
        console.log(greet) // 'Hi'
    }
    inner()
}

outer()

當我們呼叫 `outer` 時，就只是執行內部的一個 function `inner` 而已。

但如果我們不直接執行 `inner` ，而是直接把這個函式回傳：

const outer = () => {
    const greet = 'Hi'
    const inner = () => {
        console.log(greet) // 'Hi'
    }
    return inner
}

const newFunc = outer() // 建立了 newFunc 實例(instance)
newFunc()

原本當函式執行完成以後，裡面宣告的變數也應該要被釋放，因此當 `outer()` 執行結束時，照理來說變數 `greet` 的記憶體空間會被釋放，但緊接著在呼叫 `newFunc` 時卻仍能存取到 `greet`。

換句話說只要 `newFunc` 還在， `greet` 就依然存在。這種**在 function 裡回傳了一個 function** 導致明明函式執行完畢卻還能存取到資源的現象就是「閉包」。

我們首先在 `outer` 函式中：
1. 宣告了一個變數 `greet`
2. 宣告一個 `inner` 函式，`inner` 函式會印出 `greet`
3. 回傳 `inner` 函式

接著把 `outer` 函式指派給 `newFunc` 變數，此時：
- `newFunc` 是 `inner` 在 `outer` 運行時所建立的實例 (instance)
- `newFunc` 存取了 `outer` 回傳的值（也就是 `inner` 函式）
- 由於 `inner` 的 instance 中保有了原本作用域的環境參照，而作用域裡含有 `greet` 變數，因此調用 `newFunc()` 時 `greet` 也能被取用

### Closure 的特性
- 在 JavaScript 中每當函式被建立時，一個閉包就會被產生
- 當一個 function 內 return 了另一個 function，通常就是有用到閉包的概念
- 閉包是資料結構的一種，當一個函式被宣告時，函式對其語法環境 (lexical environment) 的引用在一起的組合就是閉包（可以想像成函式記住了宣告時的作用域環境）
- 閉包就是可以回傳一個 function，並且使用父層 function 的變數
- 閉包可以讓函式內部的變數不受外部環境影響
- 閉包內部可以透過作用鏈獲取外部資料，內層作用域(child scope)永遠可以取得外層作用域(parent scope)的資料，反過來則不行

### Closure 的好處

#### 節省寫入記憶體的次數
可以把程式中需要重複執行的部分透過閉包封裝起來，進一步簡化程式，或是讓變數的值給保存下來。

1. 把想要回傳的東西包到 function 裡再回傳
2. 再把 function assign 給變數
3. 讓變數去存取 function 回傳的值

假設今天這個函式需要創造一個很大的 array，並且這個函式會被呼叫很多次：

function heavyDuty(index) {
  const bigArray = new Array(7000).fill('something')
  console.log('created!')
  return bigArray[index]
}
heavyDuty(688) // created!
heavyDuty(688) // created!
heavyDuty(688) // created!

每執行一次函式都需要重複產生一個 7000 個 index 的 array，太浪費資源了，這時就很適合使用 closure：

function heavyDutyClosure() {
  const bigArray = new Array(7000).fill(':)')
  console.log('created!')
  
  return function(index) { // 簡化寫法，直接 return function
    return bigArray[index]
  }
}

const getHeavyDuty = heavyDutyClosure()
getHeavyDuty(688) // created!
getHeavyDuty(688)
getHeavyDuty(688)

1. 把想要回傳的東西包到 function 裡再回傳
2. 把函式 `heavyDutyClosure` assign 給變數 `getHeavyDuty`，讓 `getHeavyDuty` 去存取 `heavyDutyClosure` 所回傳的值（也就是函式 `function(index)...`）
3. 執行 `getHeavyDuty` 時，就是在呼叫函式 `function(index)...`

值得注意的是，雖然呼叫了三次 `getHeavyDuty` 但用 closure 寫法的版本只會在第一次印出 `created!`

執行第一次 `getHeavyDuty` 時的運作流程：

呼叫 getHeavyDuty
-> 呼叫 heavyDutyClosure
-> 創造 bigArray 並印出 created!
-> 回傳函數
-> 執行回傳的函數
-> 回傳 bigArray[688]

執行第一次後 `function(index)...` 就已經被存取 `getHeavyDuty` 這個變數了。後續在執行 `getHeavyDuty` 就是在執行 `function(index)...` 了。而 `heavyDutyClosure` 中沒有被 return 的部分（產生 7000 個 array、印出 created!）就只會執行一次。

接下來幾次執行 `getHeavyDuty` 的運作流程其實只剩：

呼叫 getHeavyDuty
-> 呼叫函數 function(index)… 
-> 回傳 bigArray[688]

#### 封裝(Encapsulation) 變數 (private variable)

封裝是物件導向程式設計(Object Oreinted Programming，簡稱 OOP) 一個非常重要的概念。

有些資料如果不想讓外部函式/方法改動它，就可以使用閉包的方式來確保只有內部函式可以改動內部資料。

let count = 0
function increment(num) {
  return count += num
}
function decrement(num) {
  return count -= num
}
function getCount() {
  return count
}
increment(3)
increment(3)
increment(1)
getCount() // 7

這裡直接在全域宣告 `count` 變數是錯誤的，可能會導致程式碼出現不可預期的錯誤。比如要是有人在其他地方寫了 `count = 5` 資料就亂掉了。

這種情況就可以使用閉包，寫一個 function 把 `count` 這個變數和能夠改變這個變數的 function 封裝在一起：

function createCounter (initCount) {
  let count = initCount
  return {
    increment: (num) => count += num,
    decrement: (num) => count -= num,
    getCount: () => count
  }
}

const counter = createCounter(0)

counter.increment(3) // 3
counter.increment(3) // 6
counter.increment(1) // 7
counter.getCount() // 7
count = 5 // ReferenceError: count is not defined

這樣一來除了 `.increment()` 、`.decrement()` 、`.getCount()` 之外的方法都無法改變 `count` 這個變數。

- `count` 是一個 **private variable**
- `count` 只存在於 `createCounter` 作用域中
- `count` 只能被內部的函式改動資料，不會被外部環境所影響
- 能夠存取 private variable 的方法被稱作 **privileged method**

#### 記憶體回收 (Garbage Collection)

## 作用域陷阱＆閉包應用

var btns = document.querySelectorAll('button')
for(var i=0; i<btns.length; i++){
    btns[i].addEventListener('click', function(){
        alert(i+1)
    })
}

假設頁面上有 3 個按鈕，預期的行為是點擊第一個按鈕跳出 1 、點擊第二個按鈕跳出 2 ⋯以此類推。但實際操作後會發現，無論點擊哪一個按鈕都會印出 3。

原本想像中的迴圈應該是要這樣跑的：

btn[0].addEventListener('click', function(){
    alert(1)
})

btn[1].addEventListener('click', function(){
    alert(2)
})

btn[2].addEventListener('click', function(){
    alert(3)
})

但實際上 JS 引擎在運作時是這樣跑的：

btn[0].addEventListener('click', function(){
    alert(i+1)
})

btn[1].addEventListener('click', function(){
    alert(i+1)
})

btn[2].addEventListener('click', function(){
    alert(i+1)
})

在跑迴圈的時候只是加上它的 callback function 而已還沒有執行，是要等到使用者按按鈕的時候才會去尋找 `i` 變數。

也就是說，事件發生時（使用者點擊按鈕）所引發的函式 (callback function) 是在迴圈跑完之後才執行。

加上這幾個 callback function 本身並沒有 `i` 這個變數，因此會向作用域的外層開始尋找，一直找到在迴圈中定義的 `i` （定義在全域中）作為其值。

而此時的 `i` 早就已經變成了 2 了，因此無論點擊哪一個按鈕，取用的都是同一個全域變數中的 `i`，所以都只會輸出 3。

這個問題可以透過閉包來解決：

**建立一個新的函式並傳入參數：**

function getAlert(num) {
  return function() {
    alert(num)
  }
}
for(var i=0; i<btn.length ; i++) {
  btn[i].addEventListener('click', getAlert(i))
}

透過高階函式 (Higher Order Function) 產生三個新的 function，並且因為傳入了一個參數 `i`，利用閉包的特性將 `i` 個別鎖進 `getAlert` 中。

**或者也可以利用 IIFE(Immediately Invoked Function Expression)：**

for(var i=0; i<btn.length ; i++) {
    (function(num) {
        btn[i].addEventListener('click', function(){
            alert(num)
        })
    })(i)
}

透過 IIFE 把 function 包起來並傳入參數 `i` 立即執行。

迴圈每跑一次就會產生一個新的 function 並且立刻呼叫它，因此會就地產生新的作用域，並且利用了閉包的特性將參數 `i` 鎖住。

**也可以直接把 `var` 改成 `let` (ES6)**：

for(let i=0; i<btn.length ; i++){
    btn[i].addEventListener('click', function() {
    alert(i)
  })
}

ES6 裡有了塊級作用域 (block scope) 之後就可以直接利用 `let` 的特性，等於每跑一次迴圈都會產生一個新的作用域，因此 `i` 就會存在在該作用域裡。可以看成這樣：

{ // 塊級作用域
  let i=0
  btn[i].addEventListener('click', function() {
    alert(i)
  })
}
{ // 塊級作用域
  let i=1
  btn[i].addEventListener('click', function() {
    alert(i)
  })
}
...

## Ref
- [Javascript 的作用域 (Scope) 與作用域鏈 (Scope Chain) 是什麼?](https://www.explainthis.io/zh-hant/interview-guides/javascript/what-is-scope-and-scope-chain)
- [[筆記]-JavaScript 作用域與作用域鏈是什麼?關於作用域的4個觀念](https://jianline.com/javascript-scope-and-scope-chain/#%E5%85%A8%E5%9F%9F%E4%BD%9C%E7%94%A8%E5%9F%9FGlobal_Scope)
- [[JS基礎] 什麼是閉包(Closure)？](https://johnnychang25678.medium.com/js%E5%9F%BA%E7%A4%8E-%E4%BB%80%E9%BA%BC%E6%98%AF%E9%96%89%E5%8C%85-closure-61bcc1eb02ca)
- [[JS] 深入淺出 JavaScript 閉包（closure）](https://pjchender.dev/javascript/js-closure/)
- [所有的函式都是閉包：談 JS 中的作用域與 Closure](https://github.com/aszx87410/blog/issues/35)
- [前端中階：JS令人搞不懂的地方-Closure(閉包)](https://hugh-program-learning-diary-js.medium.com/%E5%89%8D%E7%AB%AF%E4%B8%AD%E9%9A%8E-js%E4%BB%A4%E4%BA%BA%E6%90%9E%E4%B8%8D%E6%87%82%E7%9A%84%E5%9C%B0%E6%96%B9-closure-%E9%96%89%E5%8C%85-cbb9c6a4185c)
- [閉包包什麼？探索JS中的作用域與Closure | Javascript鍛鍊日記](https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/%E9%96%89%E5%8C%85%E5%8C%85%E4%BB%80%E9%BA%BC-%E6%8E%A2%E7%B4%A2js%E4%B8%AD%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E8%88%87closure-javascript%E9%8D%9B%E9%8D%8A%E6%97%A5%E8%A8%98-f7b1a2ac1e2a)