JavaScript 中 call()、apply()、bind() 的用法和区别

首先要明白call()、apply()、bind() 都是用来重定义 this 这个对象的！

先看明白下面：

function aa (){
	console.log(this,'this')

}
aa()
           

结果是：

我们发现这里的this的指向是window

function aa(){
    console.log(this,'this')
    
}


let obj ={

    name:'cyw',
    pro:'ttt'

}

aa.call(obj)
           

结果：

我们就已经看到了，这里的this的指向已经发生了变化，变成了后面括号里的参数。

call()、apply()、bind() 的简单用法

function aa(){
    console.log(this,'this')

}


let obj ={

    name:'cyw',
    pro:'ttt'

}

aa.call(obj)
aa.apply(obj)
aa.bind(obj)()
           

控制台打印结果：

这三种写法都可以改变this的指向。需要注意，以上除了 bind 方法后面多了个 () 外 ，结果返回都一致！由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行。

看下不加括号的效果。

function aa(){
    console.log(this,'this')

}


let obj ={

    name:'cyw',
    pro:'ttt'

}


aa.bind(obj)
           

效果：

对比call 、bind 、 apply 传参情况下

obj.myFun.call(db,'成都','上海')；　　　　 // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined
           

微妙的差距！

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！