《JavaScript高級程序設計》讀書筆記 ---Function 類型

提及來ECMAScript 中什麼最有意思，我想那莫過於函數了——而有意思的根源，則在於函數其實是對象。每一個函數都是Function 類型的實例，並且都與其餘引用類型同樣具備屬性和方法。因爲函數是對象，所以函數名實際上也是一個指向函數對象的指針，不會與某個函數綁定。函數一般是使用函數聲明語法定義的，以下面的例子所示。
function sum (num1, num2) {
　　return num1 + num2;
}
這與下面使用函數表達式定義函數的方式幾乎相差無幾。
var sum = function(num1, num2){
　　return num1 + num2;
};
以上代碼定義了變量sum 並將其初始化爲一個函數。有讀者可能會注意到，function 關鍵字後面沒有函數名。這是由於在使用函數表達式定義函數時，沒有必要使用函數名——經過變量sum 便可以引用函數。另外，還要注意函數末尾有一個分號，就像聲明其餘變量時同樣。
最後一種定義函數的方式是使用Function 構造函數。Function 構造函數能夠接收任意數量的參數，但最後一個參數始終都被當作是函數體，而前面的參數則枚舉出了新函數的參數。來看下面的例子：
var sum = new Function("num1", "num2", "return num1 + num2"); // 不推薦
從技術角度講，這是一個函數表達式。可是，咱們不推薦讀者使用這種方法定義函數，由於這種語法會致使解析兩次代碼（第一次是解析常規ECMAScript 代碼，第二次是解析傳入構造函數中的字符串），從而影響性能。不過，這種語法對於理解「函數是對象，函數名是指針」的概念卻是很是直觀的。
因爲函數名僅僅是指向函數的指針，所以函數名與包含對象指針的其餘變量沒有什麼不一樣。換句話說，一個函數可能會有多個名字，以下面的例子所示。

function sum(num1, num2){
　　return num1 + num2;
}
alert(sum(10,10)); 　　//20
var anotherSum = sum;
alert(anotherSum(10,10)); 　　//20
sum = null;
alert(anotherSum(10,10)); 　　//20

以上代碼首先定義了一個名爲sum()的函數，用於求兩個值的和。而後，又聲明瞭變量anotherSum，並將其設置爲與sum 相等（將sum 的值賦給anotherSum）。注意，使用不帶圓括號的函數名是訪問函數指針，而非調用函數。此時，anotherSum 和sum 就都指向了同一個函數，所以anotherSum()也能夠被調用並返回結果。即便將sum 設置爲null，讓它與函數「斷絕關係」，但仍然能夠正常調用anotherSum()。

 

沒有重載（深刻理解）
將函數名想象爲指針，也有助於理解爲何ECMAScript 中沒有函數重載的概念。如下是曾在第3章使用過的例子。
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。

 

函數聲明與函數表達式
本節到目前爲止，咱們一直沒有對函數聲明和函數表達式加以區別。而實際上，解析器在向執行環境中加載數據時，對函數聲明和函數表達式並不是一視同仁。解析器會率先讀取函數聲明，並使其在執行任何代碼以前可用（能夠訪問）；至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解釋執行。請看下面的例子。
alert(sum(10,10));
function sum(num1, num2){
　　return num1 + num2;
}

以上代碼徹底能夠正常運行。由於在代碼開始執行以前，解析器就已經經過一個名爲函數聲明提高（function declaration hoisting）的過程，讀取並將函數聲明添加到執行環境中。對代碼求值時，JavaScript引擎在第一遍會聲明函數並將它們放到源代碼樹的頂部。因此，即便聲明函數的代碼在調用它的代碼後面，JavaScript 引擎也能把函數聲明提高到頂部。若是像下面例子所示的，把上面的函數聲明改成等價的函數表達式，就會在執行期間致使錯誤。

alert(sum(10,10));
var sum = function(num1, num2){
　　return num1 + num2;
};

以上代碼之因此會在運行期間產生錯誤，緣由在於函數位於一個初始化語句中，而不是一個函數聲明。換句話說，在執行到函數所在的語句以前，變量sum 中不會保存有對函數的引用；並且，因爲第一行代碼就會致使「unexpected identifier」（意外標識符）錯誤，實際上也不會執行到下一行。除了何時能夠經過變量訪問函數這一點區別以外，函數聲明與函數表達式的語法實際上是等價的。

注：也能夠同時使用函數聲明和函數表達式，例如var sum = function sum(){}。不過，這種語法在Safari 中會致使錯誤。

 

做爲值的函數
由於ECMAScript 中的函數名自己就是變量，因此函數也能夠做爲值來使用。也就是說，不只能夠像傳遞參數同樣把一個函數傳遞給另外一個函數，並且能夠將一個函數做爲另外一個函數的結果返回。來看一看下面的函數。
function callSomeFunction(someFunction, someArgument){
　　return someFunction(someArgument);
}
這個函數接受兩個參數。第一個參數應該是一個函數，第二個參數應該是要傳遞給該函數的一個值。而後，就能夠像下面的例子同樣傳遞函數了。
function add10(num){
　　return num + 10;
}
var result1 = callSomeFunction(add10, 10);
alert(result1); 　　//20
function getGreeting(name){
　　return "Hello, " + name;
}
var result2 = callSomeFunction(getGreeting, "Nicholas");
alert(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"));
alert(data[0].name); 　　//Nicholas
data.sort(createComparisonFunction("age"));
alert(data[0].name); 　　//Zachary
這裏，咱們建立了一個包含兩個對象的數組data。其中，每一個對象都包含一個name 屬性和一個age 屬性。在默認狀況下，sort()方法會調用每一個對象的toString()方法以肯定它們的次序；但獲得的結果每每並不符合人類的思惟習慣。所以，咱們調用createComparisonFunction("name")方法建立了一個比較函數，以便按照每一個對象的name 屬性值進行排序。而結果排在前面的第一項是name爲"Nicholas"，age 是29 的對象。而後，咱們又使用了createComparisonFunction("age")返回的比較函數，此次是按照對象的age 屬性排序。獲得的結果是name 值爲"Zachary"，age 值是28 的對象排在了第一位。

 

函數內部屬性
在函數內部，有兩個特殊的對象：arguments 和this。其中，arguments 在第3 章曾經介紹過，它是一個類數組對象，包含着傳入函數中的全部參數。雖然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;
};
alert(trueFactorial(5)); //120
aler t(factorial(5)); //0
在此，變量trueFactorial 得到了factorial 的值，其實是在另外一個位置上保存了一個函數的指針。而後，咱們又將一個簡單地返回0 的函數賦值給factorial 變量。若是像原來的factorial()那樣不使用arguments.callee，調用trueFactorial()就會返回0。但是，在解除了函數體內的代碼與函數名的耦合狀態以後，trueFactorial()仍然可以正常地計算階乘；至於factorial()，它如今只是一個返回0 的函數。
函數內部的另外一個特殊對象是this，其行爲與Java 和C#中的this 大體相似。換句話說，this引用的是函數據以執行的環境對象——或者也能夠說是this 值（當在網頁的全局做用域中調用函數時，this 對象引用的就是window）。來看下面的例子。
window.color = "red";
var o = { color: "blue" };
function sayColor(){
　　alert(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。除了Opera 的早期版本不支持，其餘瀏覽器都支持這個ECMAScript 3 並無定義的屬性。這個屬性中保存着調用當前函數的函數的引用，若是是在全局做用域中調用當前函數，它的值爲null。例如：
function outer(){
　　inner();
}
function inner(){
　　alert(inner.caller);
}
outer();

以上代碼會致使警告框中顯示outer()函數的源代碼。由於outer()調用了inter()，因此inner.caller 就指向outer()。爲了實現更鬆散的耦合，也能夠經過arguments.callee.caller來訪問相同的信息。
function outer(){
　　inner();
}
function inner(){
　　alert(arguments.callee.caller);
}
outer();

IE、Firefox、Chrome 和Safari 的全部版本以及Opera 9.6 都支持caller 屬性。
當函數在嚴格模式下運行時，訪問arguments.callee 會致使錯誤。ECMAScript 5 還定義了arguments.caller 屬性，但在嚴格模式下訪問它也會致使錯誤，而在非嚴格模式下這個屬性始終是undefined。定義這個屬性是爲了分清arguments.caller 和函數的caller 屬性。以上變化都是爲了增強這門語言的安全性，這樣第三方代碼就不能在相同的環境裏窺視其餘代碼了。
嚴格模式還有一個限制：不能爲函數的caller 屬性賦值，不然會致使錯誤。

 

函數屬性和方法
前面曾經提到過，ECMAScript 中的函數是對象，所以函數也有屬性和方法。每一個函數都包含兩個屬性：length 和prototype。其中，length 屬性表示函數但願接收的命名參數的個數，以下面的例子所示。
function sayName(name){
　　alert(name);
}
function sum(num1, num2){
　　return num1 + num2;
}
function sayHi(){
　　alert("hi");
}
alert(sayName.length); //1
alert(sum.length); //2
alert(sayHi.length); //0

以上代碼定義了3 個函數，但每一個函數接收的命名參數個數不一樣。首先，sayName()函數定義了一個參數，所以其length 屬性的值爲1。相似地，sum()函數定義了兩個參數，結果其length 屬性中保存的值爲2。而sayHi()沒有命名參數，因此其length 值爲0。
在ECMAScript 核心所定義的所有屬性中，最回味無窮的就要數prototype 屬性了。對於ECMAScript 中的引用類型而言，prototype 是保存它們全部實例方法的真正所在。換句話說，諸如toString()和valueOf()等方法實際上都保存在prototype 名下，只不過是經過各自對象的實例訪問罷了。在建立自定義引用類型以及實現繼承時，prototype 屬性的做用是極爲重要的（第6 章將詳細介紹）。在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]); 　　// 傳入數組
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20

在上面這個例子中，callSum1()在執行sum()函數時傳入了this 做爲this 值（由於是在全局做用域中調用的，因此傳入的就是window 對象）和arguments 對象。而callSum2 一樣也調用了sum()函數，但它傳入的則是this 和一個參數數組。這兩個函數都會正常執行並返回正確的結果。

注：在嚴格模式下，未指定環境對象而調用函數，則this 值不會轉型爲window。除非明確把函數添加到某個對象或者調用apply()或call()，不然this 值將是undefined。

 

call()方法與apply()方法的做用相同，它們的區別僅在於接收參數的方式不一樣。對於call() 方法而言，第一個參數是this 值沒有變化，變化的是其他參數都直接傳遞給函數。換句話說，在使用call()方法時，傳遞給函數的參數必須逐個列舉出來，以下面的例子所示。
function sum(num1, num2){
　　return num1 + num2;
}
function callSum(num1, num2){
　　return sum.call(this, num1, num2);
}
alert(callSum(10,10)); //20

在使用call()方法的狀況下，callSum()必須明確地傳入每個參數。結果與使用apply()沒有什麼不一樣。至因而使用apply()仍是call()，徹底取決於你採起哪一種給函數傳遞參數的方式最方便。若是你打算直接傳入arguments 對象，或者包含函數中先接收到的也是一個數組，那麼使用apply() 確定更方便；不然，選擇call()可能更合適。（在不給函數傳遞參數的狀況下，使用哪一個方法都無所謂。）
事實上，傳遞參數並不是apply()和call()真正的用武之地；它們真正強大的地方是可以擴充函數賴以運行的做用域。下面來看一個例子。
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(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 來調用它的；而在這裏重寫的例子中，就不須要先前那個多餘的步驟了。
ECMAScript 5 還定義了一個方法：bind()。這個方法會建立一個函數的實例，其this 值會被綁定到傳給bind()函數的值。例如：
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue

在這裏，sayColor()調用bind()並傳入對象o，建立了objectSayColor()函數。object-SayColor()函數的this 值等於o，所以即便是在全局做用域中調用這個函數，也會看到"blue"。這種技巧的優勢請參考第22 章。支持bind()方法的瀏覽器有IE9+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome。每一個函數繼承的toLocaleString()和toString()方法始終都返回函數的代碼。返回代碼的格式則因瀏覽器而異——有的返回的代碼與源代碼中的函數代碼同樣，而有的則返回函數代碼的內部表示，即由解析器刪除了註釋並對某些代碼做了改動後的代碼。因爲存在這些差別，咱們沒法根據這兩個方法返回的結果來實現任何重要功能；不過，這些信息在調試代碼時卻是頗有用。另一個繼承的valueOf()方法一樣也只返回函數代碼。