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 11 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
js给selected添加options的方法
May 06 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php实现文件下载更能介绍
2012/11/23 PHP
Chrome Web App开发小结
2014/09/04 PHP
php中in_array函数用法分析
2014/11/15 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python抓取百度首页的方法
2015/05/19 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python实现猜数字小游戏
2020/03/24 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
中秋节礼品促销方案
2014/02/02 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
python获取带有返回值的多线程
2022/05/02 Python