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