基于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 09 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
node.js require() 源码解读
Dec 13 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 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
抓取YAHOO股票报价的类
2009/05/15 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
PHP检测用户语言的方法
2015/06/15 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
用JS实现选项卡
2020/03/23 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
中专三年学习的个人自我评价
2013/12/12 职场文书
国税会议欢迎词
2014/01/16 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
成人继续教育实施方案
2014/03/01 职场文书
房地产广告词大全
2014/03/19 职场文书
我的画教学反思
2014/04/28 职场文书
责任担保书范文
2014/05/21 职场文书
学籍证明模板
2015/06/18 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书