「乾貨」細說 call、apply 以及 bind 的區別和用法未指定標題的文章
前言
上一篇文章 《「前端面試題系列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：歡迎關注我的公眾號 “超哥前端小棧”，交流更多的想法與技術。
