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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
原生JS实现相邻月份日历
Oct 13 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 函数使用方法与函数定义方法
2010/05/09 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php中socket的用法详解
2014/10/24 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
Angular实现form自动布局
2016/01/28 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
银行党员批评与自我批评
2014/10/15 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
Java设计模式之代理模式
2022/04/22 Java/Android
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python