Louis's blog
GitHub
GitHub
  • 瀏覽器運作原理
  • 閉包
  • this
  • arguments 和 array-like
  • apply、call、bind
  • 函式程式設計
  • 物件和原型
  • 原型鏈和繼承
  • ES6 和 Class
  • ES6 中新增的數據類型
  • ES6 語法糖
  • var、let、const
  • ES7~ES12
  • Strict Mode
  • 補充
  • Proxy 和 Reflect
  • Promise
  • Iterator
  • 生成器
  • async、await
  • Event loop
  • 錯誤處理
  • 模塊化
  • 套件管理工具
  • JSON
  • WebStorage
  • IndexDB
  • Cookie
  • BOM
  • DOM
  • 防抖(debounce)和節流(throttle)
  • Deep copy
  • 事件總線

閉包

維基百科中對閉包是這樣定義的:

  • 閉包(Closure),又稱詞法閉包 (Lexical Closure)或函數閉包 (Function Closure);
  • 是在支援頭等函式的程式語言中實現詞法繫結的一種技術;
  • 閉包在實現上是一個結構體,它儲存了一個函式(通常是其入口位址)和一個關聯的環境(相當於一個符號尋找表);
  • 閉包跟函式最大的不同在於,當捕捉閉包的時候,它的自由變數會在捕捉時被確定,這樣即便脫離了捕捉時的上下文,它也能照常執行。

以下是一段嚴格意義上的閉包:

function foo() {
  var name = 'louis'
  function bar() {
    console.log(name)
  }
  return bar
}

var fn = foo()
fn()

以上的程式碼在記憶題中執行的流程如下圖:

image-20211221193936316

閉包由兩個部分組合:函數+可以訪問的自由變數。

由於 fn 函數的存在導致 foo 函數作用域內的 name 變數不被銷毀,所以最後可以將 fn 函數進行置空:

function foo() {
  var name = 'louis'
  function bar() {
    console.log(name)
  }
  return bar
}

var fn = foo()
fn()

// 避免產生內存洩漏
fn = null
Edit this page
Last Updated:
Contributors: louis, louis61619
Prev
瀏覽器運作原理
Next
this