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 添加/移除CSS类实现代码
Feb 11 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
Jquery-data的三种用法
Apr 18 jQuery
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
详解Vue的七种传值方式
Feb 08 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文本操作类
2006/11/25 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php数组分页实现方法
2016/04/30 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php依赖注入知识点详解
2019/09/23 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python查看模块,对象的函数方法
2018/10/16 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
24岁生日感言
2014/01/13 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
学徒工职责
2014/03/06 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
公司授权委托书范本
2014/09/18 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript