javascript,jquery閉包概念分析
更新時(shí)間:2010年06月19日 00:03:45 作者:
偶爾聽人說javascript閉包,讓我聯(lián)想起以前學(xué)編譯原理和數(shù)字邏輯里講的閉包,以前上課講的閉包很難懂,而且含有遞歸的意思在里面,現(xiàn)在不想再查看里面的閉包概念。
但javascript我是經(jīng)常要用,所以是要懂這里面的概念。
其實(shí)javascript里的閉包概念很簡單,就是函數(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變量的訪問,并且一直保存i在內(nèi)存中,可以一直增加。(閉包的一個(gè)經(jīng)典用法)
jquery中閉包也差不多,先給個(gè)例子
你也許會問
(function($){
$("div p").click(function(){alert("cssrain!")});
})(jQuery); //一個(gè)閉包
這是什么寫法?。?
別急,我也是請教了upc ,才稍微懂了點(diǎn)。
這里面的$只是形參,但jquery是全局變量,所以不需要調(diào)用該函數(shù)就會自動執(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);
會提示undefined。
因?yàn)殚]包后,里面的變量就相當(dāng)于局部了。
閉包的好處:
不增加額外的全局變量,
執(zhí)行過程中所有變量都是在匿名函數(shù)內(nèi)部。
上面的例子不是很好,跟javascript的閉包有點(diǎn)混淆,但這確實(shí)也是jquery中的一種閉包。只不過經(jīng)過jquery的加工罷了。
如過有什么不對,大家互相討論,我也是初學(xué)者,還有很多不懂得地方。
其實(shí)javascript里的閉包概念很簡單,就是函數(shù)用到外部變量,不需要傳參就可以獲取。
舉個(gè)例子:
復(fù)制代碼 代碼如下:
<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變量的訪問,并且一直保存i在內(nèi)存中,可以一直增加。(閉包的一個(gè)經(jīng)典用法)
jquery中閉包也差不多,先給個(gè)例子
你也許會問
復(fù)制代碼 代碼如下:
(function($){
$("div p").click(function(){alert("cssrain!")});
})(jQuery); //一個(gè)閉包
這是什么寫法?。?
別急,我也是請教了upc ,才稍微懂了點(diǎn)。
這里面的$只是形參,但jquery是全局變量,所以不需要調(diào)用該函數(shù)就會自動執(zhí)行,或者分兩步
就是轉(zhuǎn)化成正常的函數(shù),先寫函數(shù),后調(diào)用。
如下所示
其實(shí):
復(fù)制代碼 代碼如下:
(function($){
$("div p").click(。。。);
})(jQuery);
就是等于
復(fù)制代碼 代碼如下:
function tempFunction($){ //創(chuàng)建一個(gè)以$為形參的函數(shù)
$("div p").click(....);
}
TempFunction(jQuery); //傳入實(shí)參jQuery執(zhí)行函數(shù).
干脆直接這么寫 ,算了
復(fù)制代碼 代碼如下:
(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);
會提示undefined。
因?yàn)殚]包后,里面的變量就相當(dāng)于局部了。
閉包的好處:
不增加額外的全局變量,
執(zhí)行過程中所有變量都是在匿名函數(shù)內(nèi)部。
上面的例子不是很好,跟javascript的閉包有點(diǎn)混淆,但這確實(shí)也是jquery中的一種閉包。只不過經(jīng)過jquery的加工罷了。
如過有什么不對,大家互相討論,我也是初學(xué)者,還有很多不懂得地方。
相關(guān)文章
js es6系列教程 - 新的類語法實(shí)戰(zhàn)選項(xiàng)卡(詳解)
下面小編就為大家?guī)硪黄猨s es6系列教程 - 新的類語法實(shí)戰(zhàn)選項(xiàng)卡(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
JavaScript實(shí)現(xiàn)音樂導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)音樂導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
javascript與css3動畫結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動畫來實(shí)現(xiàn)一些占用資源更少,更優(yōu)化的動畫效果,思路十分巧妙,這里推薦給小伙伴們參考下。2015-03-03
Webpack設(shè)置環(huán)境變量的一些誤區(qū)詳解
這篇文章主要給大家介紹了關(guān)于Webpack設(shè)置環(huán)境變量的一些誤區(qū),文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
本文主要介紹了JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序,結(jié)合實(shí)例代碼進(jìn)行了詳細(xì)的講解,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
微信小程序scroll-view實(shí)現(xiàn)橫向滾動和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)橫向滾動和上拉加載示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03
百度判斷手機(jī)終端并自動跳轉(zhuǎn)js代碼及使用實(shí)例
這篇文章主要介紹了百度判斷手機(jī)終端并自動跳轉(zhuǎn)js代碼及使用實(shí)例,需要的朋友可以參考下2014-06-06
js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎系統(tǒng)
這篇文章主要介紹了js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動端的div拖動效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動端的div拖動效果實(shí)例,具有一定的參考價(jià)值,有需要的可以了解一下。2016-12-12

