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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
ES6的新特性概览
Mar 10 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
详解用async/await来处理异步
Aug 28 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
django settings.py 配置文件及介绍
2019/07/15 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
八年级数学教学反思
2014/01/31 职场文书
化学工程专业求职信
2014/08/10 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
如何优化vue打包文件过大
2022/04/13 Vue.js
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android