JS中的call、apply和bind

谁借莪１个温暖的怀抱￠ 2022-04-22 14:12 225阅读 0赞

call、apply和bind是Function对象的三个方法，主要作用是改变函数this的指向。第一个参数为this所指向的对象，就是函数的上下文。后续参数为传入函数的参数。

**我们为什么要用call、apply来调用函数？**

要理解call、apply，首先要理解为什么要用它

假定我们有一个cat对象如下

function cat () {
         food:"fish",     
         say: function () {  
         alert("I love "+this.food);   
         }
    }
     
      var blackCat = new cat;
      blackCat.say();

但是如果我们有一个对象whiteDog = \{food:“bone”\},我们不想对它重新定义say方法，那么我们可以通过call或apply用blackCat的say方法：blackCat.say.call(whiteDog);  
所以，可以看出call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

对于call和apply来说，两者作用完全相同，只是传参方式不同  
call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

既然两者功能一样，那该用哪个呢？  
在JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时用 call ；而不确定的时候用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来遍历所有的参数。

bind() 方法与 apply 和 call 很相似，也是可以改变函数体内 this 的指向。

MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。  
注意：bind方法的返回值是函数

var bar=function(){   
      console.log(this.x);   
    }
    var foo={ 
         x:3   
    }   
    bar();  
    bar.bind(foo)();
    
     /*或*/
    var func=bar.bind(foo);   
    func();
    
    
    
    输出：
    undefined
    3