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基础资料整理2
Dec 06 Javascript
基于datagrid框架的查询
Apr 08 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
单元选择合并变色示例代码
May 26 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue-test-utils初使用详解
May 23 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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.ini 中文版
2006/10/28 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
JavaScript中文件上传API详解
2016/04/01 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
python多进程操作实例
2014/11/21 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
django中嵌套的try-except实例
2020/05/21 Python
Python是怎样处理json模块的
2020/07/16 Python
Python脚本调试工具安装过程
2021/01/11 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
linux面试题参考答案(8)
2016/04/19 面试题
领导证婚人证婚词
2014/01/13 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
大专生自我评价
2014/01/28 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
生产车间标语
2014/06/11 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
python基础之错误和异常处理
2021/10/24 Python
Oracle中update和select 关联操作
2022/01/18 Oracle
Python中的tkinter库简单案例详解
2022/01/22 Python