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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
详解Python_shutil模块
2019/03/15 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Python面向对象封装操作案例详解
2019/12/31 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
校三好学生主要事迹
2014/01/11 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
药店促销活动总结
2014/07/10 职场文书
个人授权委托书
2014/09/15 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2015年暑假生活总结
2015/07/13 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang