前言
通過call()、apply()和bind()方法,我們可輕易地借用其它對象的方法,而無須從這些對像中繼承它。
在JavaScript中藉用方法
在JavaScript中,有時可以重用其它對象的函數或方法,而不一定非得是對象本身或原型上定義的。通過call()、apply() 和bind() 方法,我們可輕易地借用其它對象的方法,而無須繼承這些對象。這是專業JavaScript 開發者常用的手段。
原型方法
在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|cArray.prototype.join.call('abc', '|'); // takes a string and removes all non vowelsArray.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.375console.log('Score: ' + score(player1)); // Score: 17console.log('Score: ' + score(player2));雖然上面的例子很生硬,但是可以看出,就像原生方法一樣,用戶定義的方法也可以輕鬆借用。
總結
Call、bind 和apply 可以改變函數的調用方式,並且經常在藉用函數時使用。多數開發者熟悉借用原生方法,但是較少借用自定義的方法。
近幾年JavaScript 的函數式編程發展不錯,怎樣使用Function.prototype.call.bind 借用方法才更加簡便?估計這樣的話題會越來越常見。
以上就是JavaScript中的借用方法總結的全部內容,希望對大家了解到JavaScript中的借用方法有所幫助吧。