基于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 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 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模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
详解Python中dict与set的使用
2015/08/10 Python
jupyter安装小结
2016/03/13 Python
python中的格式化输出用法总结
2016/07/28 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
名词解释型面试题(主要是网络)
2013/12/27 面试题
高中生自我评价个人范文
2013/11/09 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
岗位职责风险防控
2014/02/18 职场文书
文员岗位职责范本
2015/04/16 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js