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中面向对象技术的模拟
Sep 25 Javascript
10个实用的脚本代码工具
May 04 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
Javascript动画效果(1)
Oct 11 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
vue-cli3 配置开发与测试环境详解
May 17 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python静态方法实例
2015/01/14 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python开根号实例讲解
2020/08/30 Python
python制作微博图片爬取工具
2021/01/16 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
帮一个朋友写的求职信
2014/08/09 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
团队会宣传标语
2014/10/09 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android