基于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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
jquery中动态效果小结
Dec 16 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 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生成WAP页面
2006/10/09 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
使用php计算排列组合的方法
2013/11/13 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
js Dom实现换肤效果
2017/10/21 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
党员教师工作决心书
2014/03/13 职场文书
小学评语大全
2014/04/22 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
信访稳定工作汇报
2014/10/27 职场文书
邀请函模板
2015/02/02 职场文书
中小企业员工手册范本
2015/05/14 职场文书
简爱电影观后感
2015/06/10 职场文书
家庭贫困证明
2015/06/16 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python