js中的閉包理解

来源:http://www.cnblogs.com/lsongyang/archive/2017/05/16/6859590.html
-Advertisement-
Play Games

閉包是一個比較抽象的概念,尤其是對js新手來說.書上的解釋實在是比較晦澀,對我來說也是一樣. 但是他也是js能力提升中無法繞過的一環,幾乎每次面試必問的問題,因為在回答的時候.你的答案的深度,對術語的理解以及js內部解釋器的運作方式的描述,都是可以看出你js實際水平的.即使你沒答對,也能讓考官對你的 ...


閉包是一個比較抽象的概念,尤其是對js新手來說.書上的解釋實在是比較晦澀,對我來說也是一樣.

  但是他也是js能力提升中無法繞過的一環,幾乎每次面試必問的問題,因為在回答的時候.你的答案的深度,對術語的理解以及js內部解釋器的運作方式的描述,都是可以看出你js實際水平的.即使你沒答對,也能讓考官對你的水平有個評估.那麼我先來說說我對js中的閉包的理解.

  閉包是很多語言都具備的特性,在js中,閉包主要涉及到js的幾個其他的特性:作用域鏈,垃圾(記憶體)回收機制,函數嵌套,等等.

  在理解閉包以前.最好能先理解一下作用域鏈的含義,簡單來說,作用域鏈就是函數在定義的時候創建的,用於尋找使用到的變數的值的一個索引,而他內部的規則是,把函數自身的本地變數放在最前面,把自身的父級函數中的變數放在其次,把再高一級函數中的變數放在更後面,以此類推直至全局對象為止.當函數中需要查詢一個變數的值的時候,js解釋器會去作用域鏈去查找,從最前面的本地變數中先找,如果沒有找到對應的變數,則到下一級的鏈上找,一旦找到了變數,則不再繼續.如果找到最後也沒找到需要的變數,則解釋器返回undefined.

  瞭解了作用域鏈,我們再來看看js的記憶體回收機制,一般來說,一個函數在執行開始的時候,會給其中定義的變數劃分記憶體空間保存,以備後面的語句所用,等到函數執行完畢返回了,這些變數就被認為是無用的了.對應的記憶體空間也就被回收了.下次再執行此函數的時候,所有的變數又回到最初的狀態,重新賦值使用.但是如果這個函數內部又嵌套了另一個函數,而這個函數是有可能在外部被調用到的.並且這個內部函數又使用了外部函數的某些變數的話.這種記憶體回收機制就會出現問題.如果在外部函數返回後,又直接調用了內部函數,那麼內部函數就無法讀取到他所需要的外部函數中變數的值了.所以js解釋器在遇到函數定義的時候,會自動把函數和他可能使用的變數(包括本地變數和父級和祖先級函數的變數(自由變數))一起保存起來.也就是構建一個閉包,這些變數將不會被記憶體回收器所回收,只有當內部的函數不可能被調用以後(例如被刪除了,或者沒有了指針),才會銷毀這個閉包,而沒有任何一個閉包引用的變數才會被下一次記憶體回收啟動時所回收.

也就是說,有了閉包,嵌套的函數結構才可以運作,這也是符合我們的預期的.然後,閉包還有一些特性,卻往往讓程式員覺得很難理解.

看看下麵一段代碼.

複製代碼
var result=[];
function foo(){
    var i= 0;
    for (;i<3;i=i+1){
        result[i]=function(){
            alert(i)
        }
    }
};
foo();
result[0](); // 3
result[1](); // 3
result[2](); // 3
複製代碼

這段代碼中,程式員希望foo函數中的變數i被內部迴圈的函數使用,並且能分別獲得他們的索引,而實際上,只能獲得該變數最後保留的值,也就是說.閉包中所記錄的自由變數,只是對這個變數的一個引用,而非變數的值,當這個變數被改變了,閉包里獲取到的變數值,也會被改變.

解決的方法之一,是讓內部函數在迴圈創建的時候立即執行,並且捕捉當前的索引值,然後記錄在自己的一個本地變數里.然後利用返回函數的方法,重寫內部函數,讓下一次調用的時候,返回本地變數的值,改進後的代碼:

複製代碼
var result=[];
function foo(){
    var i= 0;
    for (;i<3;i=i+1){
        result[i]=(function(j){
            return function(){
                alert(j);
            };
        })(i);
    }
};
foo();
result[0](); // 0
result[1](); // 1
result[2](); // 2
複製代碼
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 綜合類 前端知識體系 前端知識結構 Web前端開發大系概覽 Web前端開發大系概覽-中文版 Web Front-end Stack v2.2 免費的編程中文書籍索引 前端書籍 前端免費書籍大全 前端知識體系 免費的編程中文書籍索引 智能社 - 精通JavaScript開發 重新介紹 JavaScri ...
  • 界面設計簡潔,沉浸式的閱讀體驗,可以按分類/文章/用戶瀏覽,在文章頁顯示用戶評論,圖片使用懶載入模式,總之,實現了你看帖所需要的一切。項目基於Vue全家桶,適配移動端,有完善的文檔註釋。 ...
  • jQuery版本:2.0.3 DOM載入有關的擴展 isReady:DOM是否載入完(內部使用) readyWait:等待多少文件的計數器(內部使用) holdReady():推遲DOM觸發 ready():準備DOM觸發。 jQuery.ready.promise=function(){}; 監聽 ...
  • 輪播+滑動+返回頂部效果,插件 ...
  • 在js中的類型檢測目前我所知道的是三種方式,分別有它們的應用場景: 1、typeof:主要用於檢測基本類型. 2、instanceof:主要用於檢測引用類型(左邊是對象,右邊是函數.根據對象的原形鏈往上找,如果原形鏈上有右邊函數.prototype,返回true;否則返回false). var ob ...
  • 原文參考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ1.開發移動端,頭部必要的配置<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" ...
  • // 去掉a,input,button點擊時藍色外邊框和灰色半透明a,button,input,optgroup,select,textare{ -webkit-tap-highlight-color:rgba(0,0,0,0);}// 禁止長按顯示菜單欄a,img{ -webkit-touch-c ...
  • PhantomJS是一款webkit內核的headelsss的瀏覽器,使用QtWebkit, 支持DOM操作、CSS選擇器、JSON、Canvas和SVG,可以模擬瀏覽器的服務。 安裝 mac同學使用 brew install casperjs 可以做什麼? 1. Headless的網站集成測試 可 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...