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生成一个新的函数，所以不是当即执行的，若是想要当即调用须要再加一个括号。