javascript閉包功能與用法實例分析
本文實例講述了javascript閉包功能與用法。分享給大家供大家參考,具體如下:
理解閉包
閉包這個東西,確實是很麻煩。之前我自己的理解也是有一點誤差,所以今天將文章修改修改,爭取將自己的理解進一步準確化。
閉包說得通熟易懂一點,就是指有權訪問另一個函數(shù)作用域的變量的函數(shù)。創(chuàng)建閉包的常見方式,就是在一個函數(shù)內(nèi)部創(chuàng)建另外一個函數(shù),并返回。
我們這里舉一個例子來說明,首先我們在函數(shù)f1內(nèi)部定義一個函數(shù)f2。
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
f2可以訪問f1的作用域,反過來就不行了?,F(xiàn)在我們想訪問f1中的n,在外層卻訪問不到,怎么辦呢?將f2作為f1的返回值就可以了:
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
這個就是閉包。
其實也很簡單,那么閉包有什么用呢?
閉包的使用
之前的自己只知道閉包的概念,卻并不知道其存在的價值和意義。直到自己在項目中遇到類似的問題后,才發(fā)現(xiàn)只有閉包才能解決的情況。
閉包是使用可以帶來以下好處:
1. 希望一個變量長期駐扎在內(nèi)存中
2. 避免全局變量的污染
3. 私有成員的存在
我們剛才說到過,閉包可以讀取到函數(shù)內(nèi)部的變量,這是由于閉包后函數(shù)的堆棧不會釋放,也就是說這些值始終保持在內(nèi)存中。這是一個優(yōu)點,也是一個缺點。
我們可以通過閉包來實現(xiàn)一個計數(shù)器,而不用擔心全局變量的污染:
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
可以看到n一直存儲在內(nèi)存中,并沒有在f1調(diào)用后被自動清除。
我們再來看看如何通過閉包來模擬JavaScript中的私有成員:
var aaa = (function(){
var a = 1;
function bbb(){
a++;
alert(a);
}
function ccc(){
a++;
alert(a);
}
return {
b:bbb, //json結構
c:ccc
}
})();
aaa.b(); //2
aaa.c(); //3
這樣就可以提供指定的變量供外界訪問了。
閉包解決的問題
這是一個很常見的問題,就是利用javascript處理循環(huán)的時候,索引i的值不能有效的利用:

這里改成如下格式,形成10個閉包來解決即可:

更多關于JavaScript相關內(nèi)容可查看本站專題:《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
- 通俗易懂地解釋JS中的閉包
- JS繼承與閉包及JS實現(xiàn)繼承的三種方式
- 淺談JavaScript作用域和閉包
- JS閉包的幾種常見形式實例詳解
- JS實現(xiàn)閉包中的沙箱模式示例
- JavaScript閉包的簡單應用
- 通過示例徹底搞懂js閉包
- JavaScript閉包和回調(diào)詳解
- 淺談JS封閉函數(shù)、閉包、內(nèi)置對象
- JavaScript閉包_動力節(jié)點Java學院整理
- 深入理解Javascript中的作用域鏈和閉包
- JS閉包可被利用的常見場景小結
- 利用js的閉包原理做對象封裝及調(diào)用方法
- JavaScript中閉包的詳解
- JS閉包用法實例分析
- 圖解Javascript——作用域、作用域鏈、閉包
- 輕松理解JavaScript閉包
- js中的閉包學習心得
相關文章
獲取元素距離瀏覽器周邊的位置的方法getBoundingClientRect
本文為大家介紹下如何使用getBoundingClientRect()方法獲取元素距離瀏覽器周邊的位置,有類似問題的朋友可以參考下哈,希望對你學習js有所幫助2013-04-04
javascript數(shù)組的擴展實現(xiàn)代碼集合
非常不錯的javascript數(shù)據(jù)功能增強函數(shù)2008-06-06
JavaScript offset實現(xiàn)鼠標坐標獲取和窗口內(nèi)模塊拖動
在頁面開發(fā)時我們少不了各種鼠標交互動作,那么JavaScript中如何實現(xiàn)鼠標坐標獲取和窗口內(nèi)模塊拖動,本文就詳細的介紹一下,感興趣的可以了解一下2021-05-05
electron-builder 的基本使用及electron打包步驟
electron-builder 作為一個用于 Electron 應用程序打包的工具,需要下載并使用 Electron 運行時來創(chuàng)建可執(zhí)行文件,這篇文章主要介紹了electron-builder 的基本使用,需要的朋友可以參考下2023-12-12
JavaScript組合模式Composite Pattern
這篇文章主要介紹了學習理解JavaScript組合模式,組合模式及Composite Pattern又叫部分整體模式,是用于把一組相似的對象當作一個單一的對象2022-04-04
前端在線預覽PDF文件三種實現(xiàn)方式(兼容移動端)
這篇文章主要介紹了前端在線預覽PDF文件三種實現(xiàn)方式的相關資料,分別是使用微軟在線預覽地址、直接使用window.open打開文檔鏈接以及使用PDF.js,PDF.js方法穩(wěn)定,適用于大多數(shù)文件,每種方法都給出了詳細的代碼示例,需要的朋友可以參考下2025-02-02

