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 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js Date概念详细介绍
Nov 22 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 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教程 变量定义
2009/10/23 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
替换python字典中的key值方法
2018/07/06 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
使用K.function()调试keras操作
2020/06/17 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
财务会计应届生求职信
2013/11/24 职场文书
影视广告专业求职信
2014/09/02 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
Django与数据库交互的实现
2021/06/03 Python
用python修改excel表某一列内容的操作方法
2021/06/11 Python