本文檔內(nèi)容參考 《JavaScript 闖關(guān)記》之函數(shù)

函數(shù)是一段代碼，它只定義一次究恤，但可以被執(zhí)行或調(diào)用任意次俭令。在 JavaScript 里，函數(shù)即對(duì)象部宿，程序可以隨意操控它們抄腔。比如瓢湃，可以把函數(shù)賦值給變量，或者作為參數(shù)傳遞給其他函數(shù)赫蛇，也可以給它們?cè)O(shè)置屬性绵患，甚至調(diào)用它們的方法。如果函數(shù)掛載在一個(gè)對(duì)象上悟耘，作為對(duì)象的一個(gè)屬性落蝙，就稱它為對(duì)象的方法。如果函數(shù)嵌套在其他函數(shù)中定義暂幼，這樣它們就可以訪問(wèn)它們被定義時(shí)所處的作用域中的任何變量筏勒。

函數(shù)定義

在 JavaScript 中，函數(shù)實(shí)際上是對(duì)象旺嬉，每個(gè)函數(shù)都是Function構(gòu)造函數(shù)的實(shí)例管行，因此函數(shù)名實(shí)際上也是一個(gè)指向函數(shù)對(duì)象的指針，不會(huì)與某個(gè)函數(shù)綁定邪媳。函數(shù)通常有以下3中定義方式捐顷。例如：

// 寫法一：函數(shù)聲明（推薦寫法）

function ? sum(num1, num2){

? ? ? ? ?return ? num1 + num2;

}

// 寫法二：函數(shù)表達(dá)式（推薦寫法）

var ? ?sum =function(num1, num2){

? ? ? ? return ? ?num1 + num2;

};

// 寫法三：Function 構(gòu)造函數(shù)（不推薦寫法）

var ? sum =new ? Function("num1","num2","return num1 + num2");

由于函數(shù)名僅僅是指向函數(shù)的指針，因此函數(shù)名與包含對(duì)象指針的其他變量沒(méi)有什么不同雨效。換句話說(shuō)迅涮，一個(gè)函數(shù)可能會(huì)有多個(gè)名字。例如：

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

沒(méi)有重載

將函數(shù)名想象為指針设易，也有助于理解為什么 JavaScript 中沒(méi)有函數(shù)重載的概念逗柴。

function ? addSomeNumber(num){

? return ? num +100;

}

function ? addSomeNumber(num){

? return ? num +200;

}

var ? result = addSomeNumber(100); ?// 300

顯然，這個(gè)例子中聲明了兩個(gè)同名函數(shù)顿肺，而結(jié)果則是后面的函數(shù)覆蓋了前面的函數(shù)戏溺。以上代碼實(shí)際上與下面的代碼沒(méi)有什么區(qū)別。

var ? addSomeNumber = function(num){

? return ? num +100;

};

addSomeNumber = function(num){

? return ? num +200;

};

var ? result = addSomeNumber(100); ? // 300

通過(guò)重寫代碼之后可以很容易明白屠尊，在創(chuàng)建第二個(gè)函數(shù)時(shí)旷祸，實(shí)際上覆蓋了引用第一個(gè)函數(shù)的變量addSomeNumber。

函數(shù)聲明與函數(shù)表達(dá)式（函數(shù)是js中的一等公民讼昆，JavaScript 引擎在渲染js時(shí)會(huì)把通過(guò)函數(shù)聲明聲明的函數(shù)放在js的頂部?jī)?yōu)先解析）

解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時(shí)托享，對(duì)「函數(shù)聲明」和「函數(shù)表達(dá)式」并非一視同仁。解析器會(huì)率先讀取函數(shù)聲明浸赫，并使其在執(zhí)行任何代碼之前可用（可以訪問(wèn)）闰围；至于函數(shù)表達(dá)式，則必須等到解析器執(zhí)行到它所在的代碼行既峡，才會(huì)真正被解釋執(zhí)行羡榴。例如：

console.log(sum(10,10)); ? // 20

function ? sum(num1, num2){

? return ? num1 + num2;

}

以上代碼完全可以正常運(yùn)行。因?yàn)樵诖a開(kāi)始執(zhí)行之前运敢，解析器就已經(jīng)通過(guò)一個(gè)名為函數(shù)聲明提升（function declaration hoisting）的過(guò)程校仑，讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中忠售。對(duì)代碼求值時(shí)，JavaScript 引擎在第一遍會(huì)聲明函數(shù)并將它們放到源代碼樹(shù)的頂部迄沫。所以稻扬，即使聲明函數(shù)的代碼在調(diào)用它的代碼后面，JavaScript 引擎也能把函數(shù)聲明提升到頂部羊瘩。把上面的「函數(shù)聲明」改為等價(jià)的「函數(shù)表達(dá)式」泰佳，就會(huì)在執(zhí)行期間導(dǎo)致錯(cuò)誤。例如：

console.log(sum(10,10)); ? // Uncaught TypeError: sum is not a function

var ? sum =function(num1, num2){

? return ? num1 + num2;

};

除了上述區(qū)別之外尘吗，「函數(shù)聲明」與「函數(shù)表達(dá)式」的語(yǔ)法是等價(jià)的乐纸。

作為值的函數(shù)

因?yàn)?JavaScript 中的函數(shù)名本身就是變量，所以函數(shù)也可以作為值來(lái)使用摇予。也就是說(shuō)，不僅可以像傳遞參數(shù)一樣把一個(gè)函數(shù)傳遞給另一個(gè)函數(shù)吗跋，而且可以將一個(gè)函數(shù)作為另一個(gè)函數(shù)的結(jié)果返回侧戴。來(lái)看一看下面的函數(shù)。

function ? callSomeFunction(someFunction, someArgument){

? return ? someFunction(someArgument);

}

這個(gè)函數(shù)接受兩個(gè)參數(shù)跌宛。第一個(gè)參數(shù)應(yīng)該是一個(gè)函數(shù)酗宋，第二個(gè)參數(shù)應(yīng)該是要傳遞給該函數(shù)的一個(gè)值。然后疆拘，就可以像下面的例子一樣傳遞函數(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ù)是通用的，即無(wú)論第一個(gè)參數(shù)中傳遞進(jìn)來(lái)的是什么函數(shù)哎迄，它都會(huì)返回執(zhí)行第一個(gè)參數(shù)后的結(jié)果回右。要訪問(wèn)函數(shù)的指針而不執(zhí)行函數(shù)的話，必須去掉函數(shù)名后面的那對(duì)圓括號(hào)漱挚。因此上面例子中傳遞給callSomeFunction()的是add10和getGreeting翔烁，而不是執(zhí)行它們之后的結(jié)果。

當(dāng)然旨涝，還可以從一個(gè)函數(shù)中返回另一個(gè)函數(shù)蹬屹，而且這也是極為有用的一種技術(shù)。例如白华，假設(shè)有一個(gè)對(duì)象數(shù)組慨默，我們想要根據(jù)某個(gè)對(duì)象屬性對(duì)數(shù)組進(jìn)行排序。而傳遞給數(shù)組sort()方法的比較函數(shù)要接收兩個(gè)參數(shù)弧腥，即要比較的值厦取。可是鸟赫，我們需要一種方式來(lái)指明按照哪個(gè)屬性來(lái)排序蒜胖。要解決這個(gè)問(wèn)題消别，可以定義一個(gè)函數(shù)，它接收一個(gè)屬性名台谢，然后根據(jù)這個(gè)屬性名來(lái)創(chuàng)建一個(gè)比較函數(shù)寻狂，下面就是這個(gè)函數(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; ? ? ? ?

? ? ? ? ? ? ? ?} ? ?

? ? ? ?}

}

這個(gè)函數(shù)定義看起來(lái)有點(diǎn)復(fù)雜朋沮，但實(shí)際上無(wú)非就是在一個(gè)函數(shù)中嵌套了另一個(gè)函數(shù)蛇券，而且內(nèi)部函數(shù)前面加了一個(gè)return操作符。在內(nèi)部函數(shù)接收到propertyName參數(shù)后樊拓，它會(huì)使用方括號(hào)表示法來(lái)取得給定屬性的值纠亚。取得了想要的屬性值之后，定義比較函數(shù)就非常簡(jiǎn)單了筋夏。上面這個(gè)函數(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)建了一個(gè)包含兩個(gè)對(duì)象的數(shù)組data条篷。其中骗随，每個(gè)對(duì)象都包含一個(gè)name屬性和一個(gè)age屬性。在默認(rèn)情況下赴叹，sort()方法會(huì)調(diào)用每個(gè)對(duì)象的toString()方法以確定它們的次序鸿染；但得到的結(jié)果往往并不符合人類的思維習(xí)慣。因此乞巧，我們調(diào)用createComparisonFunction("name")方法創(chuàng)建了一個(gè)比較函數(shù)涨椒，以便按照每個(gè)對(duì)象的name屬性值進(jìn)行排序。而結(jié)果排在前面的第一項(xiàng)是name為"Nicholas"绽媒，age是29的對(duì)象蚕冬。然后，我們又使用了createComparisonFunction("age")返回的比較函數(shù)些椒，這次是按照對(duì)象的age屬性排序播瞳。得到的結(jié)果是name值為"Zachary"，age值是28的對(duì)象排在了第一位免糕。

函數(shù)的形參和實(shí)參

在函數(shù)內(nèi)部赢乓，有兩個(gè)特殊的對(duì)象：arguments和this。其中石窑，arguments是一個(gè)類數(shù)組對(duì)象牌芋，包含著傳入函數(shù)中的所有參數(shù)。雖然arguments的主要用途是保存函數(shù)參數(shù)松逊，但這個(gè)對(duì)象還有一個(gè)名叫callee的屬性躺屁，該屬性是一個(gè)指針，指向擁有這個(gè)arguments對(duì)象的函數(shù)经宏。請(qǐng)看下面這個(gè)非常經(jīng)典的階乘函數(shù)犀暑。

function ? factorial(num){

? ? ? ? if(num <=1) {

? ? ? ? ? ? ? ? ? ?return 1; ?

? ? ? ? }else{

? ? ? ? ? ? ? ? ? return ?num * factorial(num-1) ? ?

? ? ? ?}

}

定義階乘函數(shù)一般都要用到遞歸算法驯击，如上面的代碼所示，在函數(shù)有名字耐亏，而且名字以后也不會(huì)變的情況下徊都，這樣定義沒(méi)有問(wèn)題。但問(wèn)題是這個(gè)函數(shù)的執(zhí)行與函數(shù)名factorial緊緊耦合在了一起广辰。為了消除這種緊密耦合的現(xiàn)象暇矫，可以像下面這樣使用arguments.callee。

function ? factorial(num){

? ? ? ? ? ? if(num <=1) {

? ? ? ? ? ? ? ? ? ? ? ?return ?1; ?

? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? ? return ?num *arguments.callee(num-1) ?

? ? ? ? }

}

在這個(gè)重寫后的factorial()函數(shù)的函數(shù)體內(nèi)择吊，沒(méi)有再引用函數(shù)名factorial李根。這樣，無(wú)論引用函數(shù)時(shí)使用的是什么名字几睛，都可以保證正常完成遞歸調(diào)用房轿。例如：

var ? trueFactorial = factorial;

factorial =function(){

? ? ? ? ?return ?0;

};

console.log(trueFactorial(5)); ? // 120

console.log(factorial(5)); ? // 0

在此，變量trueFactorial獲得了factorial的值所森，實(shí)際上是在另一個(gè)位置上保存了一個(gè)函數(shù)的指針冀续。然后，我們又將一個(gè)簡(jiǎn)單地返回0的函數(shù)賦值給factorial變量必峰。如果像原來(lái)的factorial()那樣不使用arguments.callee，調(diào)用trueFactorial()就會(huì)返回0钻蹬『鹨希可是，在解除了函數(shù)體內(nèi)的代碼與函數(shù)名的耦合狀態(tài)之后问欠，trueFactorial()仍然能夠正常地計(jì)算階乘肝匆；至于factorial()，它現(xiàn)在只是一個(gè)返回0的函數(shù)顺献。

函數(shù)內(nèi)部的另一個(gè)特殊對(duì)象是this旗国，其行為與 Java 和 C# 中的this大致類似。換句話說(shuō)注整，this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象（當(dāng)在網(wǎng)頁(yè)的全局作用域中調(diào)用函數(shù)時(shí)能曾，this對(duì)象引用的就是window）。來(lái)看下面的例子肿轨。

window.color ="red";

var o = {color:"blue"};

function sayColor(){

? ? ? console.log(this.color);

}

sayColor(); ? // "red"

o.sayColor = sayColor;

o.sayColor(); ? // "blue"

上面這個(gè)函數(shù)sayColor()是在全局作用域中定義的寿冕，它引用了this對(duì)象。由于在調(diào)用函數(shù)之前椒袍，this的值并不確定驼唱，因此this可能會(huì)在代碼執(zhí)行過(guò)程中引用不同的對(duì)象。當(dāng)在全局作用域中調(diào)用sayColor()時(shí)驹暑，this引用的是全局對(duì)象window玫恳；換句話說(shuō)辨赐，對(duì)this.color求值會(huì)轉(zhuǎn)換成對(duì)window.color求值，于是結(jié)果就返回了"red"京办。而當(dāng)把這個(gè)函數(shù)賦給對(duì)象o并調(diào)用o.sayColor()時(shí)掀序，this引用的是對(duì)象o，因此對(duì)this.color求值會(huì)轉(zhuǎn)換成對(duì)o.color求值臂港，結(jié)果就返回了"blue"森枪。

請(qǐng)大家一定要牢記，函數(shù)的名字僅僅是一個(gè)包含指針的變量而已审孽。因此县袱，即使是在不同的環(huán)境中執(zhí)行，全局的sayColor()函數(shù)與o.sayColor()指向的仍然是同一個(gè)函數(shù)佑力。

ECMAScript 5也規(guī)范化了另一個(gè)函數(shù)對(duì)象的屬性caller式散。這個(gè)屬性中保存著「調(diào)用當(dāng)前函數(shù)的函數(shù)的引用」，如果是在全局作用域中調(diào)用當(dāng)前函數(shù)打颤，它的值為null暴拄。例如：

function ?outer(){ ?

? ? ? ? inner();

}

function ?inner(){

? ? ? console.log(arguments.callee.caller);

}

outer();

以上代碼會(huì)導(dǎo)致警告框中顯示outer()函數(shù)的源代碼。因?yàn)閛uter()調(diào)用了inter()编饺，所以arguments.callee.caller就指向outer()乖篷。

在嚴(yán)格模式下，訪問(wèn)arguments.callee屬性透且，或?yàn)楹瘮?shù)的caller屬性賦值撕蔼，都會(huì)導(dǎo)致錯(cuò)誤。

函數(shù)的屬性和方法

JavaScript 中的函數(shù)是對(duì)象秽誊，因此函數(shù)也有屬性和方法鲸沮。每個(gè)函數(shù)都包含兩個(gè)屬性：length和prototype。其中锅论，length屬性表示函數(shù)希望接收的命名參數(shù)的個(gè)數(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

對(duì)于 JavaScript 中的引用類型而言最易，prototype是保存它們所有實(shí)例方法的真正所在怒坯。換句話說(shuō)，諸如toString()和valueOf()等方法實(shí)際上都保存在prototype名下藻懒，只不過(guò)是通過(guò)各自對(duì)象的實(shí)例訪問(wèn)罷了敬肚。在創(chuàng)建自定義引用類型以及實(shí)現(xiàn)繼承時(shí)，prototype屬性的作用是極為重要的束析。在 ECMAScript 5中艳馒，prototype屬性是不可枚舉的，因此使用for-in無(wú)法發(fā)現(xiàn)。

每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：apply()和call()弄慰。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)第美，實(shí)際上等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值。首先陆爽，apply()方法接收兩個(gè)參數(shù)：一個(gè)是在其中運(yùn)行函數(shù)的作用域什往，另一個(gè)是參數(shù)數(shù)組。其中慌闭，第二個(gè)參數(shù)可以是Array的實(shí)例别威，也可以是arguments對(duì)象。例如：

function ? sum(num1, num2){

? ? ? ?return ? num1 + num2;

}

function ? ?callSum1(num1, num2){

? ? ? ?return ? sum.apply(this,arguments); ?// 傳入 arguments 對(duì)象

}

function ? callSum2(num1, num2){

? ? ? return ? sum.apply(this, [num1, num2]); ? // 傳入數(shù)組

}

console.log(callSum1(10,10)); ? // 20

console.log(callSum2(10,10)); ? // 20

在上面這個(gè)例子中驴剔，callSum1()在執(zhí)行sum()函數(shù)時(shí)傳入了this（因?yàn)槭窃谌肿饔糜蛑姓{(diào)用的省古，所以傳入的就是window對(duì)象）和arguments對(duì)象。而callSum2同樣也調(diào)用了sum()函數(shù)丧失，但它傳入的則是this和一個(gè)參數(shù)數(shù)組豺妓。這兩個(gè)函數(shù)都會(huì)正常執(zhí)行并返回正確的結(jié)果。

call()方法與apply()方法的作用相同布讹，它們的區(qū)別僅在于接收參數(shù)的方式不同琳拭。對(duì)于call()方法而言，第一個(gè)參數(shù)是this值沒(méi)有變化描验，變化的是其余參數(shù)都直接傳遞給函數(shù)白嘁。換句話說(shuō)，在使用call()方法時(shí)膘流，傳遞給函數(shù)的參數(shù)必須逐個(gè)列舉出來(lái)权薯，如下面的例子所示。

function ? sum(num1, num2){

? ? ? ? returnnum1 + num2;

}

function ? callSum(num1, num2){

? ? ? ?returnsum.call(this, num1, num2);

}

console.log(callSum(10,10)); ? // 20

在使用call()方法的情況下睡扬，callSum()必須明確地傳入每一個(gè)參數(shù)。結(jié)果與使用apply()沒(méi)有什么不同黍析。至于是使用apply()還是call()卖怜，完全取決于你采取哪種給函數(shù)傳遞參數(shù)的方式最方便。如果你打算直接傳入arguments對(duì)象阐枣，或者包含函數(shù)中先接收到的也是一個(gè)數(shù)組马靠，那么使用apply()肯定更方便；否則蔼两，選擇call()可能更合適甩鳄。（在不給函數(shù)傳遞參數(shù)的情況下，使用哪個(gè)方法都無(wú)所謂额划。）

事實(shí)上妙啃，傳遞參數(shù)并非apply()和call()真正的用武之地；它們真正強(qiáng)大的地方是能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域。下面來(lái)看一個(gè)例子揖赴。

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

這個(gè)例子是在前面說(shuō)明this對(duì)象的示例基礎(chǔ)上修改而成的馆匿。這一次，sayColor()也是作為全局函數(shù)定義的燥滑，而且當(dāng)在全局作用域中調(diào)用它時(shí)渐北，它確實(shí)會(huì)顯示"red"，因?yàn)閷?duì)this.color的求值會(huì)轉(zhuǎn)換成對(duì)window.color的求值铭拧。而sayColor.call(this)和sayColor.call(window)赃蛛，則是兩種顯式地在全局作用域中調(diào)用函數(shù)的方式，結(jié)果當(dāng)然都會(huì)顯示"red"。但是，當(dāng)運(yùn)行sayColor.call(o)時(shí)宏娄，函數(shù)的執(zhí)行環(huán)境就不一樣了延届，因?yàn)榇藭r(shí)函數(shù)體內(nèi)的this對(duì)象指向了o，于是結(jié)果顯示的是"blue"怎披。

使用call()或apply()來(lái)擴(kuò)充作用域的最大好處，就是對(duì)象不需要與方法有任何耦合關(guān)系。在前面例子的第一個(gè)版本中疏尿，我們是先將sayColor()函數(shù)放到了對(duì)象o中，然后再通過(guò)o來(lái)調(diào)用它的易桃；而在這里重寫的例子中褥琐，就不需要先前那個(gè)多余的步驟了。