Javascript閉包：從理論到實現，[[Scopes]]的每一根毛都看得清清楚楚

昨天我寫到「全部Javascript函數都是閉包」，有些同窗表示仍是接受不能。我好好的一個函數，怎麼就成閉包了？那麼，讓咱們來探究一下，Chrome（V8）究竟是怎樣實現閉包的。

從閉包到[[Scopes]]

如今按下F12，打開console，讓咱們隨便找一個實驗對象：

function simpleFunc() { }
// <- undefined

超簡單超正常的函數吧，咱們來驗證一下：

simpleFunc
// <- ƒ simpleFunc() { }

說了超正常的，哪裏閉包了？如今試試這個：

console.dir(simpleFunc)
// ƒ simpleFunc()
//   arguments: null
//   caller: null
//   length: 0
//   name: "simpleFunc"
//   prototype: {constructor: ƒ}
//   __proto__: ƒ ()
//   [[FunctionLocation]]: VM000:1
//   [[Scopes]]: Scopes[1]

咦，[[Scopes]]是什麼？打開一看：

//   [[Scopes]]: Scopes[1]
//     0: Global {type: "global", name: "", object: Window}

這就是閉包的實現。東西都存在這裏了。看起來simpleFunc只不過是純潔的函數，但它其實是（空的）自身代碼+全局變量環境。換句話說，它正是「函數和聲明該函數的詞法環境的組合」。

再來個稍微複雜點的例子：

{
  let localVar = 1;
  function dirtyFunc() { return localVar++ }
}
// <- ƒ dirtyFunc() { return localVar++ }

console.dir(dirtyFunc)
// ƒ dirtyFunc()
//   [[Scopes]]: Scopes[2]
//     0: Block
//       localVar: 1
//     1: Global {type: "global", name: "", object: Window}

看，localVar存在這裏了吧！你們老說什麼「保持運行的數據狀態」云云，其實都在[[Scopes]]裏。dirtyFunc看起來是個普通的函數，但[[Scopes]]裏卻混了些東西。

因此，若是咱們說人話，閉包實際上就是——

函數的代碼+[[Scopes]]

超級好理解了吧。

寧願用this也不用閉包

接下來讓咱們對閉包作些更深刻的解析，而後就知道爲何你們寧願用this也不用閉包了。

[[Scopes]]能用代碼訪問/複製/修改嗎？

不能。想不靠console，找到反作用在哪兒？不行。想深拷貝目前狀態？不行。想歷史回放？不行。debug？本身慢慢琢磨去吧！

閉包會把全部東西都存下來嗎？

{
  let localVar = 1;
  let unusedVar = 2;
  function dirtyFunc2() { return localVar++ }
}
console.dir(dirtyFunc2)
// ƒ dirtyFunc()
//   [[Scopes]]: Scopes[2]
//     0: Block
//       localVar: 1
//     1: Global {type: "global", name: "", object: Window}

至少Chrome是不會把全部東西都塞到閉包裏的。

那閉包對垃圾回收沒害處？

{
  let localVar = new Uint8Array(1000000000)
  function dirtyFunc3() { return localVar }
  function cleanFunc() { }
}
var dirtyFunc3 = null
console.dir(cleanFunc)
// ƒ cleanFunc()
//   [[Scopes]]: Scopes[2]
//     0: Block
//       localVar: Uint8Array(1000000000) [0, 0, …]
//     1: Global {type: "global", name: "", object: Window}

dirtyFunc3和cleanFunc共享同一個[[Scopes]]項，但這個[[Scopes]]項並不會由於dirtyFunc3被回收而動態更新！因此無辜的cleanFunc就只好一直帶着這1GB的垃圾，內存泄漏妥妥的。做爲強迫症，這是我討厭閉包最重要的緣由。

真的全部Javascript函數都是閉包嗎？

console.dir(alert)
// ƒ dirtyFunc()
//   [[Scopes]]: Scopes[0]
//     No properties

抱歉，我多是不太嚴謹。很明顯，瀏覽器自帶的原生API函數都是在【裏世界】聲明的，因此沒有詞法環境，天然[[Scopes]]是空的。它們不是閉包。

最佳實踐

寧願用this也不用閉包。緣由詳見個人上一篇文章（從過程式到函數式）。

個人相關文章

Javascript閉包：從過程式到函數式

以上全部代碼按Mozilla Public License, v. 2.0受權。
以上全部文字內容按CC BY-NC-ND 4.0受權。