js中的call()、apply()、bind()方法详解

 这三个方法都有一个共同的功能:改变this的指向,那么又是怎么改变的呢?接下来我们依次来分析这三个方法

  1、call()方法                                                                                                                             

    说明:传入多个参数,第一个是this的指向,之后的参数都是函数的参数。

    例如:B.call(A, args1,args2);即A对象调用B对象的方法。  

    window.name = "window";
    p = {
        name : "Andy",
        age : 18
    }
    function say1(){
        console.log(this.name);
    }
    function say2(s1,s2){
        console.log("和是:" + (s1+s2));
    }
   say1(); //window say1.call(window); //window say1.call(p); //Andy say2.call('',1,2); //和是3 被调用的对象可以没有

 

   上面这个例子当调用say1.call(p)时this指向就变了,如果只是say1()的话是默认绑定,this指向window,但是使用say1.call(p)之后变成了显示绑定,this指向了传入的第一个参数p

   下面这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); 

function add(a,b)  {  
    alert(a+b);  
}  

function sub(a,b)  {  
    alert(a-b);  
}  

add.call(sub,3,1)

 

 call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat

 

function Animal(){  
    this.name = "Animal";  
    this.showName = function(){  
        console.log(this.name);  
    }  
}  

function Cat(){  
    this.name = "Cat";  
}  

var animal = new Animal();  
var cat = new Cat();  

//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。  
animal.showName.call(cat); //Cat 
//animal.showName.apply(cat);

 

 

 

 

  2、apply()方法

   说明:传入两个参数,第一个参数就是this的指向,第二个参数就是函数参数组成的数组。

 例如:B.apply(A, arguments);即A对象应用B对象的方法。

 apply()方法和call()方法十分类似,只需要注意第二个参数是数组就行,这里就不过多重复解释了

 

  3、bind()方法

 说明:bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用。

 

  最后我们对比一下call、apply、bind的传参情况

var obj = {
        name: '萌萌',
        age: this.age,
        myFun: function (come,walk){
            console.log(this.name + "年龄" + this.age + "从" + come + "去" + walk);
        }
    }
    var p = {
        name: "白白",
        age: 18
    }

    obj.myFun.call(p,'安徽','苏州');
    obj.myFun.apply(p,['安徽','苏州']);
    obj.myFun.bind(p,'安徽','苏州')();
js中的call()、apply()、bind()方法详解

 

上一篇:linux记录


下一篇:2021-10-15-torch.cat()