JS中的call、apply及bind

前言

又是一道面試必考題，看似簡單。其實還有不少妙用。

call

• 語法

fun.call(obj,arg1,arg2,...)

obj爲fun方法運行時this指向的值

arg爲傳入的參數

根據obj類型分爲如下幾種狀況

對象：fun的this將指向這個對象

函數：fun的this指向函數的引用

null,undifined或者不傳：this指向window

原始值：將指向原始值的包裝對象，好比字符串指向String,數值指向Number，布爾值指向Boolean

• 金典用法

1.改變定時器中this指向

var name='window'
function fun(){
  setTimeout(function(){
    console.log(this.name)
  }.call(obj),100)
}
var obj={
  name:'obj',
  fun
}
obj.fun()       //obj
複製代碼

若是不用call，setTimeout中的this將指向window

2.將僞數組轉換爲數組

function fun(){
  let arr=Array.prototype.slice.call(arguments)
  console.log(arr)
}
fun(1,2,3,4)        //輸出 [1,2,3,4]
複製代碼

apply

• 語法

fun.apply(obj,[argsArry])

用法與call徹底相同，但後面傳的參數必須爲數組

bind

• 語法

fun.bind(obj,arg1,arg2,...)()

var name='window'
function fun(){
  setTimeout(function(){
    console.log(this.name)
  }.bind(obj)(),100)
}
var obj={
  name:'obj',
  fun
}
obj.fun()       //obj
複製代碼

bind改變setTimeout中this指向

var name='window'
function fun(){
  console.log(this.name)
}
let obj={
  name:'obj'
}
let newFun=fun.bind(obj)
newFun()        //obj
複製代碼

生成了一個新的函數，該函數有着fun的功能，可是它的this指向的是obj。

總結

共同點

都能改變this指向。

不一樣點

call與apply傳參方式不一樣，並且只改變那一次使用時的this指向。 bind生成一個新的函數，所以不是當即執行的，若是想要當即調用須要再加一個括號。