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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
js转换对象为xml
Feb 17 Javascript
js实现五星评价功能
Mar 08 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 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
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python argv用法详解
2016/01/08 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python3 re返回形式总结
2020/11/20 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
运动会入场词200字
2014/02/15 职场文书
数控专业自荐书范文
2014/03/16 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python