本文檔內(nèi)容參考 《JavaScript 闖關(guān)記》之函數(shù)
函數(shù)是一段代碼，它只定義一次，但可以被執(zhí)行或調(diào)用任意次。在 JavaScript 里，函數(shù)即對象，程序可以隨意操控它們。比如，可以把函數(shù)賦值給變量，或者作為參數(shù)傳遞給其他函數(shù)，也可以給它們設(shè)置屬性，甚至調(diào)用它們的方法。如果函數(shù)掛載在一個對象上，作為對象的一個屬性，就稱它為對象的方法。如果函數(shù)嵌套在其他函數(shù)中定義，這樣它們就可以訪問它們被定義時所處的作用域中的任何變量。
函數(shù)定義
在 JavaScript 中，函數(shù)實際上是對象，每個函數(shù)都是Function構(gòu)造函數(shù)的實例，因此函數(shù)名實際上也是一個指向函數(shù)對象的指針，不會與某個函數(shù)綁定。函數(shù)通常有以下3中定義方式。例如：
// 寫法一：函數(shù)聲明（推薦寫法）
function ? sum(num1, num2){
? ? ? ? ?return ? num1 + num2;
}
// 寫法二：函數(shù)表達式（推薦寫法）
var ? ?sum =function(num1, num2){
? ? ? ? return ? ?num1 + num2;
};
// 寫法三：Function 構(gòu)造函數(shù)（不推薦寫法）
var ? sum =new ? Function("num1","num2","return num1 + num2");
由于函數(shù)名僅僅是指向函數(shù)的指針，因此函數(shù)名與包含對象指針的其他變量沒有什么不同。換句話說，一個函數(shù)可能會有多個名字。例如：
function ? sum(num1, num2){
? returnnum1 + num2;
}
console.log(sum(10,10)); ? // 20
var ? anotherSum = sum;
console.log(anotherSum(10,10)); ? // 20
sum = null;
console.log(anotherSum(10,10)); ?// 20
沒有重載
將函數(shù)名想象為指針，也有助于理解為什么 JavaScript 中沒有函數(shù)重載的概念。
function ? addSomeNumber(num){
? return ? num +100;
}
function ? addSomeNumber(num){
? return ? num +200;
}
var ? result = addSomeNumber(100); ?// 300
顯然，這個例子中聲明了兩個同名函數(shù)，而結(jié)果則是后面的函數(shù)覆蓋了前面的函數(shù)。以上代碼實際上與下面的代碼沒有什么區(qū)別。
var ? addSomeNumber = function(num){
? return ? num +100;
};
addSomeNumber = function(num){
? return ? num +200;
};
var ? result = addSomeNumber(100); ? // 300
通過重寫代碼之后可以很容易明白，在創(chuàng)建第二個函數(shù)時，實際上覆蓋了引用第一個函數(shù)的變量addSomeNumber。
函數(shù)聲明與函數(shù)表達式（函數(shù)是js中的一等公民，JavaScript 引擎在渲染js時會把通過函數(shù)聲明聲明的函數(shù)放在js的頂部優(yōu)先解析）
解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時，對「函數(shù)聲明」和「函數(shù)表達式」并非一視同仁。解析器會率先讀取函數(shù)聲明，并使其在執(zhí)行任何代碼之前可用（可以訪問）；至于函數(shù)表達式，則必須等到解析器執(zhí)行到它所在的代碼行，才會真正被解釋執(zhí)行。例如：
console.log(sum(10,10)); ? // 20
function ? sum(num1, num2){
? return ? num1 + num2;
}
以上代碼完全可以正常運行。因為在代碼開始執(zhí)行之前，解析器就已經(jīng)通過一個名為函數(shù)聲明提升（function declaration hoisting）的過程，讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中。對代碼求值時，JavaScript 引擎在第一遍會聲明函數(shù)并將它們放到源代碼樹的頂部。所以，即使聲明函數(shù)的代碼在調(diào)用它的代碼后面，JavaScript 引擎也能把函數(shù)聲明提升到頂部。把上面的「函數(shù)聲明」改為等價的「函數(shù)表達式」，就會在執(zhí)行期間導(dǎo)致錯誤。例如：
console.log(sum(10,10)); ? // Uncaught TypeError: sum is not a function
var ? sum =function(num1, num2){
? return ? num1 + num2;
};
除了上述區(qū)別之外，「函數(shù)聲明」與「函數(shù)表達式」的語法是等價的。
作為值的函數(shù)
因為 JavaScript 中的函數(shù)名本身就是變量，所以函數(shù)也可以作為值來使用。也就是說，不僅可以像傳遞參數(shù)一樣把一個函數(shù)傳遞給另一個函數(shù)，而且可以將一個函數(shù)作為另一個函數(shù)的結(jié)果返回。來看一看下面的函數(shù)。
function ? callSomeFunction(someFunction, someArgument){
? return ? someFunction(someArgument);
}
這個函數(shù)接受兩個參數(shù)。第一個參數(shù)應(yīng)該是一個函數(shù)，第二個參數(shù)應(yīng)該是要傳遞給該函數(shù)的一個值。然后，就可以像下面的例子一樣傳遞函數(shù)了。
function ? add10(num){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? return ? num +10;
}
var ? result1 = callSomeFunction(add10,10);
console.log(result1); ? // 20
function ? getGreeting(name){
? return ? "Hello, "+ name;
}
var ? result2 = callSomeFunction(getGreeting,"Nicholas");
console.log(result2); ? // "Hello, Nicholas"
這里的callSomeFunction()函數(shù)是通用的，即無論第一個參數(shù)中傳遞進來的是什么函數(shù)，它都會返回執(zhí)行第一個參數(shù)后的結(jié)果。要訪問函數(shù)的指針而不執(zhí)行函數(shù)的話，必須去掉函數(shù)名后面的那對圓括號。因此上面例子中傳遞給callSomeFunction()的是add10和getGreeting，而不是執(zhí)行它們之后的結(jié)果。
當然，還可以從一個函數(shù)中返回另一個函數(shù)，而且這也是極為有用的一種技術(shù)。例如，假設(shè)有一個對象數(shù)組，我們想要根據(jù)某個對象屬性對數(shù)組進行排序。而傳遞給數(shù)組sort()方法的比較函數(shù)要接收兩個參數(shù)，即要比較的值。可是，我們需要一種方式來指明按照哪個屬性來排序。要解決這個問題，可以定義一個函數(shù)，它接收一個屬性名，然后根據(jù)這個屬性名來創(chuàng)建一個比較函數(shù)，下面就是這個函數(shù)的定義。
function ? createComparisonFunction(propertyName){
? ? ? ? ?return ? function(object1, object2){
? ? ? ? ? ? ? ? var ? value1 = object1[propertyName];
? ? ? ? ? ? ? ? var ? value2 = object2[propertyName];
? ? ? ? ? ? ? ? if(value1 < value2){
? ? ? ? ? ? ? ? ? ? ? return -1; ? ? ? ?
? ? ? ? ? ? ? ? }else ?if(value1 > value2){
? ? ? ? ? ? ? ? ? ? ? return 1; ? ? ?
? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ? ?return 0; ? ? ? ?
? ? ? ? ? ? ? ?} ? ?
? ? ? ?}
}
這個函數(shù)定義看起來有點復(fù)雜，但實際上無非就是在一個函數(shù)中嵌套了另一個函數(shù)，而且內(nèi)部函數(shù)前面加了一個return操作符。在內(nèi)部函數(shù)接收到propertyName參數(shù)后，它會使用方括號表示法來取得給定屬性的值。取得了想要的屬性值之后，定義比較函數(shù)就非常簡單了。上面這個函數(shù)可以像在下面例子中這樣使用。
var ? data = [{name:"Zachary",age:28}, {name:"Nicholas",age:29}];
data.sort(createComparisonFunction("name"));
console.log(data[0].name); ? //Nicholas
data.sort(createComparisonFunction("age"));
console.log(data[0].name); ? // Zachary
這里，我們創(chuàng)建了一個包含兩個對象的數(shù)組data。其中，每個對象都包含一個name屬性和一個age屬性。在默認情況下，sort()方法會調(diào)用每個對象的toString()方法以確定它們的次序；但得到的結(jié)果往往并不符合人類的思維習(xí)慣。因此，我們調(diào)用createComparisonFunction("name")方法創(chuàng)建了一個比較函數(shù)，以便按照每個對象的name屬性值進行排序。而結(jié)果排在前面的第一項是name為"Nicholas"，age是29的對象。然后，我們又使用了createComparisonFunction("age")返回的比較函數(shù)，這次是按照對象的age屬性排序。得到的結(jié)果是name值為"Zachary"，age值是28的對象排在了第一位。
函數(shù)的形參和實參
在函數(shù)內(nèi)部，有兩個特殊的對象：arguments和this。其中，arguments是一個類數(shù)組對象，包含著傳入函數(shù)中的所有參數(shù)。雖然arguments的主要用途是保存函數(shù)參數(shù)，但這個對象還有一個名叫callee的屬性，該屬性是一個指針，指向擁有這個arguments對象的函數(shù)。請看下面這個非常經(jīng)典的階乘函數(shù)。
function ? factorial(num){
? ? ? ? if(num <=1) {
? ? ? ? ? ? ? ? ? ?return 1; ?
? ? ? ? }else{
? ? ? ? ? ? ? ? ? return ?num * factorial(num-1) ? ?
? ? ? ?}
}
定義階乘函數(shù)一般都要用到遞歸算法，如上面的代碼所示，在函數(shù)有名字，而且名字以后也不會變的情況下，這樣定義沒有問題。但問題是這個函數(shù)的執(zhí)行與函數(shù)名factorial緊緊耦合在了一起。為了消除這種緊密耦合的現(xiàn)象，可以像下面這樣使用arguments.callee。
function ? factorial(num){
? ? ? ? ? ? if(num <=1) {
? ? ? ? ? ? ? ? ? ? ? ?return ?1; ?
? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? return ?num *arguments.callee(num-1) ?
? ? ? ? }
}
在這個重寫后的factorial()函數(shù)的函數(shù)體內(nèi)，沒有再引用函數(shù)名factorial。這樣，無論引用函數(shù)時使用的是什么名字，都可以保證正常完成遞歸調(diào)用。例如：
var ? trueFactorial = factorial;
factorial =function(){
? ? ? ? ?return ?0;
};
console.log(trueFactorial(5)); ? // 120
console.log(factorial(5)); ? // 0
在此，變量trueFactorial獲得了factorial的值，實際上是在另一個位置上保存了一個函數(shù)的指針。然后，我們又將一個簡單地返回0的函數(shù)賦值給factorial變量。如果像原來的factorial()那樣不使用arguments.callee，調(diào)用trueFactorial()就會返回0。可是，在解除了函數(shù)體內(nèi)的代碼與函數(shù)名的耦合狀態(tài)之后，trueFactorial()仍然能夠正常地計算階乘；至于factorial()，它現(xiàn)在只是一個返回0的函數(shù)。
函數(shù)內(nèi)部的另一個特殊對象是this，其行為與 Java 和 C# 中的this大致類似。換句話說，this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象（當在網(wǎng)頁的全局作用域中調(diào)用函數(shù)時，this對象引用的就是window）。來看下面的例子。
window.color ="red";
var o = {color:"blue"};
function sayColor(){
? ? ? console.log(this.color);
}
sayColor(); ? // "red"
o.sayColor = sayColor;
o.sayColor(); ? // "blue"
上面這個函數(shù)sayColor()是在全局作用域中定義的，它引用了this對象。由于在調(diào)用函數(shù)之前，this的值并不確定，因此this可能會在代碼執(zhí)行過程中引用不同的對象。當在全局作用域中調(diào)用sayColor()時，this引用的是全局對象window；換句話說，對this.color求值會轉(zhuǎn)換成對window.color求值，于是結(jié)果就返回了"red"。而當把這個函數(shù)賦給對象o并調(diào)用o.sayColor()時，this引用的是對象o，因此對this.color求值會轉(zhuǎn)換成對o.color求值，結(jié)果就返回了"blue"。
請大家一定要牢記，函數(shù)的名字僅僅是一個包含指針的變量而已。因此，即使是在不同的環(huán)境中執(zhí)行，全局的sayColor()函數(shù)與o.sayColor()指向的仍然是同一個函數(shù)。
ECMAScript 5也規(guī)范化了另一個函數(shù)對象的屬性caller。這個屬性中保存著「調(diào)用當前函數(shù)的函數(shù)的引用」，如果是在全局作用域中調(diào)用當前函數(shù)，它的值為null。例如：
function ?outer(){ ?
? ? ? ? inner();
}
function ?inner(){
? ? ? console.log(arguments.callee.caller);
}
outer();
以上代碼會導(dǎo)致警告框中顯示outer()函數(shù)的源代碼。因為outer()調(diào)用了inter()，所以arguments.callee.caller就指向outer()。
在嚴格模式下，訪問arguments.callee屬性，或為函數(shù)的caller屬性賦值，都會導(dǎo)致錯誤。
函數(shù)的屬性和方法
JavaScript 中的函數(shù)是對象，因此函數(shù)也有屬性和方法。每個函數(shù)都包含兩個屬性：length和prototype。其中，length屬性表示函數(shù)希望接收的命名參數(shù)的個數(shù)，如下面的例子所示。
function ? sayName(name){
? ? ? ? console.log(name);
}
function ? sum(num1, num2){
? ? ?return ? ?num1 + num2;
}
function ? sayHi(){
? ? ? console.log("hi");
}
console.log(sayName.length); ? ? // 1
console.log(sum.length); ? // 2
console.log(sayHi.length); ? // 0
對于 JavaScript 中的引用類型而言，prototype是保存它們所有實例方法的真正所在。換句話說，諸如toString()和valueOf()等方法實際上都保存在prototype名下，只不過是通過各自對象的實例訪問罷了。在創(chuàng)建自定義引用類型以及實現(xiàn)繼承時，prototype屬性的作用是極為重要的。在 ECMAScript 5中，prototype屬性是不可枚舉的，因此使用for-in無法發(fā)現(xiàn)。
每個函數(shù)都包含兩個非繼承而來的方法：apply()和call()。這兩個方法的用途都是在特定的作用域中調(diào)用函數(shù)，實際上等于設(shè)置函數(shù)體內(nèi)this對象的值。首先，apply()方法接收兩個參數(shù)：一個是在其中運行函數(shù)的作用域，另一個是參數(shù)數(shù)組。其中，第二個參數(shù)可以是Array的實例，也可以是arguments對象。例如：
function ? sum(num1, num2){
? ? ? ?return ? num1 + num2;
}
function ? ?callSum1(num1, num2){
? ? ? ?return ? sum.apply(this,arguments); ?// 傳入 arguments 對象
}
function ? callSum2(num1, num2){
? ? ? return ? sum.apply(this, [num1, num2]); ? // 傳入數(shù)組
}
console.log(callSum1(10,10)); ? // 20
console.log(callSum2(10,10)); ? // 20
在上面這個例子中，callSum1()在執(zhí)行sum()函數(shù)時傳入了this（因為是在全局作用域中調(diào)用的，所以傳入的就是window對象）和arguments對象。而callSum2同樣也調(diào)用了sum()函數(shù)，但它傳入的則是this和一個參數(shù)數(shù)組。這兩個函數(shù)都會正常執(zhí)行并返回正確的結(jié)果。
call()方法與apply()方法的作用相同，它們的區(qū)別僅在于接收參數(shù)的方式不同。對于call()方法而言，第一個參數(shù)是this值沒有變化，變化的是其余參數(shù)都直接傳遞給函數(shù)。換句話說，在使用call()方法時，傳遞給函數(shù)的參數(shù)必須逐個列舉出來，如下面的例子所示。
function ? sum(num1, num2){
? ? ? ? returnnum1 + num2;
}
function ? callSum(num1, num2){
? ? ? ?returnsum.call(this, num1, num2);
}
console.log(callSum(10,10)); ? // 20
在使用call()方法的情況下，callSum()必須明確地傳入每一個參數(shù)。結(jié)果與使用apply()沒有什么不同。至于是使用apply()還是call()，完全取決于你采取哪種給函數(shù)傳遞參數(shù)的方式最方便。如果你打算直接傳入arguments對象，或者包含函數(shù)中先接收到的也是一個數(shù)組，那么使用apply()肯定更方便；否則，選擇call()可能更合適。（在不給函數(shù)傳遞參數(shù)的情況下，使用哪個方法都無所謂。）
事實上，傳遞參數(shù)并非apply()和call()真正的用武之地；它們真正強大的地方是能夠擴充函數(shù)賴以運行的作用域。下面來看一個例子。
window.color ="red";
var o = {color:"blue"};
function ? sayColor(){
? ? ? ? console.log(this.color);
}
sayColor(); ? // red
sayColor.call(this); ? // red
sayColor.call(window); ? // red
sayColor.call(o); ? // blue
這個例子是在前面說明this對象的示例基礎(chǔ)上修改而成的。這一次，sayColor()也是作為全局函數(shù)定義的，而且當在全局作用域中調(diào)用它時，它確實會顯示"red"，因為對this.color的求值會轉(zhuǎn)換成對window.color的求值。而sayColor.call(this)和sayColor.call(window)，則是兩種顯式地在全局作用域中調(diào)用函數(shù)的方式，結(jié)果當然都會顯示"red"。但是，當運行sayColor.call(o)時，函數(shù)的執(zhí)行環(huán)境就不一樣了，因為此時函數(shù)體內(nèi)的this對象指向了o，于是結(jié)果顯示的是"blue"。
使用call()或apply()來擴充作用域的最大好處，就是對象不需要與方法有任何耦合關(guān)系。在前面例子的第一個版本中，我們是先將sayColor()函數(shù)放到了對象o中，然后再通過o來調(diào)用它的；而在這里重寫的例子中，就不需要先前那個多余的步驟了。
