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插件开发方法(附完整实例及下载)
Apr 01 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
JS实现简单拖拽效果
Jun 21 Javascript
如何更好的编写js async函数
May 13 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
javascript常用对话框小集
2013/09/13 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Sea.JS知识总结
2016/05/05 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
vue中的计算属性实例详解
2018/09/19 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python 遍历pd.Series的index和value
2019/11/26 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
保密法制宣传月活动总结
2015/05/07 职场文书
篮球赛新闻稿
2015/07/17 职场文书
运动会200米广播稿
2015/08/19 职场文书
python实现过滤敏感词
2021/05/08 Python