首页 > 代码库 > 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()方法的区别