一篇文章搞懂閉包。

tinyq 發布于2019-08-23 14:01 / 1778人閱讀

摘要：如果非要用一句話定義閉包我更加認同你不知道的作者的一句話當函數可以記住并訪問所在的詞法作用域時，就產生了閉包。所以本文將會從閉包的應用場景入手，來印證的這句話。總結閉包的應用場景還有很多，可以說是隨處可見了。

直接進入主題，閉包是什么？

閉包是寫代碼過程產生的一種自然結果，而不是一種概念。

相比于一些概念性的解釋，更重要的是熟悉它的應用場景、及常見寫法。

如果非要用一句話定義閉包：
我更加認同《你不知道的javaScript》作者的一句話：當函數可以記住并訪問所在的詞法作用域時，就產生了閉包。

所以本文將會從閉包的應用場景入手，來印證kyle simpson的這句話。

列舉兩個常見應用場景

場景一：封裝函數的私有屬性和方法

//local變量是foo函數的私有屬性，只能通過bar函數來訪問。
function foo() {
  const local = 1
  function bar() {
    return local
  }
  return bar
}
let bar = foo()
console.log(bar()) // 1

bar函數記住了foo函數的詞法作用域，導致foo函數運行完后并不會被垃圾回收，我們可以通過bar函數盡情地訪問foo函數的作用域。

場景二：給10個li添加點擊事件

// 錯誤寫法：
function bindEvent() {
  var li = document.querySelectorAll("li")
  for(var i = 0; i < 10; i++) {
    li[i].addEventListener("click", function bar(){
      console.log(i)
    })
  }
}
bindEvent() //無論點擊哪個li，都會打印出10

錯誤的原因很明顯，10個bar函數中的i訪問的都是同一個i，這個i屬于foo函數。

// 正確寫法:
function bindEvent() {
  var li = document.querySelectorAll("li")
  for(var i = 0; i < 10; i++) {
    li[i].addEventListener("click", (function foo(j){
      return bar() {
        console.log(j)
      }
    }))(i)
  }
}
bindEvent()

bar函數記住了foo函數的詞法作用域,foo函數為每個bar函數選好了屬于它自己的i，等著bar去訪問就好啦。

總結：

閉包的應用場景還有很多，可以說是隨處可見了。
理解它的核心思想：函數可以記住并訪問所在的詞法作用域，才可以根據你自己的意愿來識別、擁抱和影響閉包的思維環境。

GPU云服務器云服務器能搞懂先搞懂性搞懂一天搞懂深度學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99944.html

搞懂閉包

摘要：此時閉包函數的作用域鏈得以保存，不會被垃圾回收機制所回收。執行執行完畢，返回總結閉包的原理，就是把閉包函數的作用域鏈保存了下來。原文：搞懂閉包 | AlloyTeam作者：TAT.yaoyao 閉包這個概念是前端工程師必須要深刻理解的，但是網上確實有一些文章會讓初學者覺得晦澀難懂，而且閉包的文章描述不一。本文面向初級的程序員，聊一聊我對閉包的理解。當然如果你看到閉包聯想不到作用域鏈...

masturbator 2019-08-26 10:14 評論0 收藏0
搞懂JavaScript引擎運行原理

摘要：同步一次執行一件事，同步引擎一次只執行一行，是同步的。調用函數將其推入堆棧并從函數返回將其彈出堆棧。執行上下文當函數放入到調用堆棧時由創建的環境。執行結果它會立即被推到回調隊列，但它仍然會等待調用堆棧為空才會執行。為了保證可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！一些名詞 JS引擎 — 一個讀取代碼并運行的引擎，沒有單一的J...

lastSeries 2019-08-23 18:15 評論0 收藏0
作用域閉包，你真的懂了嗎？

摘要：曾幾何時，閉包好像就是一個十分難以捉摸透的東西，看了很多文章，對閉包都各有說法，以致讓我十分暈，什么內部變量外部變量的，而且大多數都只描述一個過程，沒有給閉包的定義，最后，舉幾個例子，告訴你這就是閉包。曾幾何時，閉包好像就是一個十分難以捉摸透的東西，看了很多文章，對閉包都各有說法，以致讓我十分暈，什么內部變量、外部變量的，而且大多數都只描述一個過程，沒有給閉包的定義，最后，舉幾個例子...

yangrd 2019-08-20 12:04 評論0 收藏0
vue.js源碼 - 剖析observer,dep,watch三者關系如何具體的實現數據雙向綁定

摘要：雙向數據綁定的核心和基礎是其內部真正參與數據雙向綁定流程的主要有和基于和發布者訂閱者模式，最終實現數據的雙向綁定。在這里把雙向數據綁定分為兩個流程收集依賴流程依賴收集會經過以上流程，最終數組中存放列表，數組中存放列表。 Vue雙向數據綁定的核心和基礎api是Object.defineProperty,其內部真正參與數據雙向綁定流程的主要有Obderver、Dep和Watcher,基于d...

mo0n1andin 2019-08-22 16:17 評論0 收藏0
前端基礎進階（四）：詳細圖解作用域鏈與閉包

摘要：之前一篇文章我們詳細說明了變量對象，而這里，我們將詳細說明作用域鏈。而的作用域鏈，則同時包含了這三個變量對象，所以的執行上下文可如下表示。下圖展示了閉包的作用域鏈。其中為當前的函數調用棧，為當前正在被執行的函數的作用域鏈，為當前的局部變量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初學JavaScrip...

aikin 2019-08-21 18:29 評論0 收藏0