JavaScript中的继承之类继承


Posted in Javascript onMay 01, 2016

继承简介

      在JS中继承是一个非常复杂的话题,比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。在JS中想要达到继承公用成员的目的,需要采取一系列措施。JS属于原型式继承,得益于这种灵活性,我们既可以使用标准的基于类的继承,也可以使用更微妙一些的原型式继承。在JS中应该要明确一点,一切继承都是通过prototype来进行的,且JS是基于对象来继承的。

继承:

function Animal(name){ 
this.name = name; 
this.showName = function(){ 
alert(this.name); 
} 
} 
function Cat(name){ 
Animal.call(this, name); 
} 
var cat = new Cat("Black Cat"); 
cat.showName();

Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了.

多继承:

function Class10() 
{ 
this.showSub = function(a,b) 
{ 
alert(a-b); 
} 
} 
function Class11() 
{ 
this.showAdd = function(a,b) 
{ 
alert(a+b); 
} 
} 
function Class2() 
{ 
Class10.call(this); 
Class11.call(this); 
}

很简单,使用两个 call 就实现多重继承了

当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments。

下面给大家介绍如何在JavaScript中实现简单的继承?

下面的例子将创建一个雇员类Employee,它从Person继承了原型prototype中的所有属性。

function Employee(name, sex, employeeID) {
this.name = name;
this.sex = sex;
this.employeeID = employeeID;
}
// 将Employee的原型指向Person的一个实例
// 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan", "man", "");
console.log(zhang.getName()); // "ZhangSan

上面关于继承的实现很粗糙,并且存在很多问题:

在创建Employee构造函数和原型(以后简称类)时,就对Person进行了实例化,这是不合适的。

Employee的构造函数没法调用父类Person的构造函数,导致在Employee构造函数中对name和sex属性的重复赋值。

Employee中的函数会覆盖Person中的同名函数,没有重载的机制(和上一条是一个类型的问题)。

创建JavaScript类的语法过于零散,不如C#/Java中的语法优雅。

实现中有constructor属性的指向错误。

Javascript 相关文章推荐
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
简单理解vue中Props属性
Oct 27 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 #Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 #Javascript
js实现的万能flv网页播放器代码
Apr 30 #Javascript
js实现的下拉框二级联动效果
Apr 30 #Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 #Javascript
js简单倒计时实现代码
Apr 30 #Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 #Javascript
You might like
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
Python实现保证只能运行一个脚本实例
2015/06/24 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
如何在python中实现随机选择
2019/11/02 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
如何理解python对象
2020/06/21 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
秘书行业自我鉴定范文
2013/12/30 职场文书
美术教学感言
2014/02/22 职场文书
地质灾害防治方案
2014/05/14 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers