静下心来，静静理解js中的call、apply和bind方法

前言：

总能看到很多的面试题中都包含有对call、apply和bind的理解，也一直是一个毒瘤。今天突然开窍了，就写个博客记录一下

 

先抛出一个问题：

为什么会出现call、apply和bind？

答：他们就是用来解决this指向的，即就是可以连接上下文

先来举个栗子：

function show() {}

show.prototype = {
    a = 'fish',
    eat = function() {
        console.log('I like eat' + this.a)
    }
}

var wang = new show

wang.eat()      //'I like eat fish'

但是我不光爱吃鱼还爱吃苹果。但是又不想重新写一个新的eat方法怎么办？

就可以通过这个 神奇的东西来搞

banana = {
    a: "apple"
}
wang.eat.call(banana);     //I like eat apple
wang.eat.apply(banana);    //I like eat apple

    所以，可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

 

apply、call 的区别

    其实这两个的作用是完全一样的，都可以改变this的指向，第一个参数都是要指向的对象，也就是要指定的上下文，第二个参数就不一样了。

call传入的参数是一个接一个的参数，而apply可以用一个数组包起来，或者用一个伪数组arguments

所以说，当参数固定的时候可以用call传入，当参数不固定的时候就要用apply

 

****   补充说明：****

将一个伪数组转换为真正的数组

var arrayLike = {
    0: 'zhangsan',
    1: 'lisi',
    2: 'wangwu',
    length: 3
}
var arrayList = Array.prototype.slice.call(arrayLike)
console.log(arrayList)   //   ['zhangsan','lisi','wangwu']

关于bind

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

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

还有一点就是连续调用多个bind不会叠加，执行的永远都是第一个bind。

原因是，在Javascript中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

 

apply、call、bind比较

var obj = {
    x: 81,
};
 
var foo = {
    getX: function() {
        return this.x;
    }
}
 
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

仔细观察会发现bind的方法后面还有一对括号，也就是说bind方法不会立即执行，而是会有一个回调

所以说当有些不需要立即执行的就可以用bind

 

 

再总结一下：

• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。