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 相关文章推荐
js parseInt("08")未指定进位制问题
Jun 19 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
原生js检测页面加载完毕的实例
Sep 11 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
js验证密码强度解析
Mar 18 Javascript
Javascript实现打鼓效果
Jan 29 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP中读写文件实现代码
2011/10/20 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
原生js实现下拉框选择组件
2021/01/20 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python序列操作之进阶篇
2016/12/08 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
django模板语法学习之include示例详解
2017/12/17 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
使用python接入微信聊天机器人
2020/03/31 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
软件测试英文面试题
2012/10/14 面试题
公司庆典邀请函范文
2014/01/13 职场文书
十八大报告观后感
2014/01/28 职场文书
银行求职信模板
2015/03/20 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
MySQL数据库表约束讲解
2022/06/21 MySQL