天天看點

javascript的function

函數是進行子產品化程式設計的基礎,編寫複雜的Ajax應用程式,必須對函數有更深入的了解。

  javascript中的函數不同于其他的語言,每個函數都是作為一個對象被維護和運作的。通過函數對象的性質,可以很友善的将一個函數指派給一個變量或者将函數作為參數傳遞。在繼續講述之前,先看一下函數的使用文法:

以下是引用片段:

function func1(…){…}

var func2=function(…){…};

var func3=function func4(…){…};

var func5=new Function();

  這些都是聲明函數的正确文法。它們和其他語言中常見的函數或之前介紹的函數定義方式有着很大的差別。那麼在JavaScript中為什麼能這麼寫?它所遵循的文法是什麼呢?下面将介紹這些内容。

  認識函數對象(Function Object)

  可以用function關鍵字定義一個函數,并為每個函數指定一個函數名,通過函數名來進行調用。在JavaScript解釋執行時,函數都是被維護為一個對象,這就是要介紹的函數對象(Function Object)。

  函數對象與其他使用者所定義的對象有着本質的差別,這一類對象被稱之為内部對象,例如日期對象(Date)、數組對象(Array)、字元串對象(String)都屬于内部對象。這些内置對象的構造器是由JavaScript本身所定義的:通過執行new Array()這樣的語句傳回一個對象,JavaScript内部有一套機制來初始化傳回的對象,而不是由使用者來指定對象的構造方式。

  在JavaScript中,函數對象對應的類型是Function,正如數組對象對應的類型是Array,日期對象對應的類型是Date一樣,可以通過new Function()來建立一個函數對象,也可以通過function關鍵字來建立一個對象。為了便于了解,我們比較函數對象的建立和數組對象的建立。先看數組對象:下面兩行代碼都是建立一個數組對象myArray:

以下是引用片段:

var myArray=[];

//等價于

var myArray=new Array();

同樣,下面的兩段代碼也都是建立一個函數myFunction:

function myFunction(a,b){

return a+b;

}

//等價于

var myFunction=new Function(a,b,return a+b);

  通過和構造數組對象語句的比較,可以清楚的看到函數對象本質,前面介紹的函數聲明是上述代碼的第一種方式,而在解釋器内部,當遇到這種文法時,就會自動構造一個Function對象,将函數作為一個内部的對象來存儲和運作。從這裡也可以看到,一個函數對象名稱(函數變量)和一個普通變量名稱具有同樣的規範,都可以通過變量名來引用這個變量,但是函數變量名後面可以跟上括号和參數清單來進行函數調用。

  用new Function()的形式來建立一個函數不常見,因為一個函數體通常會有多條語句,如果将它們以一個字元串的形式作為參數傳遞,代碼的可讀性差。下面介紹一下其使用文法:

以下是引用片段:

var funcName=new Function(p1,p2,...,pn,body);

參數的類型都是字元串,p1到pn表示所建立函數的參數名稱清單,body表示所建立函數的函數體語句,funcName就是所建立函數的名稱。可以不指定任何參數建立一個空函數,不指定funcName建立一個無名函數,當然那樣的函數沒有任何意義。

  需要注意的是,p1到pn是參數名稱的清單,即p1不僅能代表一個參數,它也可以是一個逗号隔開的參數清單,例如下面的定義是等價的:

以下是引用片段:

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類型并提供new Function()這樣的文法是因為函數對象添加屬性和方法就必須借助于Function這個類型。

  函數的本質是一個内部對象,由JavaScript解釋器決定其運作方式。通過上述代碼建立的函數,在程式中可以使用函數名進行調用。本節開頭列出的函數定義問題也得到了解釋。注意可直接在函數聲明後面加上括号就表示建立完成後立即進行函數調用,例如:

以下是引用片段:

var i=function (a,b){

return a+b;

}(1,2);

alert(i);

  這段代碼會顯示變量i的值等于3。i是表示傳回的值,而不是建立的函數,因為括号“(”比等号“=”有更高的優先級。這樣的代碼可能并不常用,但當使用者想在很長的代碼段中進行子產品化設計或者想避免命名沖突,這是一個不錯的解決辦法。

  需要注意的是,盡管下面兩種建立函數的方法是等價的:

以下是引用片段:

function funcName(){

//函數體

}

//等價于

var funcName=function(){

//函數體

}

  但前面一種方式建立的是有名函數,而後面是建立了一個無名函數,隻是讓一個變量指向了這個無名函數。在使用上僅有一點差別,就是:對于有名函數,它可以出現在調用之後再定義;而對于無名函數,它必須是在調用之前就已經定義。例如:

以下是引用片段:

<script language=JavaScript type=text/javascript>

<!--

func();

var func=function(){

alert(1)

}

//-->

</script>

  這段語句将産生func未定義的錯誤,而:

以下是引用片段:

<script language=JavaScript type=text/javascript>

<!--

func();

function func(){

alert(1)

}

//-->

</script>

  則能夠正确執行,下面的語句也能正确執行:

以下是引用片段:

<script language=JavaScript type=text/javascript>

<!--

func();

var someFunc=function func(){

alert(1)

}

//-->

</script>

  由此可見,盡管JavaScript是一門解釋型的語言,但它會在函數調用時,檢查整個代碼中是否存在相應的函數定義,這個函數名隻有是通過function funcName()形式定義的才會有效,而不能是匿名函數。

  函數對象和其他内部對象的關系

  除了函數對象,還有很多内部對象,比如:Object、Array、Date、RegExp、Math、Error。這些名稱實際上表示一個類型,可以通過new操作符傳回一個對象。然而函數對象和其他對象不同,當用typeof得到一個函數對象的類型時,它仍然會傳回字元串“function”,而typeof一個數組對象或其他的對象時,它會傳回字元串“object”。下面的代碼示例了typeof不同類型的情況:

以下是引用片段:

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()));

  運作這段代碼可以發現:前面4條語句都會顯示“function”,而後面3條語句則顯示“object”,可見new一個function實際上是傳回一個函數。這與其他的對象有很大的不同。其他的類型Array、Object等都會通過new操作符傳回一個普通對象。盡管函數本身也是一個對象,但它與普通的對象還是有差別的,因為它同時也是對象構造器,也就是說,可以new一個函數來傳回一個對象,這在前面已經介紹。所有typeof傳回“function”的對象都是函數對象。也稱這樣的對象為構造器(constructor),因而,所有的構造器都是對象,但不是所有的對象都是構造器。

  既然函數本身也是一個對象,它們的類型是function,聯想到C++、Java等面向對象語言的類定義,可以猜測到Function類型的作用所在,那就是可以給函數對象本身定義一些方法和屬性,借助于函數的prototype對象,可以很友善地修改和擴充Function類型的定義,例如下面擴充了函數類型Function,為其增加了method1方法,作用是彈出對話框顯示function:

以下是引用片段:

Function.prototype.method1=function(){

alert(function);

}

function func1(a,b,c){

return a+b+c;

}

func1.method1();

func1.method1.method1();

  注意最後一個語句:func1.method1.mehotd1(),它調用了method1這個函數對象的method1方法。雖然看上去有點容易混淆,但仔細觀察一下文法還是很明确的:這是一個遞歸的定義。因為method1本身也是一個函數,是以它同樣具有函數對象的屬性和方法,所有對Function類型的方法擴充都具有這樣的遞歸性質。

  Function是所有函數對象的基礎,而Object則是所有對象(包括函數對象)的基礎。在JavaScript中,任何一個對象都是Object的執行個體,是以,可以修改Object這個類型來讓所有的對象具有一些通用的屬性和方法,修改Object類型是通過prototype來完成的:

以下是引用片段:

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方法,作用是傳回該對象的類型。兩條alert語句分别會顯示“object”和“function”。

将函數作為參數傳遞

  在前面已經介紹了函數對象本質,每個函數都被表示為一個特殊的對象,可以友善的将其指派給一個變量,再通過這個變量名進行函數調用。作為一個變量,它可以以參數的形式傳遞給另一個函數,這在前面介紹JavaScript事件處理機制中已經看到過這樣的用法,例如下面的程式将func1作為參數傳遞給func2:

以下是引用片段:

function func1(theFunc){

theFunc();

}

function func2(){

alert(ok);

}

func1(func2);

  在最後一條語句中,func2作為一個對象傳遞給了func1的形參theFunc,再由func1内部進行theFunc的調用。事實上,将函數作為參數傳遞,或者是将函數指派給其他變量是所有事件機制的基礎。

  例如,如果需要在頁面載入時進行一些初始化工作,可以先定義一個init的初始化函數,再通過window.οnlοad=init;語句将其綁定到頁面載入完成的事件。這裡的init就是一個函數對象,它可以加入window的onload事件清單。

  傳遞給函數的隐含參數:arguments

  當進行函數調用時,除了指定的參數外,還建立一個隐含的對象——arguments。arguments是一個類似數組但不是數組的對象,說它類似是因為它具有數組一樣的通路性質,可以用arguments[index]這樣的文法取值,擁有數組長度屬性length。arguments對象存儲的是實際傳遞給函數的參數,而不局限于函數聲明所定義的參數清單,例如:

以下是引用片段:

function func(a,b){

alert(a);

alert(b);

for(var i=0;i<arguments.length;i++){

alert(arguments[i]);

}

}

func(1,2,3);

  代碼運作時會依次顯示:1,2,1,2,3。是以,在定義函數的時候,即使不指定參數清單,仍然可以通過arguments引用到所獲得的參數,這給程式設計帶來了很大的靈活性。arguments對象的另一個屬性是callee,它表示對函數對象本身的引用,這有利于實作無名函數的遞歸或者保證函數的封裝性,例如使用遞歸來計算1到n的自然數之和:

以下是引用片段:

var sum=function(n){

if(1==n)return 1;

else return n+sum(n-1);

}

alert(sum(100));

  其中函數内部包含了對sum自身的調用,然而對于JavaScript來說,函數名僅僅是一個變量名,在函數内部調用sum即相當于調用一個全局變量,不能很好的展現出是調用自身,是以使用arguments.callee屬性會是一個較好的辦法:

以下是引用片段:

var sum=function(n){

if(1==n)return 1;

else return n+arguments.callee(n-1);

}

alert(sum(100));

  callee屬性并不是arguments不同于數組對象的惟一特征,下面的代碼說明了arguments不是由Array類型建立:

以下是引用片段:

Array.prototype.p1=1;

alert(new Array().p1);

function func(){

alert(arguments.p1);

}

func();

  運作代碼可以發現,第一個alert語句顯示為1,即表示數組對象擁有屬性p1,而func調用則顯示為“undefined”,即p1不是arguments的屬性,由此可見,arguments并不是一個數組對象。

  函數的apply、call方法和length屬性

  JavaScript為函數對象定義了兩個方法:apply和call,它們的作用都是将函數綁定到另外一個對象上去運作,兩者僅在定義參數的方式有所差別:

以下是引用片段:

Function.prototype.apply(thisArg,argArray);

Function.prototype.call(thisArg[,arg1[,arg2…]]);

  從函數原型可以看到,第一個參數都被取名為thisArg,即所有函數内部的this指針都會被指派為thisArg,這就實作了将函數作為另外一個對象的方法運作的目的。兩個方法除了thisArg參數,都是為Function對象傳遞的參數。下面的代碼說明了apply和call方法的工作方式:

以下是引用片段:

//定義一個函數func1,具有屬性p和方法A

function func1(){

this.p=func1-;

this.A=function(arg){

alert(this.p+arg);

}

}

//定義一個函數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”]是僅有一個元素的數組,下同

obj2.B.apply(obj1,[byB]); //顯示func1-byB

obj1.A.call(obj2,byA); //顯示func2-byA

obj2.B.call(obj1,byB); //顯示func1-byB

  可以看出,obj1的方法A被綁定到obj2運作後,整個函數A的運作環境就轉移到了obj2,即this指針指向了obj2。同樣obj2的函數B也可以綁定到obj1對象去運作。代碼的最後4行顯示了apply和call函數參數形式的差別。

  與arguments的length屬性不同,函數對象還有一個屬性length,它表示函數定義時所指定參數的個數,而非調用時實際傳遞的參數個數。例如下面的代碼将顯示2:

以下是引用片段:

function sum(a,b){

return a+b;

}

alert(sum.length);

繼續閱讀