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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
CSS+JS构建的图片查看器
Jul 22 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
Terran建筑一览
2020/03/14 星际争霸
PHP 高手之路(三)
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
详解Document.Cookie
2015/12/25 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python如何发布程序的详细教程
2018/10/09 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
python 函数中的参数类型
2020/02/11 Python
Jupyter加载文件的实现方法
2020/04/14 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
见习期自我鉴定
2014/01/31 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
中学生检讨书1000字
2014/10/28 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL