[[173443]]

函數(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中定義方式。例如：

// 寫(xiě)法一：函數(shù)聲明（推薦寫(xiě)法） 
function sum (num1, num2) { 
    return num1 + num2; 
} 
 
// 寫(xiě)法二：函數(shù)表達(dá)式（推薦寫(xiě)法） 
var sum = function(num1, num2){ 
    return num1 + num2; 
}; 
 
// 寫(xiě)法三：Function 構(gòu)造函數(shù)（不推薦寫(xiě)法） 
var sum = new Function("num1", "num2", "return num1 + num2");   

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

function sum(num1, num2){ 
    return num1 + 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ò)重寫(xiě)代碼之后可以很容易明白，在創(chuàng)建第二個(gè)函數(shù)時(shí)，實(shí)際上覆蓋了引用***個(gè)函數(shù)的變量 addSomeNumber。

函數(shù)聲明與函數(shù)表達(dá)式

解析器在向執(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è)重寫(xiě)后的 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)?outer() 調(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){ 
    return num1 + num2; 
} 
 
function callSum(num1, num2){ 
    return sum.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)用它的;而在這里重寫(xiě)的例子中，就不需要先前那個(gè)多余的步驟了。

關(guān)卡

// 挑戰(zhàn)一，合并任意個(gè)數(shù)的字符串 
var concat = function(){ 
    // 待實(shí)現(xiàn)方法體 
} 
console.log(concat('st','on','e'));  // stone 
// 挑戰(zhàn)二，輸出指定位置的斐波那契數(shù)列 
var fioacciSequece = function(count){ 
    // 待實(shí)現(xiàn)方法體 
} 
console.log(fioacciSequece(12));  // 0、1、1、2、3、5、8、13、21、34、55、89 
// 挑戰(zhàn)三，三維數(shù)組或 n 維數(shù)組去重，使用 arguments 重寫(xiě) 
var arr = [2,3,4,[2,3,[2,3,4,2],5],3,5,[2,3,[2,3,4,2],2],4,3,6,2]; 
var unique = function(arr){ 
    // 待實(shí)現(xiàn)方法體 
} 
console.log(unique(arr)); // [2,3,4,5,6]  

更多

關(guān)注微信公眾號(hào)「劼哥舍」回復(fù)「答案」，獲取關(guān)卡詳解。

關(guān)注 https://github.com/stone0090/javascript-lessons，獲取***動(dòng)態(tài)。