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 UI AutoComplete 使用说明
Jun 20 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
layui文件上传实现代码
May 20 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
React组件refs的使用详解
Feb 09 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
在js中修改html body的样式
Nov 11 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 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP目录操作实例总结
2016/09/27 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
在视频前插入广告
2006/11/20 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
Python基础知识_浅谈用户交互
2017/05/31 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python简易远程控制单线程版
2018/06/20 Python
python requests指定出口ip的例子
2019/07/25 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
安全生产投入制度
2014/01/29 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
员工给公司的建议书
2019/06/24 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技