JavaScript实现继承的4种方法总结


Posted in Javascript onOctober 16, 2014

JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。

1、原型链继承:

var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

};  

Sub.prototype = new Base();  

Sub.prototype.name = "sub";

优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。

缺点:子类区别于父类的属性和方法,必须在Sub.prototype = new Base();这样的语句之后分别执行,无法被包装到Sub这个构造器里面去。例如:Sub.prototype.name = “sub”;无法实现多重继承。

2、构造继承:

var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

    Base.call(this);  

    this.name = "sub";  

};

优点:可以实现多重继承,可以把子类特有的属性设置放在构造器内部。

缺点:使用instanceof发现,对象不是父类的实例。

3、实例继承:

var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

    var instance = new Base();  

    instance.name = "sub";  

    return instance;  

};

优点:是父类的对象,并且使用new构造对象和不使用new构造对象,都可以获得相同的效果。

缺点:生成的对象实质仅仅是父类的实例,并非子类的对象;不支持多继承。

4、拷贝继承:

var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var Sub = function()  

{  

    var base = new Base();  

    for(var i in base)  

        Sub.prototype[i] = base[i];  

    Sub.prototype["name"] = "sub";  

};

优点:支持多继承。

缺点:效率较低;无法获取父类不可枚举的方法。

这几种形式各有特点,仅就我提供的代码而言,满足下面的表格:

JavaScript实现继承的4种方法总结

2012-1-10:补充,如果我们不需要类继承,只需要对象继承,对于支持 ECMAScript 5 的浏览器来说,还可以用Object.create方法来实现:

var Base = function()  

{  

    this.level = 1;  

    this.name = "base";  

    this.toString = function(){  

        return "base";  

    };  

};  

Base.CONSTANT = "constant";  

   

var sub = Object.create(new Base());  

sub.name = "sub";
Javascript 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
js编写简单的计时器功能
Jul 15 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
JavaScript实现网页截图功能
Oct 16 #Javascript
JavaScript跨域方法汇总
Oct 16 #Javascript
js阻止事件追加的具体实现
Oct 15 #Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 #Javascript
原生的html元素选择器类似jquery选择器
Oct 15 #Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 #Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 #Javascript
You might like
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
对Django url的几种使用方式详解
2019/08/06 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python基础教程之while循环
2019/08/14 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
劳动仲裁调解书
2015/05/20 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书