10分钟快速了解js中call apply bind

前言

学习前端过的小伙伴们应该都知道call apply bind的存在，我们用来改变 this 的指向的，因为他们有着很大的共同点但又有点不同，所以容易混淆，今天我来和大家讲解下这三个方法。

1.call()

示例

function f(){
        console.log(this)
    }
    var obj = {
        f
    };
    var fn = obj.f;
    obj.f();//obj
    fn();//window
    
fn.call(context,1,2,3,4,5); call 是直接让函数执行了
// 第一个参数是用来改变函数执行时内部 this 指向的
// 第二个参数及之后的参数 都是传给fn函数的实参

2.apply()

示例

    var obj ={
        q:123,w:234
    }
    var f =function(a,b,c,d){
        console.log(this);
        console.log(a,b,c,d)
    }
    f.apply(obj,[1,2,3,4]);
    // apply 的目的和call一样 但是却区别在于第二个参数
    // 虽然第二个参数是一个集合，但是函数执行时，还是被散乱的传过去；不是一个集合整体传过去的。

3.bind()

示例

    var a = {
        name : "LiMing",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            }.bind(a)(),100);
        }

    };

    a.func2()            // LiMing
    // bind 的用法跟 call 一模一样 ；只是不让函数立即执行，而是返回一个新函数
    // 新函数执行的时候 this 执行换掉了;新函数执行传递的参数会补在通过 bind绑定的参数后面
    // 我们可以把 bind 绑定的参数理解成新函数的默认参数

如何选用

如果不需要关心具体有多少参数被传入函数，选用apply()；
如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用call()；
如果我们想要将来再调用方法，不需立即得到函数返回结果，则使用bind();

总结

call()和apply()唯一区别是参数不一样；
bind()是返回一个新函数，供以后调用，而apply()和call()是立即调用。

以上就是本文的全部内容，希望对大家的学习有所帮助。