【JavaScript】中call,apply,bind 三个方法的解析与运用

1.首先我们来引入一个例子

    let obj = {
      name:'小许',
      age:18,
      func:function(){
        console.log("我的名字叫"+this.name+",我今年"+this.age+"了。")
      }
    }
    let obj1 = {
      name:"小周",
      age:22
    }

    obj.func()    //输出 我的名字叫小许,我今年18了。
    obj.func.call(obj1)    //输出 我的名字叫小周,我今年22了。

很明显，该call方法中，该变了原本obj的this指针，让obj的this指针指向了obj1。

//接下来看一下call和bind的区别
    obj.func.call(obj1)    //输出 我的名字叫小许,我今年18了
    obj.func.bind(obj1)    //输出  没有任何内容  说明函数未被调用
    obj.func.bind(obj1)()   //输出  我的名字叫小许,我今年18了

从以上例子可以看出，bind函数是不会自动调用的，而call函数在引用之后会自动调用。

    //寻找最大值
    const arr = [1,2,3,4,22,55,12]
    console.log(Math.max.call(null,arr))     //输出  Nan  
    console.log(Math.max.call(null,...arr))  //输出 55  

对比说明,call方法需要多个参数才能进行多个元素之间的对比

    //那么我们再来看看apply
    console.log(Math.max.apply(null,arr))   //输出 55
    console.log(Math.max.apply(null,...arr))    //输出 报错

对比说明，apply方法只需一个参数就能进行多个元素的对比。

如果还想看到关于其他的apply,call,和bind的实际运用，点击我的头像进入我的主页，该专题我会出第二篇文章仔细去讲解实例应用案例。