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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 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
?繁体转换的class
2006/10/09 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
php时间戳转换代码详解
2019/08/04 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Vue.js进阶知识点总结
2018/04/01 Javascript
Python字符遍历的艺术
2008/09/06 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python实现登录与注册系统
2020/11/30 Python
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
C#公司笔试题
2014/03/28 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
商务助理岗位职责
2013/11/13 职场文书
单位提档介绍信
2014/01/17 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
机关出纳岗位职责
2014/04/03 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
给校长的一封检讨书
2014/09/20 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
事业单位聘任报告
2015/03/02 职场文书
升学宴来宾致辞
2015/07/27 职场文书
法制教育主题班会
2015/08/13 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
2016中秋节广告语
2016/01/28 职场文书