#第九章Function類型
講師：_無腦碼農(張磊)_
博客：http://www.h5code.com
課程內容：
[TOC]
* * * * *
>在ECMAScript 中，Function(函數)類型實際上是對象。每個函數都是Function 類型的實例，而且都與其他引用類型一樣具有屬性和方法。由于函數是對象，因此函數名實際上也是一個指向函數對象的指針。
###1.>函數的聲明方式
1.普通的函數聲明
~~~
function box(num1, num2) {
return num1+ num2;
}
~~~
2.使用變量初始化函數
~~~
var box= function(num1, num2) {
return num1 + num2;
};
~~~
3.使用Function 構造函數
`var box= new Function('num1', 'num2' ,'return num1 + num2');`
*PS：第三種方式我們不推薦，因為這種語法會導致解析兩次代碼（第一次解析常規ECMAScript代碼，第二次是解析傳入構造函數中的字符串），從而影響性能。但我們可以通過這種語法來理解"函數是對象，函數名是指針"的概念。*
###2.>作為值的函數
>ECMAScript 中的函數名本身就是變量，所以函數也可以作為值來使用。也就是說，不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數，而且可以將一個函數作為另一個函數的結果返回。
~~~
function box(sumFunction, num) {
return sumFunction(num); //someFunction
}
function sum(num) {
return num + 10;
}
var result = box(sum, 10); //傳遞函數到另一個函數里
~~~
###3.>函數的內部屬性
>在函數內部，有兩個特殊的對象：arguments 和this。arguments 是一個類數組對象，包含著傳入函數中的所有參數，主要用途是保存函數參數。但這個對象還有一個名叫callee的屬性，該屬性是一個指針，指向擁有這個arguments 對象的函數。
~~~
function box(num) {
if (num <= 1) {
return 1;
} else {
return num * box(num-1); //一個簡單的的遞歸
}
}
~~~
>對于階乘函數一般要用到遞歸算法，所以函數內部一定會調用自身；如果函數名不改變是沒有問題的，但一旦改變函數名，內部的自身調用需要逐一修改。為了解決這個問題，我們可以使用arguments.callee 來代替。
~~~
function box(num) {
if (num <= 1) {
return 1;
} else {
return num * arguments.callee(num-1);//使用callee 來執行自身
}
}
~~~
>函數內部另一個特殊對象是this，其行為與Java和C#中的this大致相似。換句話說，this引用的是函數據以執行操作的對象，或者說函數調用語句所處的那個作用域。
*PS：當在全局作用域中調用函數時，this 對象引用的就是window。*
~~~
//便于理解的改寫例子
window.color = '紅色的'; //全局的，或者var color = '紅色的';也行
alert(this.color); //打印全局的color
var box = {
color : '藍色的', //局部的color
sayColor : function () {
alert(this.color); //此時的this 只能box 里的color
}
};
box.sayColor(); //打印局部的color
alert(this.color); //還是全局的
//引用教材的原版例子
window.color = '紅色的'; //或者var color = '紅色的';也行
var box = {
color : '藍色的'
};
function sayColor() {
alert(this.color); //這里第一次在外面，第二次在box 里面
}
getColor();
box.sayColor = sayColor; //把函數復制到box 對象里，成為了方法
box.sayColor();
~~~
###4.>函數屬性和方法
>ECMAScript 中的函數是對象，因此函數也有屬性和方法。每個函數都包含兩個屬性：length和prototype。其中，length屬性表示函數希望接收的命名參數的個數。
~~~
function box(name, age) {
alert(name + age);
}
alert(box.length); //2
~~~
*PS：對于prototype屬性，它是保存所有實例方法的真正所在，也就是原型。這個屬性，我們將在面向對象一章詳細介紹。而prototype 下有兩個方法：apply()和call()，每個函數都包含這兩個非繼承而來的方法。這兩個方法的用途都在特定的作用域中調用函數，實際上等于設置函數體內this 對象的值*。
~~~
function box(num1, num2) {
return num1 + num2; //原函數
}
function sayBox(num1, num2) {
return box.apply(this,[num1,num2]);//this表示作用域，這里是window
} //[]表示box 所需要的參數
function sayBox2(num1, num2) {
return box.apply(this, arguments); //arguments 對象表示box 所需要的參數
}
alert(sayBox(10,10)); //20
alert(sayBox2(10,10)); //20
~~~
call()方法于apply()方法相同，他們的區別僅僅在于接收參數的方式不同。對于call()方
法而言，第一個參數是作用域，沒有變化，變化只是其余的參數都是直接傳遞給函數的。
~~~
function box(num1, num2) {
return num1 + num2;
}
function callBox(num1, num2) {
return box.call(this, num1,num2);//和apply區別在于后面的傳參
}
alert(callBox(10,10));
~~~
事實上，傳遞參數并不是apply()和call()方法真正的用武之地；它們經常使用的地方是
能夠擴展函數賴以運行的作用域。
~~~
var color = '紅色的'; //或者window.color = '紅色的';也行
var box = {
color : '藍色的'
};
function sayColor() {
alert(this.color);
}
sayColor(); //作用域在window
sayColor.call(this); //作用域在window
sayColor.call(window); //作用域在window
sayColor.call(box); //作用域在box，對象冒充
~~~
>這個例子是之前作用域理解的例子修改而成，我們可以發現當我們使用call(box)方法的時候，sayColor()方法的運行環境已經變成了box 對象里了。
使用call()或者apply()來擴充作用域的最大好處，就是對象不需要與方法發生任何耦合關系(耦合，就是互相關聯的意思，擴展和維護會發生連鎖反應)。也就是說，box對象和sayColor()方法之間不會有多余的關聯操作，比如box.sayColor = sayColor;
