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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 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 serialize()与unserialize()的用法
2013/06/05 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python正则表达式之对号入座篇
2018/07/24 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
介绍一下write命令
2014/08/10 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
服装发布会策划方案
2014/05/22 职场文书
政风行风建设责任书
2014/07/23 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
一个都不能少观后感
2015/06/04 职场文书
重阳节简报
2015/07/20 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
《火烧云》教学反思
2016/02/23 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
LeetCode189轮转数组python示例
2022/08/05 Python