js 探讨call，apply，bind的使用

call和apply的区别

apply接受两个参数,第一个参数指定了函数体内this对象的指向,第二个参数为一个带有下标的集合,
 这个集合可以为数组,也可以为类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数

    var func = function(a,b,c){
        console.log([a,b,c]);
    };
    func.apply(null,[1,2,3]);

这代码,参数1,2,3被放在数组中一起传入func参数,它们分别对应func参数列表中的a,b,c

call传入的参数数量不固定,根apply相同的是,第一个参数也是代表函数体内的this指向,
从第二个参数开始往后,每个参数被依次传入函数:

    var func = function(a,b,c){
        console.log([a,b,c]);
    }
    func.call(null,1,2,3);

call是包装在apply上面的语法糖,如果我们明确地知道函数接受多少个参数,而且想表达形参和实参
的对应关系,那么也可以用call来传递参数

当使用call活着apply的时候,如果传入的第一个参数为null,函数体内的this会指向默认的宿主对像,
在浏览器中则是window;

    var func = function(a,b,c){
        console.log(this === window);//true
    }
    func.apply(null,[1,2,3]);

有时候,我们使用call或者apply的目的不在于this指向,而且另有所途,比如借用其他对象的方法,
那么我们可以传入null来代替某个具体的对象.

Math.max.apply(null,[1,2,5,6,32,3]);//32

call和apply的用途


 改变this指向
 call和apply最常见的用途是改变函数内部的this指向

    var obj1 = {
        name:'andy'
    };
    var obj2 = {
        name:'jack'
    };
    window.name = 'lucy';
    var getName = function(){
        console.log(this.name);
    };
    getName();//lucy
    getName.call(obj1);//andy
    getName.call(obj2);//jack

 当执行getName.call(obj1)这句代码时,getName函数体内的this就指向obj1对象,
 所以此处的
 var getName = function(){
    console.log(this.name);
 };
 实际相当于
 var getName = function(){
    console.log(obj1.name);
};

 在实际开发中,经常会遇见this指向被不经意改变,比如有一个div节点,div节点的onclick
 事件中的this本来指向这个div的:

    document.getElementById('div1').onclick = function(){
        console.log(this.id);//div1
    };

假设该事件函数中有一个内部函数func,在事件内部调用func函数时,func函数体内的this就指向了window
而不是我们预期的div

    document.getElementById('div1').onclick = function(){
        console.log(this.id);//div1
        var func = function(){
            console.log(this.id);//undefined
        };
        func();
    };

我们可以用call来修正func函数内的this,使其依然指向div;

    document.getElementById('div1').onclick = function(){
        console.log(this.id);//div1
        var func = function(){
            console.log(this.id);
        };
        func.call(this);
    };

Function.prototype.bind

    var obj3 = {
        name:'andy'
    };
    var func3 = function(){
        console.log(this.name);
    }.bind(obj3);
    func3();

借用其他对象的方法
借用方法的一种场景是'借用构造函数',通过这种技术,可以实现一些类似继承的效果

    var A = function(name){
        this.name = name;
    };
    var B = function(){
        A.apply(this,arguments);
    };
    B.prototype.getName = function(){
        return this.name;
    };
    var b = new B('andy');
    console.log(b.getName());//andy