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获得地址栏参数的两种方法
Nov 08 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jquery实现保存已选用户
Jul 21 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
javaScript语法总结
Nov 25 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
vue实现全选和反选功能
Aug 31 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 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
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
信息专业本科生个人的自我评价
2013/10/28 职场文书
手机业务员岗位职责
2013/12/13 职场文书
企业给企业的表扬信
2014/01/13 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
志愿者宣传口号
2014/06/17 职场文书
服务标语口号
2014/07/01 职场文书
旷课检讨书范文
2015/01/27 职场文书
茶花女读书笔记
2015/06/29 职场文书
运动员加油词
2015/07/18 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Sql Server之数据类型详解
2022/02/28 SQL Server
MySQL 数据表操作
2022/05/04 MySQL