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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
node后端服务保活的实现
Nov 10 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无法访问远程mysql的问题分析及解决
2013/05/16 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
jQuery实现聊天对话框
2020/02/08 jQuery
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python 实现list或string按指定分段
2019/12/25 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
如何使用python写截屏小工具
2020/09/29 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
八年级语文教学反思
2014/02/11 职场文书
幼儿园安全责任书
2014/04/14 职场文书
理财学专业自荐书
2014/06/28 职场文书
好的旅游活动方案
2014/08/19 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android