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中return false(阻止)的用法
Aug 14 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
jquery选择器使用详解
Apr 08 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
js表数据排序 sort table data
2009/02/18 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python学习之面向对象【入门初级篇】
2017/01/21 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
详解Python中的分支和循环结构
2020/02/11 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
捐款倡议书怎么写
2014/05/13 职场文书
高中班级口号
2014/06/09 职场文书
小学老师对学生的评语
2014/12/29 职场文书