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