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 相关文章推荐
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
img标签中onerror用法
2009/08/13 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
在Python中使用元类的教程
2015/04/28 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python如何发布程序的详细教程
2018/10/09 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
教师专业理论水平的自我评价分享
2013/11/09 职场文书
营销专业应届生求职信
2013/11/26 职场文书
全运会口号
2014/06/20 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL