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