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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
js完整倒计时代码分享
Sep 18 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
小程序实现分类页
Jul 12 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 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图片上传类带图片显示
2006/11/25 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python如何删除文件、目录
2020/06/23 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
Java如何读取CLOB字段
2013/10/10 面试题
集团财务总监岗位职责
2015/04/03 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android