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

2021-10-15 21:33:43 阅读：120 来源： 互联网

标签：function name say1 bind js call apply cat

　这三个方法都有一个共同的功能：改变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,'安徽','苏州')();

标签：function,name,say1,bind,js,call,apply,cat
来源： https://www.cnblogs.com/WuAnqi/p/15410183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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