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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
js返回顶部实例分享
Dec 21 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
关于使用js算总价的问题
Jun 23 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
vue实现全选和反选功能
Aug 31 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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
人族 Terran 基本策略
2020/03/14 星际争霸
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
面包屑导航详解
2017/12/07 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
JavaScript之数组扁平化详解
2019/06/03 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Python3学习笔记之列表方法示例详解
2017/10/06 Python
对numpy中轴与维度的理解
2018/04/18 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python元组拆包实现方法
2021/02/28 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
单位领导证婚词
2014/01/14 职场文书
求职简历的自我评价
2014/01/31 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
质量保证书
2015/01/17 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
Go语言编译原理之源码调试
2022/08/05 Golang