call、apply和bind的用法

在改變 this 指向的時候，常常會把這三個方法混淆，下面就詳細的整理一下三者的用法和區別

call() 方法

• call() 方法能夠有無數個參數
• 第一個參數是改變 this 指向的對象
• 後面的參數直接傳遞給函數的自身
• 使用後會自動執行

var a = {
  name: '張三'
}

var b = {
  name: '李四',
  sayName: function (a,b,c) {
    console.log(this.name, a+b+c)
  }
}

b.sayName.call(a, 1,2,3)
// 輸出 --> 張三 6

apply() 方法

• apply() 方法只能由兩個參數
• 第一個參數是改變 this 指向的對象
• 第二個參數必須是一個數組
• 使用後會自動執行

var a = {
  name: '張三'
}

var b = {
  name: '李四',
  sayName: function (a,b,c) {
    console.log(this.name, a+b+c)
  }
}

var arr = [1,2,3]

b.sayName.apply(a,arr)
// 輸出 --> 張三 6

bind() 方法

• bind() 方法能夠有無數個參數
• 第一個參數是改變 this 指向的對象
• 後面的參數直接傳遞給函數的自身
• 使用後不會自動執行，會返回一個新函數

var a = {
  name: '張三'
}

var b = {
  name: '李四',
  sayName: function (a,b,c) {
    console.log(this.name, a+b+c)
  }
}

var c = b.sayName.bind(a,1,2,3)
// 需手動調用新函數 c 纔會執行
c()
// 輸出 --> 張三 6

三個方法的共同點

• 第一個參數都爲改變this指向的對象
• 在非嚴格模式下，若第一參數爲null/undefined，this默認指向window
• 在嚴格模式下，若第一參數爲null/undefined，this默認指向undefined

三個方法的區別

這裏用一個表格來展現吧，可能看起來要稍微直觀點

方法名	可含參數個數	是否自動執行
call	無數個	是
appy	兩個，第二個必須爲數組	是
bind	無數個	否，會返回一個新函數