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给input和textarea设定ie中的focus
May 29 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
angularJS中router的使用指南
Feb 09 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 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
PHP网站基础优化方法小结
2008/09/29 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
php实现图片添加水印功能
2014/02/13 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
DOM 高级编程
2015/05/06 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python实现的分层随机抽样案例
2020/02/25 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
构造方法和其他方法的区别
2016/04/26 面试题
电气自动化个人求职信范文
2014/02/03 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL