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 相关文章推荐
文本加密解密
Jun 23 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JS实现复制功能
Mar 01 Javascript
node.js操作mysql简单实例
May 25 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
Postman参数化实现过程及原理解析
Aug 13 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和ACCESS写聊天室(七)
2006/10/09 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
vue.js实现标签页切换效果
2018/06/07 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
详解python中的数据类型和控制流
2019/08/08 Python
python 循环数据赋值实例
2019/12/02 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
工地安全检查制度
2014/02/04 职场文书
寒假家长评语大全
2014/04/16 职场文书
一年级学生评语
2014/04/23 职场文书
婚庆公司计划书
2014/09/15 职场文书
学生会感恩节活动方案
2014/10/11 职场文书