call(), apply(), bind()之间的区别

我们知道 this是js中的一个关键字, 而且this指向的是调用函数的那个对象.

对于 call, apply, bind 三者有一个共同点就是可以改变this指向.

但是bind和call,apply两者不太相同;

• bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
• call()方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
• apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数;

bind

看下面一段代码

 var name="嚣张";
    function getName() {
      console.log(this.name);
    }
    getName() // '嚣张'

    var o = {name: 'zm'}
    var fn = getName.bind(o)
    fn() // zm

getName()函数调用打印的是嚣张, 大家都知道是因为该函数调用者是window, 因为getName()实际上执行的是window.getName()这个this指向是window, 那么下面一句getName.bind(o)就改变了this指向, 将其指向对象o
此时执行函数fn就是o的name: zm

从上述代码中也可以看出来bind是生成了一个新函数fn ,该函数改变了指向.

call

对于call方法, 是如何改变函数的执行环境呢

 var name="嚣张";
    function getName() {
      console.log(this.name);
    }
    getName() // '嚣张'

    var o = {name: 'zm'}
    getName.call(o) //zm

这个解释也是和bind一样, 一开始调用getName是window调用的 然后通过call把this的指向由window改成o

当然也可以给出参数来调用一个函数,

var name="嚣张";
    function getName(a, b, c) {
      console.log(this.name, a, b, c);
    }
    var o = {name: 'zm'}
    getName.call(o, 1,2,3) //zm 1 2 3

apply

call()方法的作用和 apply()方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

  var name="嚣张";
    function getName(a, b, c ) {
      console.log(this.name, a, b, c);
    }
    // getName() // '嚣张'
    var o = {name: 'zm'}
   getName.apply(o, [1,2,3]) //zm 1 2 3

apply其中一个用途就是将数组各项添加到另一个数组中

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]