如何才能通俗易懂的解釋js裡面的‘閉包’?

来源:https://www.cnblogs.com/ITCodeMonkey/archive/2019/10/14/11672557.html
-Advertisement-
Play Games

看了知乎上的話題 如何才能通俗易懂的解釋javascript裡面的‘閉包’?,受到一些啟發,因此結合實例將回答中幾個精要的答案做一個簡單的分析以便加深理解。 1. "閉包就是跨作用域訪問變數。" 【示例一】 在 getName 函數中獲取 name,首先在 getName 函數的作用域中查找 nam ...


看了知乎上的話題 如何才能通俗易懂的解釋javascript裡面的‘閉包’?,受到一些啟發,因此結合實例將回答中幾個精要的答案做一個簡單的分析以便加深理解。

1. "閉包就是跨作用域訪問變數。" 

【示例一】

var name = 'wangxi'
function user () {
  // var name = 'wangxi'
  function getName () {
    console.log(name)
  }
  getName()
}
user() // wangxi

在 getName 函數中獲取 name,首先在 getName 函數的作用域中查找 name,未找到,進而在 user 函數的作用域中查找,同樣未找到,繼續向上回溯,發現在全局作用域中存在 name,因此獲取 name 值並列印。這裡很好理解,即變數都存在在指定的作用域中,如果在當前作用中找不到想要的變數,則通過作用域鏈向在父作用域中繼續查找,直到找到第一個同名的變數為止(或找不到,拋出 ReferenceError 錯誤)。這是 js 中作用域鏈的概念,即子作用域可以根據作用域鏈訪問父作用域中的變數,那如果相反呢,在父作用域想訪問子作用域中的變數呢?——這就需要通過閉包來實現。

【示例二】

function user () {
  var name = 'wangxi'
  return function getName () {
    return name
  }
}

var userName = user()()
console.log(userName) // wangxi

分析代碼我們知道,name 是存在於 user 函數作用域內的局部變數,正常情況下,在外部作用域(這裡是全局)中是無法訪問到 name 變數的,但是通過閉包(返回一個包含變數的函數,這裡是 getName 函數),可以實現跨作用域訪問變數了(外部訪問內部)。因此上面的這種說法完整的應該理解為:

閉包就是跨作用域訪問變數 —— 內部作用域可以保持對外部作用域中變數的引用從而使得(更)外部作用域可以訪問內部作用域中的變數。(還是不理解的話看下一條分析)

 

2. "閉包:在爺爺的環境中執行了爸爸,爸爸中返回了孫子,本來爸爸被執行完了,爸爸的環境應該被清除掉,但是孫子引用了爸爸的環境,導致爸爸釋放不了。這一坨就是閉包。簡單來講,閉包就是一個引用了父環境的對象,並且從父環境中返回到更高層的環境中的一個對象。"

這個怎麼理解呢?首先看下方代碼:

function user () {
  var name = 'wangxi'
  return name
}

var userName = user()
console.log(userName) // wangxi

:這是閉包嗎?

:當然不是。首先要明白閉包是什麼。雖然這裡形式上看好像也是在全局作用域下訪問了 user 函數內的局部變數 name,但是問題是,user 執行完,name 也隨之被銷毀了,即函數內的局部變數的生命周期僅存在於函數的聲明周期內,函數被銷毀,函數內的變數也自動被銷毀。

但是使用閉包就相反,函數執行完,生命周期結束,但是通過閉包引用的外層作用域內的變數依然存在,並且將一直存在,直到執行閉包的的作用域被銷毀,這裡的局部變數才會被銷毀(如果在全局環境下引用了閉包,則只有在全局環境被銷毀,比如程式結束、瀏覽器關閉等行為時才會銷毀閉包引用的作用域)。因此為了避免閉包造成的記憶體損耗,建議在使用閉包後手動銷毀。還是上面示例二的例子,稍作修改:

function user () {
  var name = 'wangxi'
  return function getName () {
    return name
  }
}

var userName = user()() // userName 變數中始終保持著對 name 的引用
console.log(userName) // wangxi

userName = null // 銷毀閉包,釋放記憶體

【為什麼 user()() 是兩個括弧:執行 user()  返回的是 getName 函數,要想獲得 name 變數,需要對返回的 getName 函數執行一次,所以是 user()()】

根據觀點2,分析一下代碼:在全局作用域下創建了 userName 變數(爺爺),保存了對 user 函數最終返回結果的引用(即局部變數 name 的值),執行 user()()(爸爸),返回了 name(孫子),正常情況下,在執行了 user()() 之後,user 的環境(爸爸)應該被清除掉,但是因為返回的結果 name(孫子)引用了爸爸的環境(因為 name 本來就是存在於 user 的作用域內的),導致 user 的環境無法被釋放(會造成記憶體損耗)。

那麼【"閉包就是一個引用了父環境的對象,並且從父環境中返回到更高層的環境中的一個對象。"】如何理解?

我們換個說法:如果一個函數引用了父環境中的對象,並且在這個函數中把這個對象返回到了更高層的環境中,那麼,這個函數就是閉包。

還是看上面的例子:

getName 函數中引用了 user(父)環境中的對象(變數 name),並且在函數中把 name 變數返回到了全局環境(更高層的環境)中,因此,getName 就是閉包。

3. "JavaScript中的函數運行在它們被定義的作用域里,而不是它們被執行的作用域里。" ——《JavaScript權威指南》

這句話對閉包中對變數的引用的理解很有幫助。我們看下麵的例子:

var name = 'Schopenhauer'
function getName () {
  console.log(name)
}

function myName () {
  var name = 'wangxi'
  getName()
}

myName() // Schopenhauer

如果執行 myName() 輸出的結果和你想象的不一樣,你就要再回去看看上面說的這句話了,

JavaScript 中的函數運行在它們被定義的作用域里,而不是它們被執行的作用域里

執行 myName,函數內部執行了 getName,而 getName 是在全局環境下定義的,因此儘管在 myName 中定義了變數 name,對getName 的執行並無影響,getName 中列印的依然是全局作用域下的 name。

我們稍微改一下代碼:

var name = 'Schopenhauer'

function getName () {
  var name = 'Aristotle'
   var intro = function() {  // 這是一個閉包
      console.log('I am ' + name)
   }
   return intro
}

function showMyName () {
   var name = 'wangxi'
   var myName = getName()
   myName()
}

showMyName() // I am Aristotle

結果和你想象的一樣嗎?結果留作聰明的你自己分析~

 

以上就是對 js 中閉包的理解,如果有誤,歡迎指正。最後引用一段知乎問題下關於閉包概念的一個回答。

作者:蕭瀟 鏈接:https://www.zhihu.com/question/34547104/answer/197642727

什麼是閉包?

簡單來說,閉包是指可以訪問另一個函數作用域變數的函數,一般是定義在外層函數中的內層函數。

為什麼需要閉包?

局部變數無法共用和長久的保存,而全局變數可能造成變數污染,所以我們希望有一種機制既可以長久的保存變數又不會造成全局污染。

特點

  • 占用更多記憶體
  • 不容易被釋放

何時使用?

變數既想反覆使用,又想避免全局污染

如何使用?

  1. 定義外層函數,封裝被保護的局部變數。
  2. 定義內層函數,執行對外部函數變數的操作。
  3. 外層函數返回內層函數的對象,並且外層函數被調用,結果保存在一個全局的變數中。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 寫了一個自定義的UIView,其中包含代理 <!--5f39ae17-8c62-4a45-bc43-b32064c9388a:W3siYmxvY2tJZCI6IjIwMTAtMTU3MTAzNjc3OTIyNiIsImJsb2NrVHlwZSI6ImltYWdlIiwic3R5bGVzIjp7ImJ ...
  • 「柒留言」更新的換國旗頭像小功能,獲取頭像顯示模糊... 1、頭像模糊 國慶之前,更新了「柒留言」小程式加國旗頭像的小功能,但是頭像模糊這個坑我在發佈新版之前還沒解決。 一直以為是代碼出了問題,各種搜索,巧的是正好也有類似的答案,然後我就被帶進鍋里了,弄了半天還是模糊,無奈之下弄了個用戶自行上傳圖片 ...
  • 直接貼代碼吧: html代碼 css代碼: 實現效果: 知識點總結:1.uli li橫向排列可使用float,之前經常使用diplay:flex;這個可能會導致一些問題,後面遇到再添上 2.父元素:hover >子元素{ dispay:block/none}:通過父元素hover屬性控制子元素顯示與 ...
  • css 效果 ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
  • 初識Nodejs Node.js的誕生 作者Ryan Dahl 瑞恩·達爾 2004 紐約 讀數學博士 2006 退學到智利 轉向開發 2009.5對外宣佈node項目,年底js大會發表演講 2010 加入Joyent雲計算公司 2012 退居幕後 作者Ryan Dahl 瑞恩·達爾 2004 紐約 ...
  • 通配符選擇器 * 與任何元素匹配 派生選擇器: 後代選擇器(包含選擇器):後代選擇器可以選擇作為元素後代的元素 A B 對A元素中的B元素應用樣式 後代選擇器中兩個元素間的層次間隔可以是無限的(也可A B C) ,以上 A B 應用樣式會選擇從A繼承的所有B元素 子元素選擇器:只選擇某個元素的子元素 ...
  • 首發於微信公眾號《前端成長記》,寫於 2019.10.12 導讀 有句老話說的好,好記性不如爛筆頭。人生中,總有那麼些東西你願去執筆寫下。 本文旨在把整個搭建的過程和遇到的問題及解決方案記錄下來,希望能夠給你帶來些許幫助。 本文涉及的主要技術: "Vue3.0 Composition API" "G ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...