JavaScript入門之基本函數

作者：abruzzi 2011-07-21 10:07:58

函數，在C語言之類的過程式語言中，是頂級的實體，而在Java/C++之類的面向對象的語言中，則被對象包裝起來，一般稱為對象的方法。而在JavaScript中，函數本身與其他任何的內置對象在低位上是沒有任何區別的，也就是說，函數本身也是對象。

系列專題：JavaScript入門

總的來說，函數在JavaScript中可以：

◆ 被賦值給一個變量

◆ 被賦值為對象的屬性

◆ 作為參數被傳入別的函數

◆ 作為函數的結果被返回

◆ 用字面量來創建

函數對象

1.1 創建函數

創建JavaScript函數的一種不長用的方式(幾乎沒有人用)是通過new操作符來作用于Function“構造器”：

<strong>var funcName = new Function( [argname1, [... argnameN,]] body );</strong>

參數列表中可以有任意多的參數，然后緊跟著是函數體，比如：

<strong>var add = new Function("x", "y", "return(x+y)");  
print(add(2, 4));</strong>

將會打印結果：

但是，誰會用如此難用的方式來創建一個函數呢?如果函數體比較復雜，那拼接這個String要花費很大的力氣，所以JavaScript提供了一種語法糖，即通過字面量來創建函數：

<strong>function add(x, y){  
    return x + y;  
}</strong>

或：

<strong>var add = function(x, y){  
    return x + y;  
}</strong>

事實上，這樣的語法糖更容易使傳統領域的程序員產生誤解，function關鍵字會調用Function來new一個對象，并將參數表和函數體準確的傳遞給Function的構造器。

通常來說，在全局作用域(作用域將在下一節詳細介紹)內聲明一個對象，只不過是對一個屬性賦值而已，比如上例中的add函數，事實上只是為全局對象添加了一個屬性，屬性名為add，而屬性的值是一個對象，即function(x, y){return x+y;}，理解這一點很重要，這條語句在語法上跟：

<strong>var str = "This is a string";</strong>

并無二致。都是給全局對象動態的增加一個新的屬性，如此而已。

為了說明函數跟其他的對象一樣，都是作為一個獨立的對象而存在于JavaScript的運行系統，我們不妨看這樣一個例子：

<strong>function p(){  
    print("invoke p by ()");  
}  
   
p.id = "func";  
p.type = "function";  
   
print(p);  
print(p.id+":"+p.type);  
print(p());</strong>

沒有錯，p雖然引用了一個匿名函數(對象)，但是同時又可以擁有屬性，完全跟其他對象一樣，運行結果如下：

function (){
print("invoke p by ()");
}
func:function
invoke p by ()

1.2 函數的參數

在JavaScript中，函數的參數是比較有意思的，比如，你可以將任意多的參數傳遞給一個函數，即使這個函數聲明時并未制定形式參數，比如：

<strong>function adPrint(str, len, option){  
    var s = str || "default";  
    var l = len || s.length;  
    var o = option || "i";  
     
    s = s.substring(0, l);  
    switch(o){  
       case "u":  
           s = s.toUpperCase();  
           break;  
       case "l":  
           s = s.toLowerCase();  
           break;  
       default:  
           break;  
    }  
     
    print(s);  
}  
   
adPrint("Hello, world");  
adPrint("Hello, world", 5);  
adPrint("Hello, world", 5, "l");//lower case  
adPrint("Hello, world", 5, "u");//upper case</strong>

函數adPrint在聲明時接受三個形式參數：要打印的串，要打印的長度，是否轉換為大小寫的標記。但是在調用的時候，我們可以按順序傳遞給adPrint一個參數，兩個參數，或者三個參數(甚至可以傳遞給它多于3個，沒有關系)，運行結果如下：

Hello, world
Hello
hello
HELLO

事實上，JavaScript在處理函數的參數時，與其他編譯型的語言不一樣，解釋器傳遞給函數的是一個類似于數組的內部值，叫arguments，這個在函數對象生成的時候就被初始化了。比如我們傳遞給adPrint一個參數的情況下，其他兩個參數分別為undefined.這樣，我們可以才adPrint函數內部處理那些undefined參數，從而可以向外部公開：我們可以處理任意參數。

我們通過另一個例子來討論這個神奇的arguments:

<strong>function sum(){  
    var result = 0;  
    for(var i = 0, len = arguments.length; i < len; i++){  
       var current = arguments[i];  
       if(isNaN(current)){  
           throw new Error("not a number exception");  
       }else{  
           result += current;  
       }  
    }  
     
    return result;  
}  
   
print(sum(10, 20, 30, 40, 50));  
print(sum(4, 8, 15, 16, 23, 42));//《迷失》上那串神奇的數字  
print(sum("new"));</strong>

函數sum沒有顯式的形參，而我們又可以動態的傳遞給其任意多的參數，那么，如何在sum函數中如何引用這些參數呢?這里就需要用到arguments這個偽數組了，運行結果如下：

150
108
Error: not a number exception

函數作用域

作用域的概念在幾乎所有的主流語言中都有體現，在JavaScript中，則有其特殊性：JavaScript中的變量作用域為函數體內有效，而無塊作用域，我們在Java語言中，可以這樣定義for循環塊中的下標變量：

public void method(){  
    for(int i = 0; i < obj1.length; i++){  
       //do something here;  
    }  
    //此時的i為未定義  
    for(int i = 0; i < obj2.length; i++){  
       //do something else;  
    }    
}

而在JavaScript中：

<strong>function func(){  
    for(var i = 0; i < array.length; i++){  
       //do something here.  
    }  
    //此時i仍然有值，及I == array.length  
    print(i);//i == array.length;  
}</strong>

JavaScript的函數是在局部作用域內運行的，在局部作用域內運行的函數體可以訪問其外層的(可能是全局作用域)的變量和函數。JavaScript的作用域為詞法作用域，所謂詞法作用域是說，其作用域為在定義時(詞法分析時)就確定下來的，而并非在執行時確定，如下例：

<strong>var str = "global";  
function scopeTest(){  
    print(str);  
    var str = "local";  
    print(str);  
}  
   
scopeTest();</strong>

運行結果是什么呢?初學者很可能得出這樣的答案：

global
local

而正確的結果應該是：

undefined
local

因為在函數scopeTest的定義中，預先訪問了未聲明的變量str，然后才對str變量進行初始化，所以***個print(str)會返回undifined錯誤。那為什么函數這個時候不去訪問外部的str變量呢?這是因為，在詞法分析結束后，構造作用域鏈的時候，會將函數內定義的var變量放入該鏈，因此str在整個函數scopeTest內都是可見的(從函數體的***行到***一行)，由于str變量本身是未定義的，程序順序執行，到***行就會返回未定義，第二行為str賦值，所以第三行的print(str)將返回”local”。

#p#

函數上下文

在Java或者C/C++等語言中，方法(函數)只能依附于對象而存在，不是獨立的。而在JavaScript中，函數也是一種對象，并非其他任何對象的一部分，理解這一點尤為重要，特別是對理解函數式的JavaScript非常有用，在函數式編程語言中，函數被認為是一等的。

函數的上下文是可以變化的，因此，函數內的this也是可以變化的，函數可以作為一個對象的方法，也可以同時作為另一個對象的方法，總之，函數本身是獨立的。可以通過Function對象上的call或者apply函數來修改函數的上下文：

call和apply

call和apply通常用來修改函數的上下文，函數中的this指針將被替換為call或者apply的***個參數，我們不妨來看看JavaScript入門之對象與JSON中的例子：

//定義一個人，名字為jack  
var jack = {  
    name : "jack",  
    age : 26  
}  
   
//定義另一個人，名字為abruzzi  
var abruzzi = {  
    name : "abruzzi",  
    age : 26  
}  
   
//定義一個全局的函數對象  
function printName(){  
    return this.name;  
}  
   
//設置printName的上下文為jack, 此時的this為jack  
print(printName.call(jack));  
//設置printName的上下文為abruzzi,此時的this為abruzzi  
print(printName.call(abruzzi));  
   
print(printName.apply(jack));  
print(printName.apply(abruzzi));

只有一個參數的時候call和apply的使用方式是一樣的，如果有多個參數：

setName.apply(jack, ["Jack Sept."]);  
print(printName.apply(jack));  
   
setName.call(abruzzi, "John Abruzzi");  
print(printName.call(abruzzi));

得到的結果為：

Jack Sept.  
John Abruzzi

apply的第二個參數為一個函數需要的參數組成的一個數組，而call則需要跟若干個參數，參數之間以逗號(,)隔開即可。

使用函數

前面已經提到，在JavaScript中，函數可以

◆ 被賦值給一個變量

◆ 被賦值為對象的屬性

◆ 作為參數被傳入別的函數

◆ 作為函數的結果被返回

我們就分別來看看這些場景：

賦值給一個變量：

//聲明一個函數，接受兩個參數，返回其和  
function add(x, y){  
    return x + y;  
}  
   
var a = 0;  
a = add;//將函數賦值給一個變量  
var b = a(2, 3);//調用這個新的函數a  
print(b);

這段代碼會打印”5”，因為賦值之后，變量a引用函數add，也就是說，a的值是一個函數對象(一個可執行代碼塊)，因此可以使用a(2, 3)這樣的語句來進行求和操作。

賦值為對象的屬性：

<strong>var obj = {  
    id : "obj1" 
}  
   
obj.func = add;//賦值為obj對象的屬性  
obj.func(2, 3);//返回5</strong>

事實上，這個例子與上個例子的本質上是一樣的，***個例子中的a變量，事實上是全局對象(如果在客戶端環境中，表示為window對象)的一個屬性。而第二個例子則為obj對象，由于我們很少直接的引用全局對象，就分開來描述。

作為參數傳遞：

//高級打印函數的第二個版本  
function adPrint2(str, handler){  
    print(handler(str));  
}  
   
//將字符串轉換為大寫形式，并返回  
function up(str){  
    return str.toUpperCase();  
}  
   
//將字符串轉換為小寫形式，并返回  
function low(str){  
    return str.toLowerCase();  
}  
   
adPrint2("Hello, world", up);  
adPrint2("Hello, world", low);

運行此片段，可以得到這樣的結果：

HELLO, WORLD
hello, world

應該注意到，函數adPrint2的第二個參數，事實上是一個函數，將這個處理函數作為參數傳入，在adPrint2的內部，仍然可以調用這個函數，這個特點在很多地方都是有用的，特別是，當我們想要處理一些對象，但是又不確定以何種形式來處理，則完全可以將“處理方式”作為一個抽象的粒度來進行包裝(即函數)。

作為函數的返回值：

先來看一個最簡單的例子：

<strong>function currying(){  
    return function(){  
       print("curring");  
    }  
}</strong>

函數currying返回一個匿名函數，這個匿名函數會打印”curring”，簡單的調用currying()會得到下面的結果：

<strong>function (){  
    print("curring");  
}</strong>

如果要調用currying返回的這個匿名函數，需要這樣：

currying()();

***個括號操作，表示調用currying本身，此時返回值為函數，第二個括號操作符調用這個返回值，則會得到這樣的結果：

currying

原文：http://abruzzi.iteye.com/blog/646798

【系列文章】

JavaScript入門之對象與JSON

JavaScript概述

JavaScript內核之基本概念

責任編輯：陳貽新來源： abruzzi的博客

JavaScript