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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 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的FTP学习(二)
2006/10/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php实现多城市切换特效
2015/08/09 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python 装饰器使用详解
2017/07/29 Python
Python实现简单的语音识别系统
2017/12/13 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python Django的web开发实例(入门)
2019/07/31 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
.net开发工程师面试题
2014/02/25 面试题
应届生人事助理求职信
2013/11/09 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
机房搬迁方案
2014/05/01 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2014年党总支工作总结
2014/12/18 职场文书
龙猫观后感
2015/06/09 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL