基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解


Posted in Javascript onMay 07, 2013

构造函数、原型实现继承的缺陷

首先来分析构造函数和原型链两种实现继承方式的缺陷:

构造函数(对象冒充)的主要问题是必须使用构造函数方式,且无法继承通过原型定义的方法,这不是最好的选择。不过如果使用原型链,就无法使用带参数的构造函数了。开发者如何选择呢?答案很简单,两者都用。

构造函数+原型混合方式

这种继承方式使用构造函数定义类,并非使用任何原型。创建类的最好方式是用构造函数定义属性,用原型定义方法。这种方式同样适用于继承机制,用对象冒充继承构造函数的属性,用原型链继承 prototype 对象的方法。用这两种方式重写前面的例子,代码如下:

function ClassA(sColor) {
    this.color = sColor;
}
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB(sColor, sName) {
    ClassA.call(this, sColor);
    this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
    alert(this.name);
};

在此例子中,继承机制由两行突出显示的蓝色代码实现。在第一行突出显示的代码中,在 ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性。在第二行突出显示的代码中,用原型链继承 ClassA 类的方法。由于这种混合方式使用了原型链,所以 instanceof 运算符仍能正确运行。

下面的例子测试了这段代码:

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();    //输出 "blue"
objB.sayColor();    //输出 "red"
objB.sayName();    //输出 "John"

Javascript 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
node之本地服务器图片上传的方法示例
Mar 26 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 #Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 #Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 #Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 #Javascript
jQuery的slideToggle方法实例
May 07 #Javascript
jQuery实现动画效果的实例代码
May 07 #Javascript
nullJavascript中创建对象的五种方法实例
May 07 #Javascript
You might like
php 代码优化之经典示例
2011/03/24 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php的dl函数用法实例
2014/11/06 PHP
php正则表达式学习笔记
2015/11/13 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
初学Javascript的一些总结
2008/11/03 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python机器学习库xgboost的使用
2020/01/20 Python
python关于变量名的基础知识点
2020/03/03 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
春风行动实施方案
2014/03/28 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL