js中的call()apply()和bind()方法的区别

Posted 2020-09-06

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()方法返回的是一个函数，需进一步调用才能返回相应的结果。