您的位置:首页 > Web前端 > JavaScript

深入javascript-实现“继承”

2015-09-29 17:02 435 查看
我在前面介绍了,javascript的继承机制,还有如何“封装”数据和方法,今天再来说一说,如何来实现对象之间的“继承”。
先创建一个“动物”对象的构造函数。
function Animal(){
this.species = "动物";
}
再来创建一个“猫”对象的构造函数。
function Cat(name,color){
this.name = name;
this.color = color;
}

看我是如何是实现对象之间的继承,让Cat继承Animal的。

1.通过函数绑定
 这种方法是比较简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

functionCat(name,color){
Animal.apply(this,arguments);
this.name= name;
this.color= color;
}
varcat1 = new Cat("大毛","黄色");
alert(cat1.species);// 动物
 

2.利用 prototype 模式
这种方法是比较常见的方法,主要利用了对象的prototype属性。
如果“Cat”的prototype对象,指向一个|Animal的实例,那么所有“猫”的实例,就能继承Animal了。

Cat.prototype= new Animal();
Cat.prototype.constructor= Cat;
varcat1 = new Cat("大毛","黄色");
alert(cat1.species);// 动物


ps:
第一行代码:我们将Cat的prototype对象指向了一个Animal的实例。它相当于完全删除了prototype对象原先的值,然后赋了新值。
第二行代码:因为每个对象的prototype对象都有一个constructor属性,指向自己的构造函数,执行完第一行代码后,该属性指向的是Animal。执行该代码后,可使得该属性重新指向Cat的构造函数,保证Cat构造函数的完整性。
接下来的代码就很容易理解了,就不再做详细解释了。
3.直接继承prototype
这种方式是第二种方式的改进。针对这样的情景

functionAnimal(){ }
Animal.prototype.species= "动物";


然后,将Cat的prototype对象,指向Animal的prototype对象,这样就完美的继承了。

Cat.prototype= Animal.prototype;
Cat.prototype.constructor= Cat;
varcat1 = new Cat("大毛","黄色");
alert(cat1.species);// 动物


Ps
该方法的优缺点也是比较明显的:
优点
这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存
缺点
缺点是Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
上面第二行代码,虽然保证了Cat的prototype的constructor指向了Cat,但是此时Animal的prototype的constructor也指向了Animal。破坏了Animal的对象的完整性。

总结:通过这三种方式,完全可以满足我们“继承”的需要了,这里主要依靠于prototype的功劳,要想熟悉这几种方式,还是要下功夫了解一下prototype对象了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript 继承