Javascript面向对象编程(二) 构造函数的继承


Posted in Javascript onAugust 28, 2011

今天要介绍的是,如何生成一个"继承"多个对象的实例。
比如,现在有一个"动物"对象的构造函数,

function Animal(){ 


this.species = "动物"; 

}

还有一个"猫"对象的构造函数,
function Cat(name,color){ 


this.name = name; 


this.color = color; 

}

怎样才能使"猫"继承"动物"呢?
1. 构造函数绑定
最简单的方法,大概就是使用call或apply方法,将父对象的构造函数绑定在子对象上,也就是在子对象构造函数中加一行:
function Cat(name,color){ 


Animal.apply(this, arguments); 


this.name = name; 


this.color = color; 

} 

var cat1 = new Cat("大毛","黄色"); 

alert(cat1.species); // 动物

2. prototype模式
更常见的做法,则是使用prototype属性。
如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。
Cat.prototype = new Animal(); 

Cat.prototype.constructor = Cat; 

var cat1 = new Cat("大毛","黄色"); 

alert(cat1.species); // 动物

代码的第一行,我们将Cat的prototype对象指向一个Animal的实例。

Cat.prototype = new Animal();
它相当于完全删除了prototype 对象原先的值,然后赋予一个新值。但是,第二行又是什么意思呢?

Cat.prototype.constructor = Cat;
原来,任何一个prototype对象都有一个constructor属性,指向它的构造函数。也就是说,Cat.prototype 这个对象的constructor属性,是指向Cat的。
我们在前一步已经删除了这个prototype对象原来的值,所以新的prototype对象没有constructor属性,所以我们必须手动加上去,否则后面的"继承链"会出问题。这就是第二行的意思。
总之,这是很重要的一点,编程时务必要遵守。下文都遵循这一点,即如果替换了prototype对象,

o.prototype = {};
那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

o.prototype.constructor = o;
3. 直接继承prototype
由于Animal对象中,不变的属性都可以直接写入Animal.prototype。所以,我们也可以让Cat()跳过 Animal(),直接继承Animal.prototype。
现在,我们先将Animal对象改写:

function Animal(){ } 

Animal.prototype.species = "动物";

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

Cat.prototype.constructor = Cat; 

var cat1 = new Cat("大毛","黄色"); 

alert(cat1.species); // 动物

与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
所以,上面这一段代码其实是有问题的。请看第二行

Cat.prototype.constructor = Cat;
这一句实际上把Animal.prototype对象的constructor属性也改掉了!

alert(Animal.prototype.constructor); // Cat
4. 利用空对象作为中介
由于"直接继承prototype"存在上述的缺点,所以可以利用一个空对象作为中介。

var F = function(){}; 

F.prototype = Animal.prototype; 

Cat.prototype = new F(); 

Cat.prototype.constructor = Cat;

F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。

alert(Animal.prototype.constructor); // Animal
5. prototype模式的封装函数
我们将上面的方法,封装成一个函数,便于使用。

function extend(Child, Parent) { 


var F = function(){}; 


F.prototype = Parent.prototype; 


Child.prototype = new F(); 


Child.prototype.constructor = Child; 


Child.uber = Parent.prototype; 

}

使用的时候,方法如下
extend(Cat,Animal); 

var cat1 = new Cat("大毛","黄色"); 

alert(cat1.species); // 动物

这个extend函数,就是YUI库如何实现继承的方法。
另外,说明一点。函数体最后一行

Child.uber = Parent.prototype;
意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。这等于是在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。
6. 拷贝继承
上面是采用prototype对象,实现继承。我们也可以换一种思路,纯粹采用"拷贝"方法实现继承。简单说,如果把父对象的所有属性和方法,拷贝进子对象,不也能够实现继承吗?
首先,还是把Animal的所有不变属性,都放到它的prototype对象上。

function Animal(){} 

Animal.prototype.species = "动物";

然后,再写一个函数,实现属性拷贝的目的。
function extend2(Child, Parent) { 


var p = Parent.prototype; 


var c = Child.prototype; 


for (var i in p) { 



c[i] = p[i]; 



} 


c.uber = p; 

}

这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象。
使用的时候,这样写:
extend2(Cat, Animal); 

var cat1 = new Cat("大毛","黄色"); 

alert(cat1.species); // 动物

未完,请继续阅读第三部分《非构造函数的继承》。
(完)
Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
JavaScript"模拟事件"的注意要点详解
Feb 13 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 #Javascript
Javascript继承机制的设计思想分享
Aug 28 #Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 #Javascript
JS面向对象编程浅析
Aug 28 #Javascript
用JS实现一个TreeMenu效果分享
Aug 28 #Javascript
JS target与currentTarget区别说明
Aug 28 #Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 #Javascript
You might like
php中的登陆login
2007/01/18 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
原生js实现购物车
2020/09/23 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
python中如何使用虚拟环境
2020/10/14 Python
客服实习的个人自我鉴定
2013/10/20 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
房地产项目合作意向书
2015/05/08 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server