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实现的listview效果
Apr 28 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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按百分比生成缩略图的代码分享
2014/05/10 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
20招让你的Python飞起来!
2016/09/27 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
What is view? why do we have view?
2012/06/22 面试题
《我为你骄傲》教学反思
2014/02/20 职场文书
正科级干部考察材料
2014/05/29 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android