【js】call,apply,bind的区别

call,apply,bind

• 三者均用于改变function的this指向,但是接收参数有所不同

call

接收的第一个参数是改变this指向的目标对象,后面可接多个参数,是调用call方法的函数的参数

apply

接收的第一个参数是改变this指向的目标对象,后面只能接一个对象,给调用call方法的函数传递的参数要以数组的形式

bind

传递的参数与call一致,唯一的区别是调用的方式,bind方法绑定this成功后并不会直接调用方法,而是需要手动调用

call,apply,bind的区别

	call	apply	bind
绑定this后	立即调用方法	立即调用方法	需要手动调用
第一个参数	需要绑定this的目标对象	需要绑定this的目标对象	需要绑定this的目标对象
其余的参数	多个参数,以列表的形式传递	一个参数,以数组的方式传递	多个参数,一列表的形式传递

function f(...params) {
    console.log(this.a + ' ' + this.b + ' ' + this.c + ' ' + this.d, "参数", ...params)
}
var obj = {
    a: 1,
    b: 2,
    params: 1
}
var o1 = {
    c: 666
}
var o2 = {
    d: "ddd"
}

console.log('--------call------')
f()
f.call(obj)
f.call(o2)
f.call(obj, [o1.c, o2.d]) //[o1.c, o2.d]实际相当于一个参数 将f方法的this绑定到obj上,对f方法传递一个[o1.c,o2.c]的参数
f.call(obj, o1.c, o2.d) // 将f方法的this绑定到obj上,并对方法传递两个参数 o1.c 和 o2.d

console.log('------apply--------')
f()
f.apply(obj)
f.apply(obj, o1, o2) //这个方法就是错的,所以成功的只有绑定的this,后面传递的参数并没有成功
f.apply(obj, [o1, o2]) // 正确的调用方法
console.log('-------bind-------')
f()
f.bind(obj)()
f.bind(obj, o1, o2)()
f.bind(obj, [o1, o2])()

以下是运行结果:

--------call------
undefined undefined undefined undefined 参数
1 2 undefined undefined 参数
undefined undefined undefined ddd 参数
1 2 undefined undefined 参数 [ 666, ‘ddd’ ]
1 2 undefined undefined 参数 666 ddd
------apply--------
undefined undefined undefined undefined 参数
1 2 undefined undefined 参数
1 2 undefined undefined 参数
1 2 undefined undefined 参数 { c: 666 } { d: ‘ddd’ }
-------bind-------
undefined undefined undefined undefined 参数
1 2 undefined undefined 参数
1 2 undefined undefined 参数 { c: 666 } { d: ‘ddd’ }
1 2 undefined undefined 参数 [ { c: 666 }, { d: ‘ddd’ } ]