call ,apply 和 bind的用法与区别

作用都是一样的,官方解释:“调用一个对象的一个方法,以另一个对象替换当前对象”, 简单来说就是改变当前使用该方法的对象中的this指向;

var xw = {
       name : "小王",
       gender : "男",
       age : 24,
       say : function() {
                  alert(this.name + " , " + this.gender + " ,今年" + this.age);                                
             }
}
var xh = {
        name : "小红",
        gender : "女",
        age : 12
}
xw.say.call(xh);//小红,女,今年12
xw.say.apply(xh);//小红,女,今年12
xw.say.bind(xh);//function(){alert(this.name+","+this.gender+",今年"+this.age);
xw.say.bind(xh)();//小红,女,今年12

call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。

var xw = {
        name : "小王",
        gender : "男",
        age : 24,
        say : function(school,grade) {
              alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
        }
     }
var xh = {
        name : "小红",
        gender : "女",
        age : 12
     }
xw.say.call(xh,"实验小学","六年级");//小红,女,今年12,在实验小学上六年级
xw.say.apply(xh,["实验小学","六年级"]);//小红,女,今年12,在实验小学上六年级
xw.say.bind(xh,"实验小学","六年级");//function(){alert(this.name+","+this.gender+",今年"+this.age+",在"+school+"上"+grade);
xw.say.bind(xh,"实验小学","六年级")();//小红,女,今年12,在实验小学上六年级
xw.say.bind(xh)("实验小学","六年级");//小红女今年12在实验小学上六年级 在调用的时候再进行传参

第一个参数添加要把参数添加到哪个环境中,简单来说,this就会指向那个对象。apply的第二个参数必须是一个数组;

call和apply都是改变this并立即执行这个函数,bind方法可以让对应的函数想什么时候调用就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别

特殊用法:

function A(a){  
    console.log(a);  
};  
              
function AA(a){  
    A.apply(this, arguments);  
}  
              
AA("output in AA"); //output in AA    this指A,arguments指a,也就是传入的参数
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this);//Window {external: Object, chrome: Object, document: document, g_blnCheckUnload: true, blogEditor: Object…}
    }
}
var b = a.fn;
b.apply(null);

注意:如果call和apply的第一个参数写的是null,那么this指向的是window对象

原文地址:https://www.cnblogs.com/mina-huojian66/p/6097808.html