JavaScript 中 call()、apply()、bind()用法

说明

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() 相同

参考:
https://www.runoob.com/w3cnote/js-call-apply-bind.html