詳細解讀JavaScript中的幾種借用方法（圖文教學）

我們下面來看一篇關於JavaScript中藉用方法的一個詳細介紹，注意：本文假設你已經掌握使用call()、apply()和bind()的相關知識和它們之間的區別，希望這篇文章能夠讓各位了解到JavaScript中的借用方法吧。

前言

透過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|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(&#39;Score: &#39; + score(player1));
 
// Score: 17
console.log(&#39;Score: &#39; + score(player2));

#雖然上面的例子很生硬，但是可以看出，就像原生方法一樣，用戶定義的方法也可以輕鬆借用。

總結

Call、bind 和 apply 可以改變函數的呼叫方式，並且經常在藉用函數時使用。多數開發者熟悉借用原生方法，但是較少借用自訂的方法。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

詳談js中內建物件Math的屬性與方法（一目了然）

利用JavaScript實作模式匹配的String方法

javascript this詳細講解（圖文教學）

#

以上是詳細解讀JavaScript中的幾種借用方法（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！