说明
call()、apply()、bind() 会改变 this
准备代码
定义 lilei 对象
const lilei = {
name:"李雷",
age:20,
say:function(){
console.log("我叫"+this.name+",我今年"+this.age+"岁")
},
sum:function(x,y){
return x + y
}
}
调用 say() 方法:
lilei.say()
执行结果:
我叫李雷,我今年20岁
定义 hanmeimei 对象
这里定义 hanmeimei 对象:
const hanmeimei = {
name:"韩梅梅",
age:19
}
call() 用法
基本用法
此处调用 lilei.say.call() 方法,并传入 hanmeimei 对象,此时 say() 中的 this 表示 hanmeimei 对象:
lilei.say.call(hanmeimei)
执行结果如下:
我叫韩梅梅,我今年19岁
传参数用法
此处调用 lilei.sum.call() 方法,除了传入 hanmeimei 对象(此时 sum() 中的 this 表示 hanmeimei 对象),后面还传入 1 和 3 ,就是正常传值:
lilei.sum.call(hanmeimei,1,3)
执行结果:
韩梅梅 计算结果:4
apply() 用法
基本用法
与 call() 用法相同
此处调用 lilei.say.apply() 方法,并传入 hanmeimei 对象,此时 say() 中的 this 表示 hanmeimei 对象:
lilei.say.apply(hanmeimei)
执行结果如下:
我叫韩梅梅,我今年19岁
传参数用法
此处调用 lilei.sum.apply() 方法,除了传入 hanmeimei 对象(此时 sum() 中的 this 表示 hanmeimei 对象),后面还传入 数组 [1,3] :
lilei.sum.apply(hanmeimei,[1,3])
执行结果:
韩梅梅 计算结果:4
bind
基本用法
与 call() 用法类似,但是返回的是 函数对象
console.log( typeof lilei.say.bind(hanmeimei) )
执行结果:
function
因为返回的是函数对象,所以调用时,需要在后面再加上 (),如下:
lilei.say.bind(hanmeimei)()
传入 hanmeimei 对象,此时 say() 中的 this 表示 hanmeimei 对象
执行结果如下:
我叫韩梅梅,我今年19岁
传参数用法
此处调用 lilei.sum.bind() 方法,除了传入 hanmeimei 对象(此时 sum() 中的 this 表示 hanmeimei 对象),后面还传入 1 和 3 ,就是正常传值:
提示: 最后要加上 (),因为 bind() 返回的是函数对象
lilei.sum.bind(hanmeimei,1,3)()
执行结果:
韩梅梅 计算结果:4
总结
call()、apply() 相同点
call() 、apply()、bind() ,第一个参数是 对象 类型,是 this 的指向对象
call()、apply() 区别
除了第一个对象,传入后面对象时:
call():是正常传值
apply():将所有参数放在数组中,然后传入数组
bind()
bind() 返回函数对象,除此之外,与 call() 相同