快速理解js閉包

来源:http://www.cnblogs.com/zhengjialux/archive/2016/09/28/5916492.html
-Advertisement-
Play Games

什麼是閉包?先看一段代碼: ? 1 2 3 4 5 6 7 8 9 10 function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); //控制台輸出1,再輸出2 ? 1 2 3 4 5 6 ...


什麼是閉包?
先看一段代碼:

?
1 2 3 4 5 6 7 8 9 10 function a(){   var n = 0;   function inc() {     n++;     console.log(n);   }   inc();   inc(); } a(); //控制台輸出1,再輸出2

簡單吧。再來看一段代碼:

?
1 2 3 4 5 6 7 8 9 10 function a(){   var n = 0;   this.inc = function () {     n++;     console.log(n);   }; } var c = new a(); c.inc();  //控制台輸出1 c.inc();  //控制台輸出2

簡單吧。

什麼是閉包?這就是閉包!

有權訪問另一個函數作用域內變數的函數都是閉包。這裡 inc 函數訪問了構造函數 a 裡面的變數 n,所以形成了一個閉包。

再來看一段代碼:

?
1 2 3 4 5 6 7 8 9 10 11 function a(){   var n = 0;   function inc(){     n++;     console.log(n);   }   return inc; } var c = a(); c();  //控制台輸出1 c();  //控制台輸出2

看看是怎麼執行的:

var c = couter(),這一句 couter()返回的是函數 inc,那這句等同於 var c = inc;

c(),這一句等同於 inc();  註意,函數名只是一個標識(指向函數的指針),而()才是執行函數。

後面三句翻譯過來就是:  var c = inc;  inc();  inc();,跟第一段代碼有區別嗎? 沒有。

什麼是閉包?這就是閉包!

所有的教科書教程上都喜歡用最後一段來說明閉包,但我覺得這將問題複雜化了。這裡面返回的是函數名,沒看過譚浩強C/C++程式設計的同學可能一下子沒反應出帶不帶()的區別,也就是說這種寫法自帶一個陷阱。雖然這種寫法更顯高大上,但我還是喜歡將問題單一化,看看代碼 1 和代碼 2,你還會糾結函數的調用,你會糾結 n 的值嗎?

為啥要這樣寫?
我們知道,js的每個函數都是一個個小黑屋,它可以獲取外界信息,但是外界卻無法直接看到裡面的內容。將變數 n 放進小黑屋裡,除了 inc 函數之外,沒有其他辦法能接觸到變數 n,而且在函數 a 外定義同名的變數 n 也是互不影響的,這就是所謂的增強“封裝性”。

而之所以要用 return 返回函數標識 inc,是因為在 a 函數外部無法直接調用 inc 函數,所以 return inc 與外部聯繫起來,代碼 2 中的 this 也是將 inc 與外部聯繫起來而已。

常見的陷阱
看看這個:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 function createFunctions(){   var result = new Array();   for (var i=0; i < 10; i++){     result[i] = function(){       return i;     };   }   return result; } var funcs = createFunctions(); for (var i=0; i < funcs.length; i++){   console.log(funcs[i]()); }

乍一看,以為輸出 0~9 ,萬萬沒想到輸出10個10?

這裡的陷阱就是:函數帶()才是執行函數! 單純的一句 var f = function() { alert('Hi'); }; 是不會彈窗的,後面接一句 f(); 才會執行函數內部的代碼。上面代碼翻譯一下就是:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 var result = new Array(), i; result[0] = function(){ return i; }; //沒執行函數,函數內部不變,不能將函數內的i替換! result[1] = function(){ return i; }; //沒執行函數,函數內部不變,不能將函數內的i替換! ... result[9] = function(){ return i; }; //沒執行函數,函數內部不變,不能將函數內的i替換! i = 10; funcs = result; result = null;   console.log(i); // funcs[0]()就是執行 return i 語句,就是返回10 console.log(i); // funcs[1]()就是執行 return i 語句,就是返回10 ... console.log(i); // funcs[9]()就是執行 return i 語句,就是返回10

為什麼只垃圾回收了 result,但卻不收了 i 呢? 因為 i 還在被 function 引用著啊。好比一個餐廳,盤子總是有限的,所以服務員會去巡台回收空盤子,但還裝著菜的盤子他怎麼敢收? 當然,你自己手動倒掉了盤子裡面的菜(=null),那盤子就會被收走了,這就是所謂的記憶體回收機制。

至於 i 的值怎麼還能保留,其實從文章開頭一路讀下來,這應該沒有什麼可以糾結的地方。盤子裡面的菜,吃了一塊不就應該少一塊嗎?

總結一下
閉包就是一個函數引用另外一個函數的變數,因為變數被引用著所以不會被回收,因此可以用來封裝一個私有變數。這是優點也是缺點,不必要的閉包只會徒增記憶體消耗!另外使用閉包也要註意變數的值是否符合你的要求,因為他就像一個靜態私有變數一樣。閉包通常會跟很多東西混搭起來,接觸多了才能加深理解,這裡只是開個頭說說基礎性的東西。

本文鏈接:http://www.cnblogs.com/qieguo/p/5457040.html

以上就是本文的全部內容,希望對大家的學習有所幫助。


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

-Advertisement-
Play Games
更多相關文章
  • 此博客用來收錄一些常用的正則表達式,希望能不斷修正,不斷完善 ...
  • 宋體 SimSun黑體 SimHei微軟雅黑 Microsoft YaHei微軟正黑體 Microsoft JhengHei新宋體 NSimSun新細明體 PMingLiU細明體 MingLiU標楷體 DFKai-SB仿宋 FangSong楷體 KaiTi仿宋_GB2312 FangSong_GB2 ...
  • 一、浮動導航條 ...
  • ...
  • 使用 @ 定義變數變數可以做運算@color : #000;@width : 1000px;使用 & 表示當前類.box{&:hover{color : #000;}}css 可以嵌套ul{display : block;li{float : left;a{font-size : 18px;}}}繼 ...
  • 系列文章 -- ES6筆記系列 很久很久以前,在做Node.js聊天室,使用MongoDB數據服務的時候就遇到了多重回調嵌套導致代碼混亂的問題。 JS非同步編程有利有弊,Promise的出現,改善了這一格局,讓非同步編程表現出類似“同步式代碼”的形式,更好地體現了它的價值。 一、基本概念 1. Prom ...
  • 今天看到一篇文章關於清除浮動的,突然間腦袋短路了,咦?為什麼要清除浮動?原諒我的無知,搜了下原來是這樣,又倒騰出原來的筆記,唉,本來就有記錄啊,而且也會經常用到,用的久了連原理都忘了。恩,防止自己再犯同樣的錯誤,我還是自己總結整理出來吧!話不多說,代碼為證! 恩,各個瀏覽器運行的效果圖如下: 其中A ...
  • 封裝Encapsulation 如下代碼,這就算是封裝了 (function (windows, undefined) { var i = 0;//相對外部環境來說,這裡的i就算是封裝了 })(window, undefined); 繼承Inheritance (function (windows, ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...