| -------------------該文摘自于匿名教程總結,希望對初學(xué)js的同學(xué)有幫助,因為它解決了我學(xué)習js的眾多迷惑。。。 函數是進(jìn)行模塊化程序設計的基礎,編寫(xiě)復雜的Ajax應用程序,必須對函數有更深入的了解。 javascript中的函數不同于其他的語(yǔ)言,每個(gè)函數都是作為一個(gè)對象被維護和運行的。通過(guò)函數對象的性質(zhì),可以很方便的將一個(gè)函數賦值給一個(gè)變量或者將函數作為參數傳遞。在繼續講述之前,先看一下函數的使用語(yǔ)法: 以下是引用片段: function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(); 這些都是聲明函數的正確語(yǔ)法。它們和其他語(yǔ)言中常見(jiàn)的函數或之前介紹的函數定義方式有著(zhù)很大的區別。那么在JavaScript中為什么能這么寫(xiě)?它所遵循的語(yǔ)法是什么呢?下面將介紹這些內容。 認識函數對象(Function Object) 可以用function關(guān)鍵字定義一個(gè)函數,并為每個(gè)函數指定一個(gè)函數名,通過(guò)函數名來(lái)進(jìn)行調用。在JavaScript解釋執行時(shí),函數都是被維護為一個(gè)對象,這就是要介紹的函數對象(Function Object)。 函數對象與其他用戶(hù)所定義的對象有著(zhù)本質(zhì)的區別,這一類(lèi)對象被稱(chēng)之為內部對象,例如日期對象(Date)、數組對象(Array)、字符串對象(String)都屬于內部對象。這些內置對象的構造器是由JavaScript本身所定義的:通過(guò)執行new Array()這樣的語(yǔ)句返回一個(gè)對象,JavaScript內部有一套機制來(lái)初始化返回的對象,而不是由用戶(hù)來(lái)指定對象的構造方式。 在JavaScript中,函數對象對應的類(lèi)型是Function,正如數組對象對應的類(lèi)型是Array,日期對象對應的類(lèi)型是Date一樣,可以通過(guò)new Function()來(lái)創(chuàng )建一個(gè)函數對象,也可以通過(guò)function關(guān)鍵字來(lái)創(chuàng )建一個(gè)對象。為了便于理解,我們比較函數對象的創(chuàng )建和數組對象的創(chuàng )建。先看數組對象:下面兩行代碼都是創(chuàng )建一個(gè)數組對象myArray: 以下是引用片段: var myArray=[]; //等價(jià)于 var myArray=new Array(); 同樣,下面的兩段代碼也都是創(chuàng )建一個(gè)函數myFunction: function myFunction(a,b){ return a+b; } //等價(jià)于 var myFunction=new Function("a","b","return a+b"); 通過(guò)和構造數組對象語(yǔ)句的比較,可以清楚的看到函數對象本質(zhì),前面介紹的函數聲明是上述代碼的第一種方式,而在解釋器內部,當遇到這種語(yǔ)法時(shí),就會(huì )自動(dòng)構造一個(gè)Function對象,將函數作為一個(gè)內部的對象來(lái)存儲和運行。從這里也可以看到,一個(gè)函數對象名稱(chēng)(函數變量)和一個(gè)普通變量名稱(chēng)具有同樣的規范,都可以通過(guò)變量名來(lái)引用這個(gè)變量,但是函數變量名后面可以跟上括號和參數列表來(lái)進(jìn)行函數調用。 用new Function()的形式來(lái)創(chuàng )建一個(gè)函數不常見(jiàn),因為一個(gè)函數體通常會(huì )有多條語(yǔ)句,如果將它們以一個(gè)字符串的形式作為參數傳遞,代碼的可讀性差。下面介紹一下其使用語(yǔ)法: 以下是引用片段: var funcName=new Function(p1,p2,...,pn,body); 參數的類(lèi)型都是字符串,p1到pn表示所創(chuàng )建函數的參數名稱(chēng)列表,body表示所創(chuàng )建函數的函數體語(yǔ)句,funcName就是所創(chuàng )建函數的名稱(chēng)??梢圆恢付ㄈ魏螀祫?chuàng )建一個(gè)空函數,不指定funcName創(chuàng )建一個(gè)無(wú)名函數,當然那樣的函數沒(méi)有任何意義。 需要注意的是,p1到pn是參數名稱(chēng)的列表,即p1不僅能代表一個(gè)參數,它也可以是一個(gè)逗號隔開(kāi)的參數列表,例如下面的定義是等價(jià)的: 以下是引用片段: new Function("a", "b", "c", "return a+b+c") new Function("a, b, c", "return a+b+c") new Function("a,b", "c", "return a+b+c") JavaScript引入Function類(lèi)型并提供new Function()這樣的語(yǔ)法是因為函數對象添加屬性和方法就必須借助于Function這個(gè)類(lèi)型。 函數的本質(zhì)是一個(gè)內部對象,由JavaScript解釋器決定其運行方式。通過(guò)上述代碼創(chuàng )建的函數,在程序中可以使用函數名進(jìn)行調用。本節開(kāi)頭列出的函數定義問(wèn)題也得到了解釋。注意可直接在函數聲明后面加上括號就表示創(chuàng )建完成后立即進(jìn)行函數調用,例如: 以下是引用片段: var i=function (a,b){ return a+b; }(1,2); alert(i); 這段代碼會(huì )顯示變量i的值等于3。i是表示返回的值,而不是創(chuàng )建的函數,因為括號“(”比等號“=”有更高的優(yōu)先級。這樣的代碼可能并不常用,但當用戶(hù)想在很長(cháng)的代碼段中進(jìn)行模塊化設計或者想避免命名沖突,這是一個(gè)不錯的解決辦法。 需要注意的是,盡管下面兩種創(chuàng )建函數的方法是等價(jià)的: 以下是引用片段: function funcName(){ //函數體 } //等價(jià)于 var funcName=function(){ //函數體 } 但前面一種方式創(chuàng )建的是有名函數,而后面是創(chuàng )建了一個(gè)無(wú)名函數,只是讓一個(gè)變量指向了這個(gè)無(wú)名函數。在使用上僅有一點(diǎn)區別,就是:對于有名函數,它可以出現在調用之后再定義;而對于無(wú)名函數,它必須是在調用之前就已經(jīng)定義。例如: 以下是引用片段: <script language="JavaScript" type="text/javascript"> <!-- func(); var func=function(){ alert(1) } //--> </script> 這段語(yǔ)句將產(chǎn)生func未定義的錯誤,而: 以下是引用片段: <script language="JavaScript" type="text/javascript"> <!-- func(); function func(){ alert(1) } //--> </script> 則能夠正確執行,下面的語(yǔ)句也能正確執行: 以下是引用片段: <script language="JavaScript" type="text/javascript"> <!-- func(); var someFunc=function func(){ alert(1) } //--> </script> 由此可見(jiàn),盡管JavaScript是一門(mén)解釋型的語(yǔ)言,但它會(huì )在函數調用時(shí),檢查整個(gè)代碼中是否存在相應的函數定義,這個(gè)函數名只有是通過(guò)function funcName()形式定義的才會(huì )有效,而不能是匿名函數。 函數對象和其他內部對象的關(guān)系 除了函數對象,還有很多內部對象,比如:Object、Array、Date、RegExp、Math、Error。這些名稱(chēng)實(shí)際上表示一個(gè)類(lèi)型,可以通過(guò)new操作符返回一個(gè)對象。然而函數對象和其他對象不同,當用typeof得到一個(gè)函數對象的類(lèi)型時(shí),它仍然會(huì )返回字符串“function”,而typeof一個(gè)數組對象或其他的對象時(shí),它會(huì )返回字符串“object”。下面的代碼示例了typeof不同類(lèi)型的情況: 以下是引用片段: alert(typeof(Function))); alert(typeof(new Function())); alert(typeof(Array)); alert(typeof(Object)); alert(typeof(new Array())); alert(typeof(new Date())); alert(typeof(new Object())); 運行這段代碼可以發(fā)現:前面4條語(yǔ)句都會(huì )顯示“function”,而后面3條語(yǔ)句則顯示“object”,可見(jiàn)new一個(gè)function實(shí)際上是返回一個(gè)函數。這與其他的對象有很大的不同。其他的類(lèi)型Array、Object等都會(huì )通過(guò)new操作符返回一個(gè)普通對象。盡管函數本身也是一個(gè)對象,但它與普通的對象還是有區別的,因為它同時(shí)也是對象構造器,也就是說(shuō),可以new一個(gè)函數來(lái)返回一個(gè)對象,這在前面已經(jīng)介紹。所有typeof返回“function”的對象都是函數對象。也稱(chēng)這樣的對象為構造器(constructor),因而,所有的構造器都是對象,但不是所有的對象都是構造器。 既然函數本身也是一個(gè)對象,它們的類(lèi)型是function,聯(lián)想到C++、Java等面向對象語(yǔ)言的類(lèi)定義,可以猜測到Function類(lèi)型的作用所在,那就是可以給函數對象本身定義一些方法和屬性,借助于函數的prototype對象,可以很方便地修改和擴充Function類(lèi)型的定義,例如下面擴展了函數類(lèi)型Function,為其增加了method1方法,作用是彈出對話(huà)框顯示"function": 以下是引用片段: Function.prototype.method1=function(){ alert("function"); } function func1(a,b,c){ return a+b+c; } func1.method1(); func1.method1.method1(); 注意最后一個(gè)語(yǔ)句:func1.method1.mehotd1(),它調用了method1這個(gè)函數對象的method1方法。雖然看上去有點(diǎn)容易混淆,但仔細觀(guān)察一下語(yǔ)法還是很明確的:這是一個(gè)遞歸的定義。因為method1本身也是一個(gè)函數,所以它同樣具有函數對象的屬性和方法,所有對Function類(lèi)型的方法擴充都具有這樣的遞歸性質(zhì)。 Function是所有函數對象的基礎,而Object則是所有對象(包括函數對象)的基礎。在JavaScript中,任何一個(gè)對象都是Object的實(shí)例,因此,可以修改Object這個(gè)類(lèi)型來(lái)讓所有的對象具有一些通用的屬性和方法,修改Object類(lèi)型是通過(guò)prototype來(lái)完成的: 以下是引用片段: Object.prototype.getType=function(){ return typeof(this); } var array1=new Array(); function func1(a,b){ return a+b; } alert(array1.getType()); alert(func1.getType()); 上面的代碼為所有的對象添加了getType方法,作用是返回該對象的類(lèi)型。兩條alert語(yǔ)句分別會(huì )顯示“object”和“function”。 將函數作為參數傳遞 在前面已經(jīng)介紹了函數對象本質(zhì),每個(gè)函數都被表示為一個(gè)特殊的對象,可以方便的將其賦值給一個(gè)變量,再通過(guò)這個(gè)變量名進(jìn)行函數調用。作為一個(gè)變量,它可以以參數的形式傳遞給另一個(gè)函數,這在前面介紹JavaScript事件處理機制中已經(jīng)看到過(guò)這樣的用法,例如下面的程序將func1作為參數傳遞給func2: 以下是引用片段: function func1(theFunc){ theFunc(); } function func2(){ alert("ok"); } func1(func2); 在最后一條語(yǔ)句中,func2作為一個(gè)對象傳遞給了func1的形參theFunc,再由func1內部進(jìn)行theFunc的調用。事實(shí)上,將函數作為參數傳遞,或者是將函數賦值給其他變量是所有事件機制的基礎。 例如,如果需要在頁(yè)面載入時(shí)進(jìn)行一些初始化工作,可以先定義一個(gè)init的初始化函數,再通過(guò)window.onload=init;語(yǔ)句將其綁定到頁(yè)面載入完成的事件。這里的init就是一個(gè)函數對象,它可以加入window的onload事件列表。 傳遞給函數的隱含參數:arguments 當進(jìn)行函數調用時(shí),除了指定的參數外,還創(chuàng )建一個(gè)隱含的對象——arguments。arguments是一個(gè)類(lèi)似數組但不是數組的對象,說(shuō)它類(lèi)似是因為它具有數組一樣的訪(fǎng)問(wèn)性質(zhì),可以用arguments[index]這樣的語(yǔ)法取值,擁有數組長(cháng)度屬性length。arguments對象存儲的是實(shí)際傳遞給函數的參數,而不局限于函數聲明所定義的參數列表,例如: 以下是引用片段: function func(a,b){ alert(a); alert(b); for(var i=0;i<arguments.length;i++){ alert(arguments[i]); } } func(1,2,3); 代碼運行時(shí)會(huì )依次顯示:1,2,1,2,3。因此,在定義函數的時(shí)候,即使不指定參數列表,仍然可以通過(guò)arguments引用到所獲得的參數,這給編程帶來(lái)了很大的靈活性。arguments對象的另一個(gè)屬性是callee,它表示對函數對象本身的引用,這有利于實(shí)現無(wú)名函數的遞歸或者保證函數的封裝性,例如使用遞歸來(lái)計算1到n的自然數之和: 以下是引用片段: var sum=function(n){ if(1==n)return 1; else return n+sum(n-1); } alert(sum(100)); 其中函數內部包含了對sum自身的調用,然而對于JavaScript來(lái)說(shuō),函數名僅僅是一個(gè)變量名,在函數內部調用sum即相當于調用一個(gè)全局變量,不能很好的體現出是調用自身,所以使用arguments.callee屬性會(huì )是一個(gè)較好的辦法: 以下是引用片段: var sum=function(n){ if(1==n)return 1; else return n+arguments.callee(n-1); } alert(sum(100)); callee屬性并不是arguments不同于數組對象的惟一特征,下面的代碼說(shuō)明了arguments不是由Array類(lèi)型創(chuàng )建: 以下是引用片段: Array.prototype.p1=1; alert(new Array().p1); function func(){ alert(arguments.p1); } func(); 運行代碼可以發(fā)現,第一個(gè)alert語(yǔ)句顯示為1,即表示數組對象擁有屬性p1,而func調用則顯示為“undefined”,即p1不是arguments的屬性,由此可見(jiàn),arguments并不是一個(gè)數組對象。 函數的apply、call方法和length屬性 JavaScript為函數對象定義了兩個(gè)方法:apply和call,它們的作用都是將函數綁定到另外一個(gè)對象上去運行,兩者僅在定義參數的方式有所區別: 以下是引用片段: Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2…]]); 從函數原型可以看到,第一個(gè)參數都被取名為thisArg,即所有函數內部的this指針都會(huì )被賦值為thisArg,這就實(shí)現了將函數作為另外一個(gè)對象的方法運行的目的。兩個(gè)方法除了thisArg參數,都是為Function對象傳遞的參數。下面的代碼說(shuō)明了apply和call方法的工作方式: 以下是引用片段: //定義一個(gè)函數func1,具有屬性p和方法A function func1(){ this.p="func1-"; this.A=function(arg){ alert(this.p+arg); } } //定義一個(gè)函數func2,具有屬性p和方法B function func2(){ this.p="func2-"; this.B=function(arg){ alert(this.p+arg); } } var obj1=new func1(); var obj2=new func2(); obj1.A("byA"); //顯示func1-byA obj2.B("byB"); //顯示func2-byB obj1.A.apply(obj2,["byA"]); //顯示func2-byA,其中[“byA”]是僅有一個(gè)元素的數組,下同 obj2.B.apply(obj1,["byB"]); //顯示func1-byB obj1.A.call(obj2,"byA"); //顯示func2-byA obj2.B.call(obj1,"byB"); //顯示func1-byB 可以看出,obj1的方法A被綁定到obj2運行后,整個(gè)函數A的運行環(huán)境就轉移到了obj2,即this指針指向了obj2。同樣obj2的函數B也可以綁定到obj1對象去運行。代碼的最后4行顯示了apply和call函數參數形式的區別。 與arguments的length屬性不同,函數對象還有一個(gè)屬性length,它表示函數定義時(shí)所指定參數的個(gè)數,而非調用時(shí)實(shí)際傳遞的參數個(gè)數。例如下面的代碼將顯示2: 以下是引用片段: function sum(a,b){ return a+b; } alert(sum.length); |
| 修改 刪除 舉報 引用 回復 |
|
聯(lián)系客服