JavaScript Scope Chain 與 Closure

Scope 到底是指哪裡？#

Scope 是變數的有效範圍。

function 裡面是 local，指的是在 local 這個範圍裡面有效。

function 外面是 global，指的是在 global 這個範圍裡面有效。

所以 Scope chain 是指？#

Scope chain 像是一張地圖。

Scope chain 生成在程式的創建階段，所以在執行之前就已經決定好 function 的作用域。換句話說，程式碼寫完就決定好作用域了。

如果使用了 function 外面宣告的變數，JavaScript 還是能依照 Scope chain 去 function 外面找到正確的變數來使用。如果外面還是找不到，就去外面的外面 … 直到找到它，找不到的話就拋出錯誤。

那 closure 呢？#

要理解 closure 要先知道作用域是已經決定好的了。

我們知道在 function 裡面的變數對 function 外面的作用域是沒有意義的，它會在呼叫 function 的時候創建，function 執行完之後釋放掉。所以不管我們呼叫幾次，function 裡面的變數都會重新建立。

舉個例子，在 function 裡面宣告一個變數 count，每次呼叫counter()，count 的值都會從 0 開始。

function counter(){
  let count = 0;
  count = count + 1
  return count
}

console.log(counter()) // 1
console.log(counter()) // 1
console.log(counter()) // 1

我們也知道 function 裡面可以使用 function 外面的變數，因為該變數的作用域是 global 了，它不會隨著 function 執行完之後被釋放掉。

試著把 count 移到 global。每次呼叫 counter() ， count 的值都會累加。

let count = 0;
function counter(){
  count = count + 1
  return count
}

console.log(counter()) // 1
console.log(counter()) // 2
console.log(counter()) // 3

但如果不希望 count 的值暴露在 global，又希望 count 的值會累加，可以怎麼做？

用第一個例子，把 return count 的地方，用 return function(){} 包起來；再把 counter() 存成一個變數 myCounter。

function counter(){
  let count = 0
  // 用 return function(){} 包起來
  return function(){
    count = count + 1
    return count
  }
}

// 再把 counter() 存成一個變數 myCounter
let myCounter = counter()

// 神奇的事情發生了
console.log(myCounter()); // 1
console.log(myCounter()); // 2
console.log(myCounter()); // 3

所以為什麼 count 可以累加了？ 來看 let myCounter = counter() 這一行發生了什麼事。

1. 執行 counter()
2. function counter() 的作用域被產生了
3. 回傳 function(){...}
4. 存到了 myCounter

正常來說 function 執行完就釋放了，但是把 執行counter() 存入 myCounter 變數，讓 function counter 沒有被釋放掉，而是被保留下來了。所以後續我們執行 myCounter 的時候，就會讓 count 累加。

這個現象就叫做 closure。

參考#

閉包 重新介紹JavaScript function closures 重新認識 JavaScript: Day 19 閉包 Closure 所有的函式都是閉包：談 JS 中的作用域與 Closure