JS中apply、call、bind的區別

使用 apply、call、bind 函數是可以改變 this 的指向的。

使用apply

var a = {
 name : "Cherry",
 func1: function () {
  console.log(this.name)
 },
 func2: function () {
  setTimeout( function () {
   this.func1()
  }.apply(a),100);
 }
};
a.func2()   // Cherry

使用call

var a = {
 name : "Cherry",
 func1: function () {
  console.log(this.name)
 },
 func2: function () {
  setTimeout( function () {
   this.func1()
  }.call(a),100);
 }
};
a.func2()   // Cherry

使用bind

var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.bind(a)(),100);
  }
 };
 a.func2()   // Cherry

apply、call、bind 區別

剛剛我們已經介紹了 apply、call、bind 都是可以改變 this 的指向的，但是這三個函數稍有不同。

在 MDN 中定義 apply 如下；

apply() 方法調用一個函數, 其具有一個指定的this值，以及作爲一個數組（或類似數組的對象）提供的參數

語法：

1	fun.apply(thisArg, [argsArray])

thisArg：在 fun 函數運行時指定的 this 值。需要注意的是，指定的 this 值並不一定是該函數執行時真正的 this 值，如果這個函數處於非嚴格模式下，則指定爲 null 或 undefined 時會自動指向全局對象（瀏覽器中就是window對象），同時值爲原始值（數字，字符串，布爾值）的 this 會指向該原始值的自動包裝對象。

argsArray：一個數組或者類數組對象，其中的數組元素將作爲單獨的參數傳給 fun 函數。如果該參數的值爲null 或 undefined，則表示不需要傳入任何參數。從ECMAScript 5 開始可以使用類數組對象。瀏覽器兼容性請參閱本文底部內容。

apply 和 call 的區別

其實 apply 和 call 基本類似，他們的區別只是傳入的參數不同。

call 的語法爲：

1	fun.call(thisArg[, arg1[, arg2[, ...]]])

所以 apply 和 call 的區別是 call 方法接受的是若干個參數列表，而 apply 接收的是一個包含多個參數的數組。

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.apply(a,[1,2])  // 3

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.call(a,1,2)  // 3

bind 和 apply、call 區別

我們先來將剛剛的例子使用 bind 試一下

var a ={
 name : "Cherry",
 fn : function (a,b) {
  console.log( a + b)
 }
}
var b = a.fn;
b.bind(a,1,2)

我們會發現並沒有輸出，這是爲什麼呢，我們來看一下 MDN 上的文檔說明：

bind()方法創建一個新的函數, 當被調用時，將其this關鍵字設置爲提供的值，在調用新函數時，在任何提供之前提供一個給定的參數序列。

所以我們可以看出，bind 是創建一個新的函數，我們必須要手動去調用

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.bind(a,1,2)()   // 3