码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-03-22 21:36:32      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:apply   多重继承   执行环境   实现   on()   param   列表   数列   log   

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()方法的区别

标签:apply   多重继承   执行环境   实现   on()   param   列表   数列   log   

原文地址:http://www.cnblogs.com/MECN/p/6601804.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!