js的閉包概念

来源:http://www.cnblogs.com/ghlucky/archive/2016/08/06/5745113.html
-Advertisement-
Play Games

一、變數的作用域要懂得閉包,起首必須懂得Javascript特別的變數作用域。變數的作用域無非就是兩種:全局變數和局部變數。Javascript說話的特別之處,就在於函數內部可以直接讀取全局變數。Js代碼 var n=999; function f1(){ alert(n); } f1(); // ...


一、變數的作用域
要懂得閉包,起首必須懂得Javascript特別的變數作用域。
變數的作用域無非就是兩種:全局變數和局部變數。
Javascript說話的特別之處,就在於函數內部可以直接讀取全局變數。

Js代碼
  var n=999;
  function f1(){
    alert(n);
  }
  f1(); // 999
另一方面,在函數外部天然無法讀取函數內的局部變數。
Js代碼
  function f1(){
    var n=999;
  }
  alert(n); // error
這裡有一個處所須要重視,函數內部聲明變數的時候,必然要用var。若是不用的話,你實際上聲明瞭一個全局變數!
Js代碼
  function f1(){
    n=999;
  }
  f1();
  alert(n); // 999
--------------------------------------------------------------------------------------------------------
二、如何從外部讀取局部變數?
出於各種原因,我們有時要獲得函數內的局部變數。然則,前面已經說過了,正常情況下,這是辦不到的,只有經由過程變通才能實現。
那就是在函數的內部,再定義一個函數。
Js代碼
  function f1(){
    n=999;
    function f2(){
      alert(n); // 999
    }
  }
在上方的代碼中,函數f2就被包含在函數f1內部,這時f1內部的所有局部變數,對f2都是可見的。然則反過來就不可,f2內部的局部變數,對f1 就是不成見的。這就是Javascript說話特有的“鏈式作用域”佈局(chain scope),
子對象會一級一級地向上尋找所有父對象的變數。所以,父對象的所有變數,對子對象都是可見的,反之則不成立。
既然f2可以讀取f1中的局部變數,那麼只要把f2作為返回值,我們不就可以在f1外部讀取它的內部變數了嗎!

Js代碼
  function f1(){
    n=999;
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
--------------------------------------------------------------------------------------------------------
三、閉包的概念
上一節代碼中的f2函數,就是閉包。
各類專業文獻上的“閉包”(closure)定義很是抽象,很丟臉懂。我的懂得是,閉包就是可以或許讀取其他函數內部變數的函數。
因為在Javascript說話中,只有函數內部的子函數才幹讀取局部變數,是以可以把閉包簡單懂得成“定義在一個函數內部的函數”。
所以,在本質上,閉包就是將函數內部和函數外部連接起來的一座橋梁。
--------------------------------------------------------------------------------------------------------b
四、閉包的用處
閉包可以用在很多處所。它的最大用處有兩個,一個是前面提到的可以讀取函數內部的變數,另一個就是讓這些變數的值始終對峙在記憶體中。
怎麼來懂得這句話呢?請看下麵的代碼。

Js代碼
  function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
  nAdd();
  result(); // 1000
在這段代碼中,result實際上就是閉包f2函數。它一共運行了兩次,第一次的值是999,第二次的值是1000。這就說明,函數f1中的局部變數n一向保存在記憶體中,並沒有在f1調用後被主動清除。
為什麼會這樣呢?原因就在於f1是f2的父函數,而f2被賦給了一個全局變數,這導致f2始終在記憶體中,而f2的存在依附於f1,是以f1也始終在記憶體中,不會在調用停止後,被垃圾收受接管機制(garbage collection)收受接管。
這段代碼中另一個值得重視的一處,就是“nAdd=function(){n+=1}”這一行,起首在nAdd前面沒有應用var關鍵字,是以 nAdd是一個全局變數,而不是局部變數。其次,nAdd的值是一個匿名函數(anonymous function),而這個
匿名函數本身也是一個閉包,所以nAdd相當於是一個setter,可以在函數外部對函數內部的局部變數進行操縱。
--------------------------------------------------------------------------------------------------------
五、應用閉包的重視點
1)因為閉包會使得函數中的變數都被保存在記憶體中,記憶體消費很大,所以不要濫用閉包,不然會造成網頁的性能題目,在IE中可能導致記憶體泄漏。解決辦法是,在退出函數之前,將不應用的局部變數全部刪除。
2)閉包會在父函數外部,改變父函數內部變數的值。所以,若是你把父函數當做難象(object)應用,把閉包算作它的公用辦法(Public Method),把內部變數算作它的私有屬性(private value),這時必然要警惕,不要隨便
改變父函數內部變數的值。


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

-Advertisement-
Play Games
更多相關文章
  • 最近想用C++在windows下實現一個基本的圖像查看器功能,目前只想到了使用GDI或OpenGL兩種方式。由於實在不想用GDI的API了,就用OpenGL的方式實現了一下基本的顯示功能。用GDAL讀取圖像,這樣就能與圖像格式無關。OpenGL的glDrawPixels()函數也能實現圖像顯示,但是... ...
  • 數組的定義: JavaScript 中的數組是一種特殊的對象,用來表示偏移量的索引是該對象的屬性,索引可能是整數。然而,這些數字索引在內部被轉換為字元串類型,這是因為 JavaScript 對象中的屬性名必須是字元串。在內部被歸類為數組。由於 Array 在 JavaScript 中被當作對象,因此 ...
  • 快速排序,又稱劃分交換排序。以分治法為策略實現的快速排序演算法。 本文主要要談的是利用javascript實現in-place思想的快速排序 分治法: 在電腦科學中,分治法是建基於多項分支遞歸的一種很重要的演算法範式。字面上的解釋是“分而治之”,就是把一個複雜的問題分成兩個或更多的相同或相似的子問題, ...
  • 看懂此文,不再困惑於 JS 中的事件設計 今天剛在關註的微信公眾號看到的文章,關於JS事件的,寫的很詳細也很容易理解,相關的知識點都有總結到,看完就有種很舒暢的感覺,該串起來的知識點都串起來了。反正一位元組:爽。 作者:aitangyong 鏈接:blog.csdn.net/aitangyong/ar ...
  • 在學習javascript中,如果在事件的使用上出現一些反差效果,不良效果,如滑鼠的移入移出時,顯示你所需要的內容, 但就是沒有出現,然而你不斷的檢查代碼,逐個代碼查錯,還在瀏覽器的調試工具中調試都沒有發現錯誤,沒有看到你所 想要的錯誤,那麼這個時候你要判斷一下是不是冒泡事件帶來的不良效果了,不過在 ...
  • HTML5 History API提供了一種功能,能讓開發人員在不刷新整個頁面的情況下修改站點的URL。這個功能很有用,例如通過一段JavaScript代碼局部載入頁面的內容,你希望通過改變當前頁面的URL來反應出頁面內容的變化,這時該功能可以派上用場。 舉個例子,當用戶從首頁進入幫助頁面時,我們通 ...
  • 非行間樣式案例 IE獲取非行間樣式 Chrome/FF獲取非行間樣式 我的相容性寫法 我的擴展性寫法 ==註意== 以上只能獲取非行間樣式,不能設置非房間樣式的值。 ...
  • 其實,圖片預覽功能非常地常見。很意外,之前遇到上傳圖片的時候都不需要預覽,也一直沒有去實現過。現在手上的項目又需要有圖片預覽功能,所以就動手做了一個小插件。在此分享一下思路。 一、實現圖片預覽的一些方法。 瞭解了一下,其實方法都是大同小異的。大概有以下幾種方式: ①訂閱input[type=file ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...