前言

上一篇文章 《「前端面試題系列4」this 的原理以及用法》 中，提到了 call 和 apply。

它們最主要的作用，是改變 this 的指向。在平時的工作中，除了在寫一些基礎類，或者公用庫方法的時候會用到它們，其他時候 call 和 apply 的應用場景並不多。

不過，突然遇到的時候，需要想一下才能轉過彎來。所以今天，就讓我們好好地探究一下，這兩個方法的區別以及一些妙用。最後，還會介紹與之用法相似的 bind 的方法。

call 和 apply 的共同點

它們的共同點是，都能夠改變函數執行時的上下文，將一個對象的方法交給另一個對象來執行，並且是立即執行的。

為何要改變執行上下文？舉一個生活中的小例子：平時沒時間做飯的我，週末想給孩子燉個醃篤鮮嚐嚐。但是沒有適合的鍋，而我又不想出去買。所以就問鄰居借了一個鍋來用，這樣既達到了目的，又節省了開支，一舉兩得。

改變執行上下文也是一樣的，A 對象有一個方法，而 B 對象因為某種原因，也需要用到同樣的方法，那麼這時候我們是單獨為 B 對象擴展一個方法呢，還是借用一下 A 對象的方法呢？當然是借用 A 對象的啦，既完成了需求，又減少了內存的佔用。

另外，它們的寫法也很類似，調用 call 和 apply 的對象，必須是一個函數 Function。接下來，就會説到具體的寫法，那也是它們區別的主要體現。

call 和 apply 的區別

它們的區別，主要體現在參數的寫法上。先來看一下它們各自的具體寫法。

call 的寫法

Function.call(obj,[param1[,param2[,…[,paramN]]]])

需要注意以下幾點：

• 調用 call 的對象，必須是個函數 Function。
• call 的第一個參數，是一個對象。 Function 的調用者，將會指向這個對象。如果不傳，則默認為全局對象 window。
• 第二個參數開始，可以接收任意個參數。每個參數會映射到相應位置的 Function 的參數上。但是如果將所有的參數作為數組傳入，它們會作為一個整體映射到 Function 對應的第一個參數上，之後參數都為空。

function func (a,b,c) {}

func.call(obj, 1,2,3)
// func 接收到的參數實際上是 1,2,3

func.call(obj, [1,2,3])
// func 接收到的參數實際上是 [1,2,3],undefined,undefined

apply 的寫法

Function.apply(obj[,argArray])

需要注意的是：

• 它的調用者必須是函數 Function，並且只接收兩個參數，第一個參數的規則與 call 一致。
• 第二個參數，必須是數組或者類數組，它們會被轉換成類數組，傳入 Function 中，並且會被映射到 Function 對應的參數上。這也是 call 和 apply 之間，很重要的一個區別。

func.apply(obj, [1,2,3])
// func 接收到的參數實際上是 1,2,3

func.apply(obj, {
    0: 1,
    1: 2,
    2: 3,
    length: 3
})
// func 接收到的參數實際上是 1,2,3

什麼是類數組？

先説數組，這我們都熟悉。它的特徵有：可以通過角標調用，如 array[0]；具有長度屬性length；可以通過 for 循環或forEach方法，進行遍歷。

那麼，類數組是什麼呢？顧名思義，就是具備與數組特徵類似的對象。比如，下面的這個對象，就是一個類數組。

let arrayLike = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
};

類數組 arrayLike 可以通過角標進行調用，具有length屬性，同時也可以通過 for 循環進行遍歷。

類數組，還是比較常用的，只是我們平時可能沒注意到。比如，我們獲取 DOM 節點的方法，返回的就是一個類數組。再比如，在一個方法中使用 arguments 獲取到的所有參數，也是一個類數組。

但是需要注意的是：類數組無法使用 forEach、splice、push 等數組原型鏈上的方法，畢竟它不是真正的數組。

call 和 apply 的用途

下面會分別列舉 call 和 apply 的一些使用場景。聲明：例子中沒有哪個場景是必須用 call 或者必須用 apply 的，只是個人習慣這麼用而已。

call 的使用場景

1、對象的繼承。如下面這個例子：

function superClass () {
    this.a = 1;
    this.print = function () {
        console.log(this.a);
    }
}

function subClass () {
    superClass.call(this);
    this.print();
}

subClass();
// 1

subClass 通過 call 方法，繼承了 superClass 的 print 方法和 a 變量。此外，subClass 還可以擴展自己的其他方法。

2、借用方法。還記得剛才的類數組麼？如果它想使用 Array 原型鏈上的方法，可以這樣：

let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

這樣，domNodes 就可以應用 Array 下的所有方法了。

apply 的一些妙用

1、Math.max。用它來獲取數組中最大的一項。

let max = Math.max.apply(null, array);

同理，要獲取數組中最小的一項，可以這樣：

let min = Math.min.apply(null, array);

2、實現兩個數組合並。在 ES6 的擴展運算符出現之前，我們可以用 Array.prototype.push來實現。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

bind 的使用

最後來説説 bind。在 MDN 上的解釋是：bind() 方法創建一個新的函數，在調用時設置 this 關鍵字為提供的值。並在調用新函數時，將給定參數列表作為原函數的參數序列的前若干項。

它的語法如下：

Function.bind(thisArg[, arg1[, arg2[, ...]]])

bind 方法 與 apply 和 call 比較類似，也能改變函數體內的 this 指向。不同的是，bind 方法的返回值是函數，並且需要稍後調用，才會執行。而 apply 和 call 則是立即調用。

來看下面這個例子：

function add (a, b) {
    return a + b;
}

function sub (a, b) {
    return a - b;
}

add.bind(sub, 5, 3); // 這時，並不會返回 8
add.bind(sub, 5, 3)(); // 調用後，返回 8

如果 bind 的第一個參數是 null 或者 undefined，this 就指向全局對象 window。

總結

call 和 apply 的主要作用，是改變對象的執行上下文，並且是立即執行的。它們在參數上的寫法略有區別。

bind 也能改變對象的執行上下文，它與 call 和 apply 不同的是，返回值是一個函數，並且需要稍後再調用一下，才會執行。

最後，分享一個在知乎上看到的，關於 call 和 apply 的便捷記憶法：

貓吃魚，狗吃肉，奧特曼打小怪獸。

有天狗想吃魚了

貓.吃魚.call(狗，魚)

狗就吃到魚了

貓成精了，想打怪獸

奧特曼.打小怪獸.call(貓，小怪獸)

貓也可以打小怪獸了

PS：歡迎關注我的公眾號 “超哥前端小棧”，交流更多的想法與技術。