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 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
js查错流程归纳
May 04 Javascript
javascript操作符"!~"详解
Feb 10 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
模仿OSO的论坛(五)
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php开发工具有哪五款
2015/11/09 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
vue实现计算器功能
2020/02/22 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python中count函数简单的实例讲解
2020/02/06 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
读书心得体会
2013/12/28 职场文书
责任书范本大全
2015/05/11 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
小学校园广播稿
2015/08/18 职场文书
Python中tqdm的使用和例子
2022/09/23 Python