首页 > 代码库 > js中的call()、apply()和bind()方法的区别
js中的call()、apply()和bind()方法的区别
call(thisObj,param1,param2....)方法:调用一个对象的方法,用另外的对象去替换当前对象。
下面给出一个例子:
function add(a,b){
return a+b;
}
function sub(a,b){
return a-b;
}
add.call(sub,3,2)
当执行以上代码时,输出的结果为5。执行add.call(sub,3,2)==add(3,2);相当于用add来替换sub;其实每一个函数也是一个对象,它是Function的实例对象。
再写一个改变函数执行上下文的例子:
function Animal(){
this.name=‘Animal‘;
this.sayName=function(){
console.log(this.name);
}
}
function dog(){
this.name=‘dog‘;
}
var animal=new Animal();
var dog=new Dog();
animal.sayName.call(dog);}
以上代码相当于把animal对象里的sayName方法放到了dog对象上执行,其执行环境改为dog,故sayName方法里的this指向当前的dog对象,所以this.name为dog.
改变当前this的指向,this指向当前的thisObj对象。
b\ 实现继承
实例: function Animal(name){
this.name=name;
this.sayWord=function(){
console.log(this.name);
}}
function Dog(name){
Animal.call(this,name)
}
var dog=new Dog(‘i am a big dog‘);
dog.sayName();
输出结果为 i am a big dog;可是Dog构造函数里并没有sayName方法,这里为什么可以调用呢,其实呢Animal.call(this,name)相当于用Animal对象来替换this对象,那么构造函数里就有Animal对象的属性和方法了。故其生成的实例对象dog可以使用这些属性和方法,但是有一点要注意的是当前的this是指向调用该方法的dog对象。
c\实现多重继承
function Animal(name){
this.name=name;
this.sayWord=function(){
console.log(this.name);
}}
function Human(){
this.sayName=function(){
console.log(‘hello human‘)
}
}
function Dog(name){
Animal.call(this,name)
Human.call(this)
}
var dog=new Dog(‘i am a big dog‘);
dog.sayName();
dog.sayWord();
通过使用多次的call()可以实现多重继承,继承相关的属性和方法。
以上呢是关于call()方法的一些应用,而apply()方法呢与call()类似,只是apply()方法接受的第二个参数是数组,而call是参数列表形式。其他的没有什么区别。用法与call()方法类似。
下面重点说一下bind()方法,这是js新增的一个方法,其作用与call和apply方法一样,传递参数与call方法一样,唯一的不同的是使用call()和apply()方法是直接调用并返回结果,而bind()方法返回的是一个函数;需进一步调用。例子如下:
var obj1={
name:‘chen‘,
age:18,
say:function(name,age){
console.log(this.name+" "+this.age)
}
}
var obj2={
name:‘ze‘,
age:12
}
obj1.say.call(obj2);
obj1.say.apply(obj2);
obj1.say.bind(obj2);
上面执行结果为
ze 12
ze 12
function (name,age){
console.log(this.name+" "+this.age)
}
可以看出bind()方法返回的是一个函数,需进一步调用才能返回相应的结果。
js中的call()、apply()和bind()方法的区别