摘要:在這一節(jié),我們碰到的片段是一組立即運(yùn)行的匿名函數(shù)。匿名函數(shù)的調(diào)用要調(diào)用一個(gè)函數(shù),我們必須要有方法定位它,引用它。那么很顯然,沒(méi)有任何實(shí)現(xiàn)的匿名函數(shù)不可能應(yīng)用了閉包特性。
代碼如下:
(function(){ //這里忽略jQuery所有實(shí)現(xiàn) })(); (function(){ //這里忽略jQuery所有實(shí)現(xiàn) })();
半年前初次接觸jQuery的時(shí)候,我也像其他人一樣很興奮地想看看源碼是什么樣的。然而,在看到源碼的第一眼,我就迷糊了。為什么只有一個(gè)匿 名函數(shù)又沒(méi)看到運(yùn)行(當(dāng)然是運(yùn)行了……),就能有jQuery這么個(gè)函數(shù)庫(kù)了?于是,我抱著疑問(wèn)來(lái)到CSDN。結(jié)果相信現(xiàn)在很多人都很清楚了(因?yàn)樵谖抑?后也不乏來(lái)者,呵呵~)。當(dāng)一個(gè)匿名函數(shù)被括起來(lái),然后再在后面加一個(gè)括號(hào),這個(gè)匿名函數(shù)就能立即運(yùn)行起來(lái)!真神奇哦!
嘿嘿!胡鬧到此為止。在這一節(jié),我們碰到的jQuery片段是一組立即運(yùn)行的匿名函數(shù)。而這種用法在論壇上也曾引起過(guò)激辯——這段代碼究竟屬不 屬于閉包呢?帶著這個(gè)疑問(wèn),我們從基礎(chǔ)開(kāi)始,分析每個(gè)關(guān)鍵要素,尋找屬于自己的答案。(沒(méi)錯(cuò),自己的答案!在我看來(lái),所有理論只是形式,只要它有利于我們 的應(yīng)用實(shí)現(xiàn),就是可取的——黑貓白貓,抓到老鼠的就是好貓!)
要說(shuō)匿名函數(shù),我們首先要由函數(shù)本身說(shuō)起。函數(shù)的定義如下:
函數(shù)是將唯一的輸出值賦予給每一輸入的“法則”。
當(dāng)然,這只是數(shù)學(xué)上的定義。但是,在計(jì)算機(jī)編程語(yǔ)言中,函數(shù)的定義也八九不離十。因?yàn)椋覀兌贾溃?jì)算機(jī)中的函數(shù),也類似數(shù)學(xué)定義中的描述,它是將輸入的若干數(shù)據(jù),經(jīng)過(guò)代碼設(shè)定的邏輯操作處理后,返回唯一的輸出的一組代碼組合塊。——當(dāng)然,特例是,輸入的數(shù)據(jù)為空或輸出的數(shù)據(jù)為空,或者兩者都為空。
下面,我們先初步了解一下和匿名函數(shù)相關(guān)的概念。
函數(shù)聲明(function 語(yǔ)句)要使用一個(gè)函數(shù),我們就得首先聲明它的存在。而我們最常用的方式就是使用function語(yǔ)句來(lái)定義一個(gè)函數(shù),如:
function abc(){ // code to process } function abc(){ // code to process }
當(dāng)然,你的函數(shù)也可以是帶參數(shù)的,甚至是帶返回值的。
view plaincopy to clipboardprint? function abc(x,y){ return x+y; } function abc(x,y){ return x+y; }
但是,無(wú)論你怎么去定義你的函數(shù),JS解釋器都會(huì)把它翻譯成一個(gè)Function對(duì)象。例如,你在定義上面的其中一個(gè)例子的函數(shù)號(hào),再輸入如下代碼:
alert(typeof abc);// "function"
你的瀏覽器就會(huì)彈出提示框,提示你abc是一個(gè)Function對(duì)象。那么Function對(duì)象究竟是什么呢?
Function 對(duì)象Function對(duì)象是JavaScript里面的固有對(duì)象,所有的函數(shù)實(shí)際上都是一個(gè)Function對(duì)象。關(guān)于這個(gè)方面的討論,我們留到下一個(gè)專題節(jié)。我們先看看,F(xiàn)unction對(duì)象能不能直接運(yùn)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新的函數(shù)呢?答案是肯定的。例如:
var abc = new Function("x","y","return x*y;"); alert(abc(2,3)); // "6" var abc = new Function("x","y","return x*y;"); alert(abc(2,3)); // "6"
相信大家現(xiàn)在對(duì)如何聲明一個(gè)函數(shù)應(yīng)該是有所了解了。那么什么才是匿名函數(shù)呢?
聲明匿名函數(shù)顧名思義,匿名函數(shù)就是沒(méi)有實(shí)際名字的函數(shù)。例如,我們把上面的例子中,函數(shù)的名字去掉,再判斷一下他是不是一個(gè)函數(shù):
alert(typeof function(){});// "function" alert(typeof function(x,y){return x+y;});// "function" alert(typeof new Function("x","y","return x*y;"))// "function" alert(typeof function(){});// "function" alert(typeof function(x,y){return x+y;});// "function" alert(typeof new Function("x","y","return x*y;"))// "function"
我們可以很容易地看到,它們?nèi)际荈unction對(duì)象,換言之,他們都是函數(shù),但是他們都有一個(gè)特點(diǎn)——沒(méi)有名字。所以我們把他們稱作“匿名函數(shù)”。然而,正因?yàn)樗麄儧](méi)有“名字”,我們也沒(méi)有辦法找到他們。這就引申了如何去調(diào)用一個(gè)匿名函數(shù)的問(wèn)題了。
匿名函數(shù)的調(diào)用要調(diào)用一個(gè)函數(shù),我們必須要有方法定位它,引用它。所以,我們會(huì)需要幫它找一個(gè)名字。例如:
var abc=function(x,y){ return x+y; } alert(abc(2,3)); // "5" var abc=function(x,y){ return x+y; } alert(abc(2,3)); // "5"
上面的操作其實(shí)就等于換個(gè)方式去定義函數(shù),這種用法是我們比較頻繁遇到的。例如我們?cè)谠O(shè)定一個(gè)DOM元素事件處理函數(shù)的時(shí)候,我們通常都不會(huì)為他們定名字,而是賦予它的對(duì)應(yīng)事件引用一個(gè)匿名函數(shù)。
對(duì)匿名函數(shù)的調(diào)用其實(shí)還有一種做法,也就是我們看到的jQuery片段——使用()將匿名函數(shù)括起來(lái),然后后面再加一對(duì)小括號(hào)(包含參數(shù)列表)。我們?cè)倏匆幌乱韵吕樱?/p>
alert((function(x,y){return x+y;})(2,3));// "5" alert((new Function("x","y","return x*y;"))(2,3));// "6" alert((function(x,y){return x+y;})(2,3));// "5" alert((new Function("x","y","return x*y;"))(2,3));// "6"
很多人或許會(huì)奇怪,為什么這種方法能成功調(diào)用呢?覺(jué)得這個(gè)應(yīng)用奇怪的人就看一下我以下這段解釋吧。
大家知道小括號(hào)的作用嗎?小括號(hào)能把我們的表達(dá)式組合分塊,并且每一塊,也就是每一對(duì)小括號(hào),都有一個(gè)返回值。這個(gè)返回值實(shí)際上也就是小括號(hào)中表達(dá)式的返回值。所以,當(dāng)我們用一對(duì)小括號(hào)把匿名函數(shù)括起來(lái)的時(shí)候,實(shí)際上小括號(hào)對(duì)返回的,就是一個(gè)匿名函數(shù)的Function對(duì)象。因此,小括號(hào)對(duì)加上匿名函數(shù)就如同有名字的函數(shù)般被我們?nèi)〉盟囊梦恢昧恕K匀绻谶@個(gè)引用變量后面再加上參數(shù)列表,就會(huì)實(shí)現(xiàn)普通函數(shù)的調(diào)用形式。
不知道以上的文字表述大家能不能看明白,如果還是理解不了的話,再看一下以下的代碼試試吧。
var abc=function(x,y){return x+y;};// 把匿名函數(shù)對(duì)象賦給abc // abc的constructor就和匿名函數(shù)的constructor一樣了。也就是說(shuō),兩個(gè)函數(shù)的實(shí)現(xiàn)是一樣的。 alert((abc).constructor==(function(x,y){return x+y;}).constructor); var abc=function(x,y){return x+y;};// 把匿名函數(shù)對(duì)象賦給abc // abc的constructor就和匿名函數(shù)的constructor一樣了。也就是說(shuō),兩個(gè)函數(shù)的實(shí)現(xiàn)是一樣的。 alert((abc).constructor==(function(x,y){return x+y;}).constructor);
PS:constructor是指創(chuàng)建對(duì)象的函數(shù)。也就是函數(shù)對(duì)象所代表的函數(shù)體。
總之,將其(被小括號(hào)包含的匿名函數(shù))理解為括號(hào)表達(dá)式返回的函數(shù)對(duì)象,然后就可以對(duì)這個(gè)函數(shù)對(duì)象作正常的參數(shù)列表調(diào)用了。(前面這里犯了個(gè)錯(cuò) 誤,只有函數(shù)表達(dá)式還是不能直接調(diào)用函數(shù)的,去掉匿名函數(shù)括號(hào)必須要伴隨將表達(dá)式賦值。也就是(function(){alert(1)})()應(yīng)該是與 a=function(){alert(1)}()等價(jià),不能連a=都去掉。)
閉包閉包是什么?閉包是指某種程序語(yǔ)言中的代碼塊允許一級(jí)函數(shù)存在并且在一級(jí)函數(shù)中所定義的自由變量能不被釋放,直到一級(jí)函數(shù)被釋放前,一級(jí)函數(shù)外也能應(yīng)用這些未釋放的自由變量。
怎樣?看得一頭冒汗吧……沒(méi)事,我也是(雖然是我是了解的,只是表達(dá)能力的問(wèn)題)。讓我們換個(gè)更加簡(jiǎn)單的方法說(shuō)明:閉包,其實(shí)是一種語(yǔ)言特性,它是指的是程序設(shè)計(jì)語(yǔ)言中,允許將函數(shù)看作對(duì)象,然后能像在對(duì)象中的操作搬在函數(shù)中定義實(shí)例(局部)變量,而這些變量能在函數(shù)中保存到函數(shù)的實(shí)例對(duì)象銷毀為止,其它代碼塊能通過(guò)某種方式獲取這些實(shí)例(局部)變量的值并進(jìn)行應(yīng)用擴(kuò)展。
不知道這么再解釋后會(huì)否更加清晰,如果還是不明白,那么我們?cè)俸?jiǎn)化一下:閉包,其實(shí)就是指程序語(yǔ)言中能讓代碼調(diào)用已運(yùn)行的函數(shù)中所定義的局部變量。
現(xiàn)在我們看一個(gè)例子:
var abc=function(y){ var x=y;// 這個(gè)是局部變量 return function(){ alert(x++);// 就是這里調(diào)用了閉包特性中的一級(jí)函數(shù)局部變量的x,并對(duì)它進(jìn)行操作 alert(y--);// 引用的參數(shù)變量也是自由變量 }}(5);// 初始化 abc();// "5" "5" abc();// "6" "4" abc();// "7" "3" alert(x);// 報(bào)錯(cuò)!“x”未定義! var abc=function(y){ var x=y;// 這個(gè)是局部變量 return function(){ alert(x++);// 就是這里調(diào)用了閉包特性中的一級(jí)函數(shù)局部變量的x,并對(duì)它進(jìn)行操作 alert(y--);// 引用的參數(shù)變量也是自由變量 }}(5);// 初始化 abc();// "5" "5" abc();// "6" "4" abc();// "7" "3" alert(x);// 報(bào)錯(cuò)!“x”未定義!
看到這里,你能判斷究竟jQuery的那個(gè)代碼片段是否閉包了嗎?
以我的理解來(lái)說(shuō)吧。是否應(yīng)用了閉包特性,必須確定該段代碼有沒(méi)有 最重要的要素:未銷毀的局部變量。那么很顯然,沒(méi)有任何實(shí)現(xiàn)的匿名函數(shù)不可能應(yīng)用了閉包特性。但如果匿名函數(shù)里面有實(shí)現(xiàn)呢?那也還得確定它的實(shí)現(xiàn)中有沒(méi)有 用到那些未銷毀的局部變量。所以如果問(wèn)你那個(gè)開(kāi)篇中的jQuery代碼片段是應(yīng)用了JS里的什么特性?那么它只是匿名函數(shù)與匿名函數(shù)的調(diào)用而已。但是,它 隱含了閉包的特性,并且隨時(shí)可以實(shí)現(xiàn)閉包應(yīng)用。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/91547.html
摘要:前言如今可謂是一匹黑馬數(shù)已居第一位前端開(kāi)發(fā)對(duì)于的使用已經(jīng)越來(lái)越多,它的優(yōu)點(diǎn)就不做介紹了本篇是我對(duì)使用過(guò)程中以及對(duì)一些社區(qū)朋友提問(wèn)我的問(wèn)題中做的一些總結(jié)幫助大家踩坑。隨后的重新渲染,元素組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。 前言 vue如今可謂是一匹黑馬,github star數(shù)已居第一位!前端開(kāi)發(fā)對(duì)于vue的使用已經(jīng)越來(lái)越多,它的優(yōu)點(diǎn)就不做介紹了,本篇是我對(duì)vue使用過(guò)程中以及...
摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細(xì)易懂,上手比較容易,這篇文章將分享一些項(xiàng)目中踩過(guò)的坑,示例主要以多條曲線為主,對(duì)大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫(xiě)得非常詳細(xì)清晰,官方示例也很豐富,中還有很多功能更強(qiáng)大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細(xì)易懂,上手比較容易,這篇文章將分享一些項(xiàng)目中踩過(guò)的坑,示例主要以多條曲線...
摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細(xì)易懂,上手比較容易,這篇文章將分享一些項(xiàng)目中踩過(guò)的坑,示例主要以多條曲線為主,對(duì)大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫(xiě)得非常詳細(xì)清晰,官方示例也很豐富,中還有很多功能更強(qiáng)大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細(xì)易懂,上手比較容易,這篇文章將分享一些項(xiàng)目中踩過(guò)的坑,示例主要以多條曲線...
摘要:我的書(shū)簽我的書(shū)簽謹(jǐn)慎導(dǎo)入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫(huà)技巧與細(xì)節(jié)常用代碼黑魔法小技巧,讓你少寫(xiě)不必要的,代碼更優(yōu)雅一勞永 我的書(shū)簽 我的書(shū)簽(謹(jǐn)慎導(dǎo)入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
閱讀 2984·2021-10-19 11:46
閱讀 979·2021-08-03 14:03
閱讀 2934·2021-06-11 18:08
閱讀 2905·2019-08-29 13:52
閱讀 2744·2019-08-29 12:49
閱讀 480·2019-08-26 13:56
閱讀 924·2019-08-26 13:41
閱讀 849·2019-08-26 13:35