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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JQuery教学之性能优化
May 14 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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获取某个目录大小的代码
2008/09/10 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php文件包含的几种方式总结
2019/09/19 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Python中 Lambda表达式全面解析
2016/11/28 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Python多进程fork()函数详解
2019/02/22 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
购买原创艺术品:Zatista
2019/11/09 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
年终奖发放方案
2014/06/02 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
javascript对象3个属性特征
2021/11/17 Javascript