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 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
javascript的事件描述
2006/09/08 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
python脚本替换指定行实现步骤
2017/07/11 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
一百多行python代码实现抢票助手
2018/09/25 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
最常使用的求职信
2014/05/25 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL