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 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
原生js+css实现tab切换功能
Sep 17 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
详解python中的json和字典dict
2018/06/22 Python
基于python绘制科赫雪花
2018/06/22 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
django框架auth模块用法实例详解
2019/12/10 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
Delphi笔试题
2016/11/14 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
投标邀请书范文
2014/01/31 职场文书
大学生先进事迹材料
2014/02/16 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
中职招生先进个人材料
2014/08/31 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
介绍信范文大全
2015/05/07 职场文书
Python jiaba库的使用详解
2021/11/23 Python
MySQL中order by的执行过程
2022/06/05 MySQL