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 常用操作方法
Jan 28 Javascript
jquery实现心算练习代码
Dec 06 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
node.js require() 源码解读
Dec 13 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
js module大战
Apr 19 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 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之短标签开启设置
2013/06/17 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python僵尸进程产生的原因
2017/07/21 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
django ajax json的实例代码
2018/05/29 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
扬州个园导游词
2015/02/06 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2016新年致辞
2015/08/01 职场文书
期中考试后的感想
2015/08/07 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
DQL数据查询语句使用示例
2022/12/24 MySQL