基于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 相关文章推荐
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
js友好的时间返回函数
Aug 24 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 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代码
2013/12/03 PHP
php实现的ping端口函数实例
2014/11/12 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
python str与repr的区别
2013/03/23 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python探索之SocketServer详解
2017/10/28 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python 3.8 新功能全解
2019/07/25 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python实现ping命令小程序
2020/12/28 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
大学生实习证明范本
2014/09/19 职场文书
院系推荐意见
2015/06/05 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫