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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php中文验证码实现方法
2015/06/18 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
jQuery bind事件使用详解
2011/05/05 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
JavaScript手机振动API
2016/06/11 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
python中K-means算法基础知识点
2021/01/25 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
资产经营总监岗位职责
2013/12/04 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
部门活动策划方案
2014/08/16 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
标准版离职证明书
2014/09/12 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
总账会计岗位职责
2015/04/02 职场文书
通知的写法
2015/04/23 职场文书
同意落户证明
2015/06/19 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
师德培训心得体会2016
2016/01/09 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书