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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
javascript运行机制之执行顺序理解
Aug 03 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
php函数的常用方法及注意之处小结
2011/07/10 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
php生出随机字符串
2017/07/06 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
如何基于线程池提升request模块效率
2020/04/18 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Keras loss函数剖析
2020/07/06 Python
小结Python的反射机制
2020/09/28 Python
民生工作实施方案
2014/05/31 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
学校就业保障协议书
2019/06/24 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL