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 动态改变图片大小
Jun 11 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
手机浏览器唤起微信分享(JS)
Oct 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 删除cookie和浏览器重定向
2009/03/16 PHP
php学习笔记之 函数声明
2011/06/09 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
在Python中处理XML的教程
2015/04/29 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
副总经理工作职责
2013/11/28 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
劳动保障个人工作总结
2015/03/04 职场文书