javascript 面向对象编程基础:继承


Posted in Javascript onAugust 21, 2009

我们看到这里继承的概念是多么的直白,“拷贝一个类的prototype 到另外一个类”,好,Code is cheap,看代码:

function class1() { }
function class2() { }
class2.prototype = class1.prototype;
class2.moreProperty1 = " class 2 additional string " ;
class2.moreMethod1 = function () { alert( " class 2 additional method " ); }
/*
这样,首先是class2具有了和class1 一样的prototype,不考虑构造函数,两个类是等价的。
随后,又通过prototype给class2赋予了两个额外的方法。所以class2是在class1的基础上
增加了属性和方法,这就实现了类的继承。
*/

function test() {
var obj = new class2();
// JavaScript提供了instanceof 操作符来判断一个对象是否是某个类的实例
alert(obj instanceof class2); // true
alert(obj instanceof class1); // ?
}

运行代码,结果是不是在我们的意料之中?表面上看,上面的实现完全可行,js也可以正确的理解和实现这种继承关系,obj同时是class1和 class2的实例,但实质上则不然(我们学习的目的是要知其然更要知其所以然)。js的这种理解实际上是基于一种很简单的策略,看下面的代码,先使用 prototype让class2 继承于class1,再在class2 中重复定义method 方法:

// 定义class1
function class1() {
// 构造函数
}
// 定义class1 的成员
class1.prototype = {
m1: function () { // 方法1
alert( " class1 method1 " );
}
}
// 定义class2
function class2() {
// 构造函数
}
// 让class2 继承于class1
class2.prototype = class1.prototype;

// 给class2 重复定义方法method
class2.prototype.method = function () {
alert( " whose method2? class1 or class2 " );
}
// 创建两个类的实例
var obj1 = new class1();
var obj2 = new class2();

function test() {
// 分别调用两个对象的method 方法
obj1.method();
obj2.method();
}

从代码执行结果看,method方法在class1,2中运行的结果是相同的。

由此可见,当对class2 进行prototype 的改变时,class1的prototype也随之改变,即使对class2 的prototype 增减一些成员,class1的成员也随之改变。所以class1 和class2 仅仅是构造函数不同的两个类,它们保持着相同的成员定义。说到这里,相信读者已经发现了其中的奥妙:class1 和class2 的prototype 是完全相同的,是对同一个对象的引用。其实从这条赋值语句就可以看出来:
//让class2 继承于class1
class2.prototype=class1.prototype;
在js中,除了基本的数据类型(数字、字符串、布尔类型等),所有的赋值以及函数参数都是引用传递,而不是值传递。所以上面的语句仅仅是让class2 的prototype 对象引用class1 的prototype,造成了类成员定义始终保持一致的效果。从这里也看到了instanceof 操作符的执行机制,它就是判断一个对象是否是一个prototype 的实例,因为这里的obj1 和obj2 都是对应于同一个prototype,所以它们instanceof 的结果都是相同的。由此可见,使用prototype 引用拷贝实现继承不是一种正确的办法。但在要求不严格的情况下,却也是一种合理的方法,唯一的约束是不允许类成员的覆盖定义(这里其实也是js的灵活性的体现)。其实,我们完全可以利用反射机制和prototype 来实现js正确的类继承:

function class1() {
// 构造函数
}
class1.prototype = {
method: function () {
alert( " method1 " );
},
method2: function () {
alert( " method2 " );
}
}
function class2() {
// 构造函数
}

// 让class2 继承于class1
for ( var p in class1.prototype) {
class2.prototype[p] = class1.prototype[p]; // 利用反射机制和prototype实现继承
}

// 覆盖定义class1中的method 方法
class2.prototype.method = function () {
alert( " class2 new method1 " );
}

// 创建两个类的实例
var obj1 = new class1();
var obj2 = new class2();

function test() {
// 分别调用两个对象的method 方法
obj1.method();
obj2.method();
// 分别调用两个对象的method2 方法
obj1.method2();
obj2.method2();
}

从运行结果可见,obj2中重复定义的method 已经覆盖了继承的method方法,同时method2 方法未受影响。而且obj1中的method 方法仍然保持了原有的定义。这样,就实现了正确意义的类的继承。为了方便开发,可以为每个类添加一个共有的方法,用以实现类的继承:

// 为类添加静态方法inherit表示继承于某类
Function.prototype.inherit = function (baseClass) {
for ( var p in baseClass.prototype) {
this .prototype[p] = baseClass.prototype[p];
}
}

function class1() {
// 构造函数
}
class1.prototype = {
method: function () {
alert( " method1 " );
},
method2: function () {
alert( " method2 " );
}
}
function class2() {
// 构造函数
}

// 让class2 继承于class1
// for (var p in class1.prototype) {
// class2.prototype[p] = class1.prototype[p]; // 利用反射机制和prototype实现继承
// }

class2.inherit(class1); // 等价于上面注释掉的那一个for循环

// 覆盖定义class1中的method 方法
class2.prototype.method = function () {
alert( " class2 new method1 " );
}

// 创建两个类的实例
var obj1 = new class1();
var obj2 = new class2();

function test() {
// 分别调用两个对象的method 方法
obj1.method();
obj2.method();
// 分别调用两个对象的method2 方法
obj1.method2();
obj2.method2();
}

上面的代码使逻辑变的更加清楚,也更容易理解。通过这种方法实现的继承,有一个缺点,就是在class2 中添加类成员定义时,不能给prototype 直接赋值,而只能对其属性进行赋值,例如不能为:
class2.prototype={
//成员定义
}
而只能为:
class2.prototype.propertyName=someValue;
class2.prototype.methodName=function(){
//语句
}

由此可见,这样实现继承仍然要以牺牲一定的代码可读性为代价。有没有“不仅基类可以用对象直接赋值给property,而且在派生类中也可以同样实现,使代码逻辑更加清晰,也更能体现面向对象的语言特点”的js继承方式?引号里的说法是多么的诱人啊,继续学习去了。

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
javascript 面向对象编程基础:封装
Aug 21 #Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 #Javascript
javascript 自定义事件初探
Aug 21 #Javascript
IE 下的只读 innerHTML
Aug 21 #Javascript
JS 控制CSS样式表
Aug 20 #Javascript
JS获取父节点方法
Aug 20 #Javascript
javascript 数组排序函数
Aug 20 #Javascript
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
如何实现动态删除javascript函数
2007/05/27 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
土木工程师岗位职责
2013/11/24 职场文书
英文自我鉴定
2013/12/10 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
万里长城导游词
2015/01/30 职场文书
务工证明怎么写
2015/06/18 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
微信小程序实现录音Record功能
2021/05/09 Javascript
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS