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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php常用数组函数实例小结
2016/12/29 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
php7性能提升的原因详解
2019/10/13 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js实现拖拽效果
2015/02/12 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python super的使用方法及实例详解
2019/09/25 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
房屋租赁意向书
2014/04/01 职场文书
机房搬迁方案
2014/05/01 职场文书
市政管理求职信范文
2014/05/07 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
部门2015年度工作总结
2015/04/29 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书