在JavaScript中，有時可以重用其它物件的函式或方法，而不一定非得是物件本身或原型上定義的。通過 call()、apply() 和 bind() 方法，我們可輕易地借用其它物件的方法，而無須繼承這些物件。這是專業 JavaScript 開發者常用的手段。
前提
本文假設你已經掌握使用 call()、apply() 和 bind() 的相關知識和它們之間的區別。
原型方法
在 JavaScript 中，除了不可更改的原始資料型別，如 string、number 和 boolean，幾乎所有的資料都是物件。Array 是一種適用於遍歷和轉換有序數列的物件，其原型上有 slice、join、push 和 pop 等好用的方法。
一個常用的例子是，當物件和陣列都是列表型別的資料結構時，物件可以從陣列“借用”方法。最常借用的方法是 Array.prototype.slice。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function myFunc() { // error, arguments is an array like object, not a real array arguments.sort(); // "borrow" the Array method slice from its prototype, which takes an array like object (key:value) // and returns a real array var args = Array.prototype.slice.call(arguments); // args is now a real Array, so can use the sort() method from Array args.sort(); } myFunc('bananas', 'cherries', 'apples'); |
借用方法之所以可行，是因為 call 和 apply 方法允許在不同上下文中呼叫函式，這也是重用已有功能而不必繼承其它物件的好方法。實際上，陣列在原型中定義了很多常用方法，比如 join 和 filter 也是：
|
1 2 3 4 5 6 7 |
// takes a string "abc" and produces "a|b|c Array.prototype.join.call('abc', '|'); // takes a string and removes all non vowels Array.prototype.filter.call('abcdefghijk', function(val) { return ['a', 'e', 'i', 'o', 'u'].indexOf(val) !== -1; }).join(''); |
可以看出，不僅物件可以借用陣列的方法，字串也可以。但是因為泛型方法是在原型上定義的，每次想要借用方法時都必須使用 String.prototype 或 Array.prototype。這樣寫很囉嗦，很快就會令人生厭。更有效的方法是使用字面量來達到同樣的目的。
使用字面量借用方法
字面量是一種遵循JavaScript規則的語法結構，MDN 這樣解釋：
在JavaScript中，使用字面量可以代表值。它們是固定值，不是變數，就是在指令碼中按字面給出的。
字面量可以簡寫原型方法：
|
1 2 3 |
[].slice.call(arguments); [].join.call('abc', '|'); ''.toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(','); |
這樣看上去沒有那麼冗長了，但是必須直接在 [] 和 "" 上操作以借用方法，仍然有點醜。可以利用變數儲存對字面量和方法的引用，這樣寫起來更簡便些：
|
1 2 3 4 5 6 7 |
var slice = [].slice; slice.call(arguments); var join = [].join; join.call('abc', '|'); var toUpperCase = ''.toUpperCase; toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(','); |
有了借用方法的引用，我們就可以輕鬆地使用 call() 呼叫它了，這樣也可以重用程式碼。秉著減少冗餘的原則，我們來看看可否借用方法卻不用每次呼叫都要寫 call() 或者 apply()：
|
1 2 3 4 5 6 7 8 |
var slice = Function.prototype.call.bind(Array.prototype.slice); slice(arguments); var join = Function.prototype.call.bind(Array.prototype.join); join('abc', '|'); var toUpperCase = Function.prototype.call.bind(String.prototype.toUpperCase); toUpperCase(['lowercase', 'words', 'in', 'a', 'sentence']).split(','); |
如你所見，現在可以使用 Function.prototype.call.bind 來靜態繫結從不同原型“借來的”方法了。但是 var slice = Function.prototype.call.bind(Array.prototype.slice) 這句話實際是如何起作用的呢？
理解 Function.prototype.call.bind
Function.prototype.call.bind 乍一看有些複雜，但是理解它是如何起作用的會非常有益。
Function.prototype.call是一種引用，可以“call”函式並將設定其“this”值以在函式中使用。- 注意“bind”返回一個存有其“this”值的新函式。因此
.bind(Array.prototype.slice)返回的新函式的“this”總是Array.prototype.slice函式。
綜上所述，新函式會呼叫“call”函式，並且其“this”為“slice”函式。呼叫 slice() 就會指向之前限定的方法。
自定義物件的方法
繼承很棒，但是開發者通常在想要重用一些物件或模組間的通用功能時才會使用。沒必要僅為程式碼重用使用繼承，因為在多數情況下簡單的借用方法會很複雜。
之前我們只討論了借用原生方法，但是借用任何方法都是可以的。比如下面的程式碼可以計算積分遊戲的玩家分數：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var scoreCalculator = { getSum: function(results) { var score = 0; for (var i = 0, len = results.length; i < len; i++) { score = score + results[i]; } return score; }, getScore: function() { return scoreCalculator.getSum(this.results) / this.handicap; } }; var player1 = { results: [69, 50, 76], handicap: 8 }; var player2 = { results: [23, 4, 58], handicap: 5 }; var score = Function.prototype.call.bind(scoreCalculator.getScore); // Score: 24.375 console.log('Score: ' + score(player1)); // Score: 17 console.log('Score: ' + score(player2)); |
雖然上面的例子很生硬，但是可以看出，就像原生方法一樣，使用者定義的方法也可以輕鬆借用。
總結
Call、bind 和 apply 可以改變函式的呼叫方式，並且經常在借用函式時使用。多數開發者熟悉借用原生方法，但是較少借用自定義的方法。
近幾年 JavaScript 的函數語言程式設計發展不錯，怎樣使用 Function.prototype.call.bind 借用方法才更加簡便？估計這樣的話題會越來越常見。
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
