新手入門：理解JavaScript中函數的使用

javascript|函數

函數是進行模組化程式設計的基礎，編寫複雜的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.onload=init;語句將其綁定到頁面載入完成的事件。這裡的init就是一個函數對象，它可以加入window的onload事件列表。

傳遞給函數的隱含參數：arguments

當進行函數調用時，除了指定的參數外，還建立一個隱含的對象——arguments。arguments是一個類似數組但不是數組的對象，說它類似是因為它具有數組一樣的訪問性質，可以用arguments[index]這樣的文法取值，擁有數組長度屬性length。argumentsObject Storage Service的是實際傳遞給函數的參數，而不局限於函式宣告所定義的參數列表，例如：

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

深入認識JavaScript中的this指標

this指標是物件導向程式設計中的一項重要概念，它表示當前啟動並執行對象。在實現對象的方法時，可以使用this指標來獲得該對象自身的引用。

和其他物件導向的語言不同，JavaScript中的this指標是一個動態變數，一個方法內的this指標並不是始終指向定義該方法的對象的，在上一節講函數的apply和call方法時已經有過這樣的例子。為了方便理解，再來看下面的例子：

＜script language="JavaScript" type="text/javascript"＞

＜!--

//建立兩個Null 物件

var obj1=new Object();

var obj2=new Object();

//給兩個對象都添加屬性p，並分別等於1和2

obj1.p=1;

obj2.p=2;

//給obj1添加方法，用於顯示p的值

obj1.getP=function(){

alert(this.p); //表面上this指標指向的是obj1

}

//調用obj1的getP方法

obj1.getP();

//使obj2的getP方法等於obj1的getP方法

obj2.getP=obj1.getP;

//調用obj2的getP方法

obj2.getP();

//--＞

＜/script＞

從代碼的執行結果看，分別彈出對話方塊顯示1和2。由此可見，getP函數僅定義了一次，在不同的場合運行，顯示了不同的運行結果，這是有this指標的變化所決定的。在obj1的getP方法中，this就指向了obj1對象，而在obj2的getP方法中，this就指向了obj2對象，並通過this指標引用到了兩個對象都具有的屬性p。

由此可見，JavaScript中的this指標是一個動態變化的變數，它表明了當前運行該函數的對象。由this指標的性質，也可以更好的理解JavaScript中對象的本質：一個對象就是由一個或多個屬性（方法）組成的集合。每個集合元素不是僅能屬於一個集合，而是可以動態屬於多個集合。這樣，一個方法（集合元素）由誰調用，this指標就指向誰。實際上，前面介紹的apply方法和call方法都是通過強制改變this指標的值來實現的，使this指標指向參數所指定的對象，從而達到將一個對象的方法作為另一個對象的方法運行。

每個對象集合的元素（即屬性或方法）也是一個獨立的部分，全域函數和作為一個對象方法定義的函數之間沒有任何區別，因為可以把全域函數和變數看作為window對象的方法和屬性。也可以使用new操作符來操作一個對象的方法來返回一個對象，這樣一個對象的方法也就可以定義為類的形式，其中的this指標則會指向新建立的對象。在後面可以看到，這時對象名可以起到一個命名空間的作用，這是使用JavaScript進行物件導向程式設計的一個技巧。例如：

var namespace1=new Object();

namespace1.class1=function(){

//初始化對象的代碼

}

var obj1=new namespace1.class1();

這裡就可以把namespace1看成一個命名空間。

由於對象屬性（方法）的動態變化特性，一個對象的兩個屬性（方法）之間的互相引用，必須要通過this指標，而其他語言中，this關鍵字是可以省略的。如上面的例子中：

obj1.getP=function(){

alert(this.p); //表面上this指標指向的是obj1

}

這裡的this關鍵字是不可省略的，即不能寫成alert(p)的形式。這將使得getP函數去引用上下文環境中的p變數，而不是obj1的屬性。