javascript 面向对象全新理练之原型继承


Posted in Javascript onDecember 03, 2009

首先创建一个父类的实例化对象,然后将该对象赋给子类的 prototype 属性。
这样,父类中的所有公有实例成员都会被子类继承。并且用 instanceof 运算符判断时,子类的实例化对象既属于子类,也属于父类。

然后将子类本身赋值给它的 prototype 的 constructor 属性。(注意:这里赋值的时候是没有 () 的!)
这一步是为了保证在查看子类的实例化对象的 constructor 属性时,看到的是子类的定义,而不是其父类的定义。

接下来,通过对 o.method1() 调用的结果我们会看到,子类继承来的公有实例方法中,如果调用了私有实例字段或者私有实例方法,则所调用的这些私有实例成员是属于父类的。

同样,通过对 o.method2() 调用的结果我们看到,子类中定义的实例方法,如果调用了私有实例字段或者私有实例方法,则所调用的这些私有实例成员是属于子类的。

通过对 o.method() 调用的结果我们看到,定义在父类原型上的方法,会被子类继承。
通过对 o.method3() 调用的结果我们看到,子类中定义的实例方法是不能访问父类中定义的私有实例成员的。
最后,通过对 subClass.staticMethod() 调用的结果我们看到,静态成员是不会被继承的。

2.4 调用继承法
调用继承的本质是,在子类的构造器中,让父类的构造器方法在子类的执行上下文上执行,父类构造器方法上所有通过 this 方式操作的内容实际上都都是操作的子类的实例化对象上的内容。因此,这种做法仅仅为了减少重复代码的编写。

function parentClass() { 
// private field 
var x = "I'm a parentClass field!"; 
// private method 
function method1() { 
alert(x); 
alert("I'm a parentClass method!"); 
} 
// public field 
this.x = "I'm a parentClass object field!"; 
// public method 
this.method1 = function() { 
alert(x); 
alert(this.x); 
method1(); 
} 
} 
parentClass.prototype.method = function () { 
alert("I'm a parentClass prototype method!"); 
} parentClass.staticMethod = function () { 
alert("I'm a parentClass static method!"); 
} 
function subClass() { 
// inherit 
parentClass.call(this); 
// private field 
var x = "I'm a subClass field!"; 
// private method 
function method2() { 
alert(x); 
alert("I'm a subClass method!"); 
} 
// public field 
this.x = "I'm a subClass object field!"; 
// public method 
this.method2 = function() { 
alert(x); 
alert(this.x); 
method2(); 
} 
this.method3 = function() { 
method1(); 
} 
} 
// test 
var o = new subClass(); 
alert(o instanceof parentClass); // false 
alert(o instanceof subClass); // true 
alert(o.constructor); // function subClass() {...} 
o.method1(); // I'm a parentClass field! 
// I'm a subClass object field! 
// I'm a parentClass field! 
// I'm a parentClass method! 
o.method2(); // I'm a subClass field! 
// I'm a subClass object field! 
// I'm a subClass field! 
// I'm a subClass method! 
o.method(); // Error!!! 
o.method3(); // Error!!! 
subClass.staticMethod(); // Error!!!

上面这个例子很好的反映出了如何利用调用继承法来实现继承。
利用调用继承的关键只有一步操作:
就是在子类定义时,通过父类的 call 方法,将子类的 this 指针传入。使父类方法在子类上下文中执行。
这样,父类中的所有在父类内部通过 this 方式定义的公有实例成员都会被子类继承。
用 instanceof 运算符判断时,子类的实例化对象只属于子类,不属于父类。
查看子类的实例化对象的 constructor 属性时,看到的是子类的定义,不是其父类的定义。
接下来,通过对 o.method1() 和 o.method2() 调用的结果跟原型继承法的调用结果是相同的,所说明的问题也是一样的,这里不再重复。
通过对 o.method() 调用的结果我们看到,定义在父类原型上的方法,不会被子类继承。
通过对 o.method3() 调用的结果我们看到,子类中定义的实例方法同样不能访问父类中定义的私有实例成员的。
最后,通过对 subClass.staticMethod() 调用的结果我们看到,静态成员同样不会被继承的。
最后,还有一点,在这个例子中没有体现出来,就是通过调用继承法,可以实现多继承。也就是说,一个子类可以从多个父类中继承通过 this 方式定义在父类内部的所有公有实例成员。
作为一种弱类型语言,javascript 提供了丰富的多态性,javascript 的多态性是其它强类型面向对象语言所不能比的。
多态
重载和覆盖
先来说明一下重载和覆盖的区别。重载的英文是 overload,覆盖的英文是 override。发现网上大多数人把 override 当成了重载,这个是不对的。重载和覆盖是有区别的。
重载的意思是,同一个名字的函数(注意这里包括函数)或方法可以有多个实现,他们依靠参数的类型和(或)参数的个数来区分识别。
而覆盖的意思是,子类中可以定义与父类中同名,并且参数类型和个数也相同的方法,这些方法的定义后,在子类的实例化对象中,父类中继承的这些同名方法将被隐藏。
重载
javascript 中函数的参数是没有类型的,并且参数个数也是任意的,例如,尽管你可以定义一个:
function add(a, b) { 
return a + b; 
}

这样的函数,但是你仍然可以再调用它是带入任意多个参数,当然,参数类型也是任意的。至于是否出错,那是这个函数中所执行的内容来决定的,javascript 并不根据你指定的参数个数和参数类型来判断你调用的是哪个函数。
因此,要定义重载方法,就不能像强类型语言中那样做了。但是你仍然可以实现重载。就是通过函数的 arguments 属性。例如:
function add() { 
var sum = 0; 
for (var i = 0; i < arguments.length; i++) { 
sum += arguments[i]; 
} 
return sum; 
}

这样你就实现了任意多个参数加法函数的重载了。
当然,你还可以在函数中通过 instanceof 或者 constructor 来判断每个参数的类型,来决定后面执行什么操作,实现更为复杂的函数或方法重载。总之,javascript 的重载,是在函数中由用户自己通过操作 arguments 这个属性来实现的。
覆盖
实现覆盖也很容易,例如:
function parentClass() { 
this.method = function() { 
alert("parentClass method"); 
} 
} 
function subClass() { 
this.method = function() { 
alert("subClass method"); 
} 
} 
subClass.prototype = new parentClass(); 
subClass.prototype.constructor = subClass; var o = new subClass(); 
o.method();

这样,子类中定义的 method 就覆盖了从父类中继承来的 method 方法了。
你可能会说,这样子覆盖是不错,但 java 中,覆盖的方法里面可以调用被覆盖的方法(父类的方法),在这里怎么实现呢?也很容易,而且比 java 中还要灵活,java 中限制,你只能在覆盖被覆盖方法的方法中才能使用 super 来调用次被覆盖的方法。我们不但可以实现这点,而且还可以让子类中所有的方法中都可以调用父类中被覆盖的方法。看下面的例子:
function parentClass() { 
this.method = function() { 
alert("parentClass method"); 
} 
} 
function subClass() { 
var method = this.method; 
this.method = function() { 
method.call(this); 
alert("subClass method"); 
} 
} 
subClass.prototype = new parentClass(); 
subClass.prototype.constructor = subClass; var o = new subClass(); 
o.method();

你会发现,原来这么简单,只要在定义覆盖方法前,定义一个私有变量,然后把父类中定义的将要被覆盖的方法赋给它,然后我们就可以在后面继续调用它了,而且这个是这个方法是私有的,对于子类的对象是不可见的。这样跟其它高级语言实现的覆盖就一致了。

最后需要注意,我们在覆盖方法中调用这个方法时,需要用 call 方法来改变执行上下文为 this(虽然在这个例子中没有必要),如果直接调用这个方法,执行上下文就会变成全局对象了。

Javascript 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
详解javascript replace高级用法
Feb 17 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 #Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 #Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 #Javascript
jQuery 跨域访问问题解决方法
Dec 02 #Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 #Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 #Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 #Javascript
You might like
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
python使用建议与技巧分享(一)
2020/08/17 Python
大学生职业生涯规划书模板
2014/01/18 职场文书
干部现实表现材料
2014/02/13 职场文书
七年级语文教学反思
2016/03/03 职场文书
工伤调解协议书
2016/03/21 职场文书
接收函
2019/04/22 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
各国货币符号大全
2022/02/17 杂记
基于docker安装zabbix的详细教程
2022/06/05 Servers