《JavaScript 闖關記》之函式

劼哥stone發表於2016-11-07

函式是一段程式碼,它只定義一次,但可以被執行或呼叫任意次。在 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() 的是 add10getGreeting,而不是執行它們之後的結果。

當然,還可以從一個函式中返回另一個函式,而且這也是極為有用的一種技術。例如,假設有一個物件陣列,我們想要根據某個物件屬性對陣列進行排序。而傳遞給陣列 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"age29 的物件。然後,我們又使用了 createComparisonFunction("age") 返回的比較函式,這次是按照物件的age屬性排序。得到的結果是 name 值為 "Zachary"age 值是 28 的物件排在了第一位。

函式的形參和實參

在函式內部,有兩個特殊的物件:argumentsthis。其中,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="">=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 屬性賦值,都會導致錯誤。

函式的屬性和方法

JavaScript 中的函式是物件,因此函式也有屬性和方法。每個函式都包含兩個屬性:lengthprototype。其中,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、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]複製程式碼

更多

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

相關文章