淺談javascript的call()、apply()、bind()的用法_javascript技巧

JavaScript中的函數不僅是一種類似Java中方法的語言功能，它還可以作為物件而存在。 本文將要探討JavaScript中函數的一些特殊用法，包括call、apply、bind三個原型方法。
一、函數基礎
JavaScript中的函數是一種類似Java中方法的語言功能，不過它可以獨立於類別來定義。

函數式程式設計：由於JavaScript支援匿名函數，因此可以將函數當作物件來使用， 所以JavaScript不僅支援過程式設計（物件導向也是過程式程式設計的一種），也支援函數式程式設計。
上下文

函數的每次呼叫都會擁有一個特殊值－本次呼叫的上下文（context）－這就是this關鍵字的值。 如果函數掛載在一個物件上，作為物件的屬性，就稱它為物件的方法。當透過這個物件來呼叫函數時，該物件就是此次呼叫的上下文， 也就是該函數的this的值。

要注意，this是一個關鍵字，不是變量，也不是屬性名稱。 JavaScript的語法不允許給this賦值。

函數是一種物件

JavaScript中的函數和Java中的方法或C語言中的函數最大不同在於，JavaScript中的函數也是一種物件。 但這並不意味著，所有的物件都是函數。函數是一種包含了可執行程式碼，並能夠被其他程式碼呼叫的特殊的物件。

和變數不同，關鍵字this沒有作用域的限制，巢狀的函數不會從呼叫它的函數繼承this。 - 如果巢狀函數作為方法調用，其this的值指向調用它的物件。 - 如果巢狀函數作為函數調用，其this的值不是全域物件（非嚴格模式下）就是undefined（嚴格模式下）。

很多人誤以為呼叫巢狀函數時this會指向掉i用外層函數的上下文。如果你想要存取這個外部函數的this值， 需要將this的值保存都在一個變數中，這個變數和內部函數都同在一個作用域內。例如：

var o = {
 m: function() {
  var self = this;
  console.log(this==o); // true
  f();
  
  function f() {
   console.log(this === o); // false，this的值是全局对象或undefined
   console.log(self === o); // true
  }
 }
}

閉包

JavaScript的函數可以嵌套在其他函數中定義，這樣它們就可以存取它們被定義時所處的作用域中的任何變數。 這意味著JavaScript函數構成了一個閉包（closure），它為JavaScript帶來了非常強勁的程式設計能力。

作為值的函數
在JavaScript中，函數不僅是一種語法，也是值，也就是說，可以將函數賦值給變量，儲存在物件的屬性或陣列的元素中， 作為參數傳入另外一個函數等。

bind、call、apply
每一個函數都包含一個prototype屬性，這個屬性是指向一個物件的引用，這個物件稱為「原型物件」。 每一個函數都包含不同的原型物件。當將函數用作建構函數的時候，新建立的物件會從原型物件上繼承屬性。

Function.prototype.call()和Function.prototype. >

call()和apply()可以看作為某個物件的方法，透過呼叫方法的形式來間接呼叫函數。 它們的第一個參數是要呼叫函數的母對象，它是呼叫上下文，在函數體內透過this來獲得對它的參考。 apply()方法和call()方法的作用相同，只不過函數傳遞的方式不一樣，它的實參都放入在一個陣列中。

舉個例子，以物件o的方法的形式呼叫函數f()，並傳入兩個參數，可以使用這樣的程式碼：

var o = {};

function f(a, b) {
 return a + b;
}

f.call(o, 1, 2);    // 将函数f作为o的方法，实际上就是重新设置函数f的上下文
f.apply(o, [1, 2]);

再舉一個例子，使用call方法呼叫匿名函數：

在下例中的for迴圈體內，我們建立了一個匿名函數，然後透過呼叫函數的call方法，將每個陣列元素作為指定的this值執行了那個匿名函數。 這個匿名函數的主要目的是為每個數組元素物件添加一個print方法，這個print方法可以列印出各元素在數組中的正確索引號。 當然，這裡不是必須讓陣列元素作為this值傳入那個匿名函數（普通參數就可以），目的是為了示範call的用法。

var animals = [
 {species: 'Lion', name: 'King'},
 {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
 (function (i) { 
  this.print = function () { 
   console.log('#' + i + ' ' + this.species + ': ' + this.name); 
  } 
  this.print();
 }).call(animals[i], i);
}

Function.prototype.bind()

bind()是在ES5中新增的方法，從名字可以看出，這個方法的主要作用就是將函數綁定到某個物件。 當在函數f()上呼叫bind()方法併後竄入一個物件o作為參數，這個方法將傳回一個新函數：（以函數呼叫的方式）呼叫新的函數將會將原始的函數f()作為o的方法來呼叫。例如：

function f(y) {
 return this.x + y;
}

var o = {
 x: 1
};

var g = f.bind(o); // 通过调用 g(x) 来调用 o.f(x)
g(2); // 3

其實我們可以輕鬆的實作bind()方法：

// 返回一个函数，通过调用它来调用o中的方法f()，传递它所有的实参
function bind(f, o) {
 if (f.bind) return f.bind(o); // 如果bind()方法存在，使用bind()方法
 else return function () {
  return f.apply(o, arguments);
 }
}

二、函数式编程
JavaScript并非函数式编程语言，但在JavaScript中可以像操控对象一样操控函数，也就是说可以在JavaScript中应用函数式编程技术。

使用函数处理数组

假设有一个数组，数组元素都是数字，我们想要计算这些元素的平均值和标准差。

var data = [1, 1, 3, 5, 5];
var sum = function(x, y) {
 return x + y;
};
var square = function(x) {
 return x * x;
};

var mean = data.reduce(sum)/data.length;
var deviations = data.map(x => x - mean);

var stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length - 1));
高阶函数

高阶函数就是操作函数的函数，它接收一个或多个函数作为参数，并返回一个新函数。举个例子：

function not(f) {
 return function () {
  var result = f.apply(this, arguments);
  return !result;
 };
}

// 判断x是否为偶数的函数
var even = function(x) {
 return x % 2 === 0;
};

var odd = not(even);      // 一个新函数，所做的事情和even()相反
[1, 1, 3, 5, 5].every(odd);   // true，每个函数都是奇数

函数not()是个高阶函数，因为它返回一个新的函数，这个新函数将它的实参传入f()，并返回f的返回值的逻辑非。

以上就是关于javascript的call()、apply()、bind()的用法，希望对大家的学习有所帮助。