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 24 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 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
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
PHP new static 和 new self详解
2017/02/19 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
详解javascript void(0)
2020/07/13 Javascript
python3实现单目标粒子群算法
2019/11/14 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
女子职高个人自荐书
2014/02/01 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
兴趣小组活动总结
2014/05/05 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
代办社保委托书范文
2014/10/06 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
考研复习计划
2015/01/19 职场文书
高中地理教学反思
2016/02/19 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
Python 中的Sympy详细使用
2021/08/07 Python