JS中call、apply、 bind 的区别

大家应该了解过这三种方法都可以改变this指向
如果想了解这三种方法的原理可以阅读本人的这篇call、apply、bind的原理
如果想了解其他改变this指向的方法可以阅读本人的这篇改变this指向的六种方法

回归正题,这三种方法有什么区别呢?
让我为大家介绍一下吧!

共同点

1.apply、call、bind他们三个都能改变函数this的指向问题;

不同点

1.apply、call这两个方法的主动调用,bind返回的是改变this指向后的新函数;

2.传参的问题区别,call和bind都是直接传递参数,apply传递的是数组

大家观察这一部分代码

    const obj1 = {
        uname: "张三"
    }
    function fun1(a, b) {
        //正常情况下指向window
        // 这里我们使用了call方法改变了this指向,指向了obj
        console.log(this) //指向obj1 
        // 这里我们传了2个值 1 2
        console.log(a + b) //3
    }
    //可以改变this指向
    fun1.call(obj1, 1, 2)
    
    const obj2 = {
        uname: "李四"
    }
    function fun2(a, b) {
        //正常情况下指向window
        // 这里我们使用了apply方法改变了this指向,指向了obj
        console.log(this) //指向obj2 {}
        // 这里我们传了2个值 1 2
        console.log(a + b) //3
    }
    //可以改变this指向
    //不同点 apply传递实参需要使用数组的方式
    fun2.apply(obj2, [1, 2])
    
    const obj3 = {
        uname: "王五"
    }
    function fun3(a, b) {
        console.log(this) //指向obj3 
        console.log(a + b) //3
    }
    //可以改变this指向
    // 不同点之一 返回一个新函数
    let func = fun3.bind(obj3)
    func(1, 2)
    // 相当于 fun3.bind(obj3)(1,2)

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

posted @ 2023-12-15 16:04  一叶知秋04  阅读(11)  评论(0编辑  收藏  举报  来源