JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现


Posted in Javascript onAugust 14, 2012

继承

继承是面向对象语言的必备特征,即一个类能够重用另一个类的方法和属性。在JavaScript中继承方式的实现方式主要有以下五种:对象冒充、call()、apply()、原型链、混合方式。

下面分别介绍。

对象冒充

原理:构造函数使用this关键字给所有属性和方法赋值。因为构造函数只是一个函数,所以可以使ClassA的构造函数成为ClassB的方法,然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。

示例:

function ClassA(sColor){ 
this.color=sColor; 
this.sayColor=function(){ 
alert(this.color); 
} 
} function ClassB(sColor,sName){ 
this.newMethod=ClassA; 
this.newMethod(sColor); 
delete this.newMethod; 
this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
} 
}

调用:
var objb=new ClassB("blue","Test"); 
objb.sayColor();// 
blueobjb.sayName(); // Test

注意:这里要删除对ClassA的引用,否则在后面定义新的方法和属性会覆盖超类的相关属性和方法。用这种方式可以实现多重继承。

call()方法

由于对象冒充方法的流行,在ECMAScript的第三版对Function对象加入了两个新方法 call()和apply()方法来实现相似功能。

call()方法的第一个参数用作this的对象,其他参数都直接传递给函数自身。示例:

function sayColor(sPrefix,sSuffix){ 
alert(sPrefix+this.color+sSuffix); 
} var obj=new Object(); 
obj.color="red"; 
//output The color is red, a very nice color indeed. 
sayColor.call(obj,"The color is ",", a very nice color indeed.");

 使用此方法来实现继承,只需要将前三行的赋值、调用、删除代码替换即可:
function ClassB(sColor,sName){ 
//this.newMethod=ClassA; 
//this.newMethod(sColor); 
//delete this.newMethod; 
ClassA.call(this,sColor); this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
} 
}

apply()方法

apply()方法跟call()方法类似,不同的是第二个参数,在apply()方法中传递的是一个数组。

function sayColor(sPrefix,sSuffix){ 
alert(sPrefix+this.color+sSuffix); 
} var obj=new Object(); 
obj.color="red"; 
//output The color is red, a very nice color indeed. 
sayColor.apply(obj,new Array("The color is ",", a very nice color indeed."));

使用此方法来实现继承,只需要将前三行的赋值、调用、删除代码替换即可:
function ClassB(sColor,sName){ 
//this.newMethod=ClassA; 
//this.newMethod(sColor); 
//delete this.newMethod; 
ClassA.apply(this,new Array(sColor)); this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
} 
}

跟call()有一点不同的是,如果超类中的参数顺序与子类中的参数顺序完全一致,第二个参数可以用arguments。

原型链

继承这种形式在ECMAScript中原本是用于原型链的。Prototype对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能实现继承机制。

用原型链实现继承示例:

function ClassA(){ 
} ClassA.prototype.color="red"; 
ClassA.prototype.sayColor=function(){ 
alert(this.color); 
}; 
function ClassB(){ 
} 
ClassB.prototype=new ClassA();

 注意:调用ClassA的构造函数时,没有给它传递参数。这在原型链中是标准的做法,要确保构造函数没有任何参数。

混合方式

这种方式混合了对象冒充和原型链方式。示例:

function ClassA(sColor){ 
this.color=sColor; 
} 
ClassA.prototype.sayColor=function(){ 
alert(this.color); 
} function ClassB(sColor,sName){ 
ClassA.call(this,sColor); 
this.name=sName; 
} 
ClassB.prototype=new ClassA(); 
ClassB.prototype.sayName=function(){ 
alert(this.name); 
}

调用示例:
var objb=new ClassB("red","test"); 
objb.sayColor();// output red 
objb.sayName();// output test

作者:Artwl
Javascript 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 #Javascript
jQuery 1.8 Release版本发布了
Aug 14 #Javascript
常用一些Javascript判断函数
Aug 14 #Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 #Javascript
JavaScript 布尔操作符解析  && || !
Aug 10 #Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 #Javascript
You might like
php5新改动之短标记启用方法
2008/09/11 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
科技活动周标语
2014/10/08 职场文书
民主评议党员工作总结
2014/10/20 职场文书
民事和解协议书格式
2014/11/29 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers