《JavaScript 闖關記》之函數

函數是一段代碼，它只定義一次，但能夠被執行或調用任意次。在 JavaScript 裏，函數即對象，程序能夠隨意操控它們。好比，能夠把函數賦值給變量，或者做爲參數傳遞給其餘函數，也能夠給它們設置屬性，甚至調用它們的方法。若是函數掛載在一個對象上，做爲對象的一個屬性，就稱它爲對象的方法。若是函數嵌套在其餘函數中定義，這樣它們就能夠訪問它們被定義時所處的做用域中的任何變量。

函數定義

在 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複製代碼

沒有重載

將函數名想象爲指針，也有助於理解爲何 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。

函數聲明與函數表達式

解析器在向執行環境中加載數據時，對「函數聲明」和「函數表達式」並不是一視同仁。解析器會率先讀取函數聲明，並使其在執行任何代碼以前可用（能夠訪問）；至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解釋執行。例如：

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;
};複製代碼

除了上述區別以外，「函數聲明」與「函數表達式」的語法是等價的。

做爲值的函數

由於 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 的對象排在了第一位。

函數的形參和實參

在函數內部，有兩個特殊的對象：arguments 和 this。其中，arguments 是一個類數組對象，包含着傳入函數中的全部參數。雖然 arguments 的主要用途是保存函數參數，但這個對象還有一個名叫 callee 的屬性，該屬性是一個指針，指向擁有這個 arguments 對象的函數。請看下面這個很是經典的階乘函數。

function factorial(num){
if (num <= 1)="" {="" return="" 1;="" }="" else="" num="" *="" factorial(num-1)="" }<="" code="">
  
  
  

 複製代碼

定義階乘函數通常都要用到遞歸算法，如上面的代碼所示，在函數有名字，並且名字之後也不會變的狀況下，這樣定義沒有問題。但問題是這個函數的執行與函數名 factorial 牢牢耦合在了一塊兒。爲了消除這種緊密耦合的現象，能夠像下面這樣使用 arguments.callee。

function factorial(num){
    if (num <=1) {="" return="" 1;="" }="" else="" num="" *="" arguments.callee(num-1)="" }<="" code="">
  
  
  

 複製代碼

在這個重寫後的 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 屬性賦值，都會致使錯誤。

函數的屬性和方法

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 來調用它的；而在這裏重寫的例子中，就不須要先前那個多餘的步驟了。

關卡

// 挑戰一，合併任意個數的字符串
var concat = function(){
    // 待實現方法體
}
console.log(concat('st','on','e'));  // stone複製代碼

// 挑戰二，輸出指定位置的斐波那契數列
var fioacciSequece = function(count){
    // 待實現方法體
}
console.log(fioacciSequece(12));  // 0、一、一、二、三、五、八、1三、2一、3四、5五、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]複製代碼

更多

關注微信公衆號「劼哥舍」回覆「答案」，獲取關卡詳解。
關注 github.com/stone0090/j…，獲取最新動態。