javascript是怎么继承的介绍


Posted in Javascript onJanuary 05, 2012

第一个阶段:

function A(){ 
this.funB = function(){ 
alert('A:funB'); 
}; 
} 
A.prototype = { 
funA:function(){ 
alert('A:funA'); 
} 
}; 
function B(){ 
} 
function extend(sub,parent){ 
sub.prototype = new parent(); 
sub.prototype.constructor = sub; 
} 
extend(B,A); 
var b = new B(); 
b.funA(); // out 'A:funA' 
b.funB(); // out 'A:funB' 
alert(b instanceof A); // out "true"

想必大家一眼就看出什么意思了,先是定义了A,B两个类,然后使用extend方法来让B继承A类。extend的原理就是让父类 new 到子类的prototype上。
用instanceof来检测也为true,想要让instanceof为true,那就必须两个类的prototype对象要为同一个object,不管是间接或直接的。
这样的方式有没有问题呢?在通常面向对象语言中,子类在继承父类时,是不会触发父类的构造函数执行,而这里是父类是在继承时执行的。
第二个阶段
function A(){ 
this.Astr = 'hello A'; 
} 
A.prototype = { 
funA:function(){ 
alert(this.Astr); 
} 
}; 
function B(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
this.Bstr = 'hello B'; 
} 
B.prototype = { 
funB:function(){ 
alert(this.Bstr); 
} 
}; 
function C(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
alert(this.Astr); 
alert(this.Bstr); 
} 
function extend(sub,parent){ 
var subproto = sub.prototype; 
sub.prototype = parent.prototype; 
typeof subproto != 'object' && (subproto = {}); 
typeof sub.prototype != 'object' && (sub.prototype = {}); 
for(var i in subproto){ 
sub.prototype[i] = subproto[i]; 
} 
sub.superclass = parent; 
} 
//B 继承 A 
extend(B,A); 
//C 继承 B 
extend(C,B); 
var c = new C(); // out 'hello A','hello B' 
c.funA(); //out 'hello A' 
c.funB(); // out 'hello B' 
alert(c instanceof A) // out true 
alert(c instanceof B) // out true;

这里对extend方法做了一些改动,这里有个约定,每个子类都拥有一个superclass的属性,用来引用她所继承的父类,用一个空函数proto来获得父类的prototype,实例化给子类的prototype,这样就没有执行父类构造器。
而是在子类的构造器中用下来一段代码来执行约定要的父类构造器。
arguments.callee.superclass && arguments.callee.superclass.apply(this,argumengs);

这样就完成了类的继承。
对于上面的代码有没有更方便的继承写法呢,修改Function的原型来看看:
Function.prototype.extend = function(parent){ 
var subproto = this.prototype; 
this.prototype = parent.prototype; 
typeof subproto != 'object' && (subproto = {}); 
typeof this.prototype != 'object' && (this.prototype = {}); 
for(var i in subproto){ 
this.prototype[i] = subproto[i]; 
} 
this.superclass = parent; 
return this; 
} 
function A(){ 
this.Astr = 'hello A'; 
} 
A.prototype = { 
funA:function(){ 
alert(this.Astr); 
} 
}; 
var B = function(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
this.Bstr = 'hello B'; 
} 
B.prototype = { 
funB:function(){ 
alert(this.Astr); 
} 
}; 
B.extend(A); 
var C = function(){ 
arguments.callee.superclass && arguments.callee.superclass.apply(this,arguments); 
alert(this.Astr); 
alert(this.Bstr); 
}.extend(B); 
var c = new C(); // out 'hello A','hello B' 
c.funA(); //out 'hello A' 
c.funB(); // out 'hello B' 
alert(c instanceof A) // out true 
alert(c instanceof B) // out true;

这里的extend做的事情是: subproto引用子类的原prototype ,将子类的prototype 指向 父类的prototype对象,这样就继承了父类(这样的目的是让 子类实例 instanceof 父类 为 true)。然后历遍subproto,将原prototype的成员添加到现prototype上,这样子类重名的重名的成员就会覆盖父类的成员。最后将子类的属性superclass 指向 父类。
js继承的关键就是保持原型链的唯一性,instanceof就以判断实例的__proto__是否和父类的prototype为同一Object.

作者 cnblogs OD

Javascript 相关文章推荐
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
js 链式延迟执行DOME
Jan 04 #Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 #Javascript
Textarea与懒惰渲染实现代码
Jan 04 #Javascript
js中有关IE版本检测
Jan 04 #Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 #Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 #Javascript
js变量以及其作用域详解
Jul 18 #Javascript
You might like
生成缩略图
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
详解JavaScript函数
2015/12/01 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
js实现简单的倒计时
2021/01/28 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
业务助理岗位职责
2013/11/18 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电