基于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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
javascript冒泡排序小结
Apr 10 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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根据日期判断星座的函数分享
2014/02/13 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
基于对象合并功能的实现示例
2017/10/10 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python高级用法总结
2018/05/26 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
大学生蛋糕店创业计划书
2014/01/13 职场文书
财务出纳岗位职责
2014/02/03 职场文书
网络研修随笔感言
2014/02/17 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
材料会计岗位职责
2014/03/06 职场文书
厨房管理计划书
2014/04/27 职场文书
英文商务邀请函范文
2015/01/31 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python