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修改表单的提交地址基本思路
Jun 04 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
Vue核心概念Action的总结
Jan 18 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的一个登录的类 [推荐]
2007/03/16 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
js实现计算器功能
2020/08/10 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
python中字符串内置函数的用法总结
2018/09/13 Python
python实现KNN分类算法
2019/10/16 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
活动总结书怎么写
2015/05/11 职场文书
推销搭讪开场白
2015/05/28 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
Python中22个万用公式的小结
2021/07/21 Python