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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
vue实现动态数据绑定
Apr 28 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
vue实现PC端分辨率适配操作
Aug 03 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/06/15 PHP
php数据访问之查询关键字
2016/05/09 PHP
实例讲解PHP表单处理
2019/02/15 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python调用java的jar包方法
2018/12/15 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python 元组操作总结
2019/09/18 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Python grpc超时机制代码示例
2020/09/14 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
一套C++笔试题面试题
2012/06/06 面试题
应付会计岗位职责
2013/12/12 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
公司离职证明范本
2014/01/13 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
遗嘱格式范本
2015/08/07 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers