javascript,jquery閉包概念分析
其實(shí)javascript里的閉包概念很簡(jiǎn)單,就是函數(shù)用到外部變量,不需要傳參就可以獲取。
舉個(gè)例子:
<script>
var sMessage = "Hello world";
function sayHello(){
alert(sMessage);
}
sayHello();
addNumber(1,2);
var iBaseNum = 10;
function addNumber(iNum1, iNum2) {
function doAddition() {
alert(iNum1 + iNum2 + iBaseNum);
}
return doAddition();
}
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
c();
</script>
第一個(gè)函數(shù)sayHello沒有傳參數(shù),直接利用了sMessage變量,這個(gè)就叫做閉包。
第二個(gè)函數(shù)復(fù)雜點(diǎn),里面有個(gè)doAddition也是閉包函數(shù),他不需要參數(shù),直接在執(zhí)行環(huán)境中獲取iNum1,iNum2,還有外部變量 iBaseNum。
第三個(gè)函數(shù) 是能保護(hù) i變量的訪問(wèn),并且一直保存i在內(nèi)存中,可以一直增加。(閉包的一個(gè)經(jīng)典用法)
jquery中閉包也差不多,先給個(gè)例子
你也許會(huì)問(wèn)
(function($){
$("div p").click(function(){alert("cssrain!")});
})(jQuery); //一個(gè)閉包
這是什么寫法???
別急,我也是請(qǐng)教了upc ,才稍微懂了點(diǎn)。
這里面的$只是形參,但jquery是全局變量,所以不需要調(diào)用該函數(shù)就會(huì)自動(dòng)執(zhí)行,或者分兩步
就是轉(zhuǎn)化成正常的函數(shù),先寫函數(shù),后調(diào)用。
如下所示
其實(shí):
(function($){
$("div p").click(。。。);
})(jQuery);
就是等于
function tempFunction($){ //創(chuàng)建一個(gè)以$為形參的函數(shù)
$("div p").click(....);
}
TempFunction(jQuery); //傳入實(shí)參jQuery執(zhí)行函數(shù).
干脆直接這么寫 ,算了
(function(cssrain){
cssrain("div p").click(.... );
})(jQuery); //一個(gè)閉包
閉包的基本寫法:
(function(){do someting})();
//這個(gè)你就理解為定義一個(gè)匿名函數(shù)并立即執(zhí)行
帶參數(shù)的話就這樣:
(function(形參){do someting})(實(shí)參);
另外
(function(){var upc="i am upc"})();
alert(upc);
會(huì)提示undefined。
因?yàn)殚]包后,里面的變量就相當(dāng)于局部了。
閉包的好處:
不增加額外的全局變量,
執(zhí)行過(guò)程中所有變量都是在匿名函數(shù)內(nèi)部。
上面的例子不是很好,跟javascript的閉包有點(diǎn)混淆,但這確實(shí)也是jquery中的一種閉包。只不過(guò)經(jīng)過(guò)jquery的加工罷了。
如過(guò)有什么不對(duì),大家互相討論,我也是初學(xué)者,還有很多不懂得地方。
相關(guān)文章
js es6系列教程 - 新的類語(yǔ)法實(shí)戰(zhàn)選項(xiàng)卡(詳解)
下面小編就為大家?guī)?lái)一篇js es6系列教程 - 新的類語(yǔ)法實(shí)戰(zhàn)選項(xiàng)卡(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript實(shí)現(xiàn)音樂(lè)導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)音樂(lè)導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
javascript與css3動(dòng)畫結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動(dòng)畫來(lái)實(shí)現(xiàn)一些占用資源更少,更優(yōu)化的動(dòng)畫效果,思路十分巧妙,這里推薦給小伙伴們參考下。2015-03-03
Webpack設(shè)置環(huán)境變量的一些誤區(qū)詳解
這篇文章主要給大家介紹了關(guān)于Webpack設(shè)置環(huán)境變量的一些誤區(qū),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
本文主要介紹了JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序,結(jié)合實(shí)例代碼進(jìn)行了詳細(xì)的講解,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03
百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例
這篇文章主要介紹了百度判斷手機(jī)終端并自動(dòng)跳轉(zhuǎn)js代碼及使用實(shí)例,需要的朋友可以參考下2014-06-06
前端js?sm2實(shí)現(xiàn)加密簡(jiǎn)單代碼舉例
在Vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)加密,首先需要安裝SM2加密庫(kù),如js-sm2或sm-crypto,通過(guò)npm或yarn進(jìn)行安裝后,在Vue組件或文件中引入該庫(kù),并使用其提供的加密、解密功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)
這篇文章主要介紹了js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動(dòng)端的div拖動(dòng)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動(dòng)端的div拖動(dòng)效果實(shí)例,具有一定的參考價(jià)值,有需要的可以了解一下。2016-12-12

