基于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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
javascript中的this详解
Dec 08 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
javascript每日必学之运算符
Feb 16 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 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,ajax实现分页
2008/03/27 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
关于python中的xpath解析定位
2020/03/06 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
自我介绍演讲稿
2014/01/15 职场文书
科学育儿宣传标语
2014/10/08 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
立案决定书范文
2015/06/24 职场文书
教师研修随笔感言
2015/11/18 职场文书
初一英语教学反思
2016/02/15 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL