在JavaScript中借用方法

在JavaScript中，有時能夠重用其它對象的函數或方法，而不必定非得是對象自己或原型上定義的。經過 call()、apply() 和 bind() 方法，咱們可輕易地借用其它對象的方法，而無須繼承這些對象。這是專業 JavaScript 開發者經常使用的手段。

前提

本文假設你已經掌握使用 call()、apply() 和 bind() 的相關知識和它們之間的區別。

原型方法

在 JavaScript 中，除了不可更改的原始數據類型，如 string、number 和 boolean，幾乎全部的數據都是對象。Array 是一種適用於遍歷和轉換有序數列的對象，其原型上有 slice、join、push 和 pop 等好用的方法。

一個經常使用的例子是，當對象和數組都是列表類型的數據結構時，對象能夠從數組「借用」方法。最常借用的方法是 Array.prototype.slice。

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 也是：

// 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中，使用字面量能夠表明值。它們是固定值，不是變量，就是在腳本中按字面給出的。

字面量能夠簡寫原型方法：

[].slice.call(arguments);

[].join.call('abc', '|');

''.toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

這樣看上去沒有那麼冗長了，可是必須直接在 [] 和 "" 上操做以借用方法，仍然有點醜。能夠利用變量保存對字面量和方法的引用，這樣寫起來更簡便些：

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()：

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() 就會指向以前限定的方法。

自定義對象的方法

繼承很棒，可是開發者一般在想要重用一些對象或模塊間的通用功能時纔會使用。不必僅爲代碼重用使用繼承，由於在多數狀況下簡單的借用方法會很複雜。

以前咱們只討論了借用原生方法，可是借用任何方法都是能夠的。好比下面的代碼能夠計算積分遊戲的玩家分數：

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 借用方法才更加簡便？估計這樣的話題會愈來愈常見。