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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
深入理解javascript变量声明
Nov 20 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
JS重载实现方法分析
Dec 16 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 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语法(5)
2006/10/09 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python自动格式化json文件的方法
2015/03/11 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
django基础学习之send_mail功能
2019/08/07 Python
Python for循环与getitem的关系详解
2020/01/02 Python
大学生自我鉴定范文
2013/12/28 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
《狼》教学反思
2014/03/02 职场文书
市场营销战略计划书
2014/05/06 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏