JavaScript 原型继承之构造函数继承


Posted in Javascript onAugust 26, 2011

上回说到《JavaScript 原型继承之基础机制》,这一篇将具体说说构造函数的继承。

从一个简单的示例开始,创建描述人类的 People 构造函数:

function People(){ 
this.race = '愚蠢的人类'; 
}

然后,创建描述黄种人的 Yellow 构造函数:
function Yellow(name, skin){ 
this.name = name; 
this.skin = skin; 
}

要使得黄种人 Yellow 能继承人类 People 对象,在 JavaScript 中可以通过多种方式模拟实现。

1、对象冒充(Object Masquerading)

对象冒充,简单地说就是把一个定义抽象类的构造函数当作常规函数使用,实现伪继承:

function Yellow(name, skin) { 
this._extend = People; 
this._extend(); 
delete this._extend; //删除对 People 的引用 
this.name = name; 
this.skin = skin; 
} 
//实例化 yellow1 
var yellow1 = new Yellow('小明', '黄皮肤'); 
console.log(yellow1.name); //小明 
console.log(yellow1.race); //愚蠢的人类

在这段代码中,为 Yellow 添加私有方法 _extend,由于函数本身只是以引用的形式存在,执行时会自动调用 People方法,并传入 Yellow 构造函数的 name 参数。而 Yellow 对象的自身属性和方法,必须在上述过程结束,清空对外部方法的引用后再进行定义。

注:通过对象冒充可以实现多重继承

2、call / apply 方法

通过 call / apply 方法实现继承可能更为简单,不需要任何繁琐的操作:

function Yellow(name, skin) { 
People.apply(this, arguments); 
this.name = name; 
this.skin = skin; 
} 
//实例化 yellow2 
var yellow2 = new Yellow('大卫', '黑皮肤') 
console.log(yellow2.name); //大卫 
console.log(yellow2.race); //愚蠢的人类 
这里为 apply 传入 arguments 数组,也可以使用 new Array 或字面量数组。

3、原型链(Prototype Chaining)

第一种原型继承方法是把对象的原型指向父类的某个实例:

Yellow.prototype = new People(); 
Yellow.prototype.constructor = Yellow; //初始的 prototype 被完全清空,所以最好将 constructor 重置 
var yellow3 = new Yellow('小王', '黄皮肤'); 
console.log(yellow3.race); //愚蠢的人类

以上代码可以这样反向理解,yellow3 实例本身找不到 race 属性,而它原型上的 race 属性又恰好是 People 对象的实例的 race 属性。

如果对于 People 对象来说,其属性写入了原型中,则无需实例化,只需将 Yellow 的 prototype 属性指向 People的 prototype 属性:

function People(){}; 
People.prototype.race = '愚蠢的人类'; 
Yellow.prototype = People.prototype; 
Yellow.prototype.constructor = Yellow;

这样做不进行实例化操作,只是指针的改变,非常环保。但由于引用类型的关系,Yellow 和 People 指向了同一个原型对象,也就是说对 Yellow.prototype.constructor 的修改实际上破坏了 People 的原型对象。

既然如此,可以借助一个空的中继对象,绕过父类的原型:

var F = function(){}; 
F.prototype = People.prototype; 
Yellow.prototype = new F(); 
Yellow.prototype.constructor = Yellow;
Javascript 相关文章推荐
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
JavaScript原型继承之基础机制分析
Aug 26 #Javascript
自己动手开发jQuery插件教程
Aug 25 #Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
Aug 23 #Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 #Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 #Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
javascript实现固定侧边栏
2021/02/09 Javascript
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python ansible服务及剧本编写
2017/12/29 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python 实现线程之间的通信示例
2020/02/14 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Pandas的数据过滤实现
2021/01/15 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
高三毕业生自我鉴定
2013/12/20 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
教师个人鉴定材料
2014/02/08 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
收银员岗位职责
2015/02/03 职场文书
行政处罚事先告知书
2015/07/01 职场文书
小学三年级作文之写景
2019/11/05 职场文书