JavaScript 继承使用分析


Posted in Javascript onMay 12, 2011

深入学习javascript继承之前,先了解下面的几个概念:
父类:被继承的类
子类:由继承得来的类
超类:也就是父类
抽象类:一般不用来实例化的类,它的用途是用来给其他类继承.
基类:提供给其他类可以继承的类
派生类:由基类继承而来的类

javascript对象继承通常有下面的5种方式:
1.对象冒充
2.call()方式
3.apply()方式
4.原型链
5.混合方式

A.对象冒充
所谓对象冒充,就是新的类冒充旧的类(旧的类必须采用构造函数方式),从而达到继承目的.
eg.1

function people(name,sex,age){ //使用构造函数方式 
this.name=name; 
this.sex=sex; 
this.age=age; 
this.say=function(){ 
alert("My name is "+this.name); 
}; this.doing=function(){ 
alert("I am speaking"); 
}; 
} 
var Marry=new people("Marry","Woman","23"); 
Marry.say(); 
Marry.doing(); 
function white_people(name,sex,age){ 
this.inherit=people; 
this.inherit(name,sex,age); 
delete this.inherit; 
this.area=function(){ 
alert("I am in Europe"); 
} 
} 
var Tom=new white_people("Tom","man","21"); 
Tom.say(); 
Tom.area(); 
alert(Tom.age);

上面的例子中,people是用来做white_people的基类,记住这个格式是用来对象冒充达到继承目的的
this.inherit=people; //冒充
this.inherit(name,sex,age); //继承
delete this.inherit; //删除继承
所有新属性和新方法都必须再删除了继承后定义,这样是为了避免覆盖父类的相关属性和方法.
另外,对象冒充支持多继承.
eg.2
function worker(pay,work){ 
this.pay=pay; 
this.work=work; 
} 
function city_worker(name,sex,age,pay,work){ 
this.inherit=people; 
this.inherit(name,sex,age); 
delete this.inherit; this.inherit=worker; 
this.inherit(pay,work); 
delete this.inherit; 
} 
var Jerry=new city_worker("Jerry","man","21","$1000","coder"); 
Jerry.say(); 
alert(Jerry.work);

对象冒充有一个不足的地方:多继承机制实现时,如果基类存在相同的属性或者方法,将从后面的类继承.

B.call()方式
只是封装的对象冒充的一个函数.这样,我们不再需要写"经典"的三句话,而是用下面这句话代替:
基类.call(对象,参数列表)
eg.1

function farmer(name,sex,age,pay,work){ 
people.call(this,name,sex,age); 
worker.call(this,pay,work); 
} var Nicholas=new farmer("Nicholas","man","27","$3000","irrigator"); 
Nicholas.say(); 
alert(Nicholas.pay);

同样,call()存在同名属性和方法的小问题.

C.apply()方式
和call()一样.apply()也是对象冒充的一个封装函数.其格式为:
基类.apply(对象,参数数组);
eg.1

function white_collar(name,sex,age,pay,work){ 
people.apply(this,new Array(name,sex,age)); 
worker.apply(this,[pay,work]); 
} var Jiessie=new white_collar("Jiessie","woman","26","$2500","editor"); 
Jiessie.say(); 
alert(Jiessie.work);

同样,apply()存在同名属性和方法的小问题.

D.原型链
上面三种方式都是采用构造函数方式的继承,对应地,也具有原型函数方式的继承:原型链.
eg.1

function blue_collar(){ 
} 
blue_collar.prototype.name="Jean"; 
blue_collar.prototype.age="33"; 
blue_collar.prototype.say=function(){ 
alert("my name is "+ this.name); 
}; function city_blue_collar(){ 
} 
city_blue_collar.prototype=new blue_collar(); 
var jj=new city_blue_collar; 
jj.say();

原型链也具有了原型链的缺点:不能传递参数.另外,原型链不支持多继承,因为

E.混合方式
使用构造函数方式来写类的属性,对属性的继承采用call()或者apply()
使用原型方式来写的方法,对方法的继承采用原型链
eg.1

function beauty(name,age){ 
this.name=name; 
this.age=age; 
} 
beauty.prototype.say=function(){ 
alert("小女叫"+this.name); 
}; function china_beauty(name,age,area){ 
beauty.call(this,name,age); 
this.area=area; 
} 
china_beauty.prototype=new beauty(); 
china_beauty.prototype.from=function(){ 
alert("我来自"+this.area); 
}; 
var diaochan=new china_beauty("貂禅","16","临洮"); 
diaochan.say(); 
diaochan.from(); 
alert(diaochan.age);
Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
微信小程序合法域名配置方法
May 06 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JS焦点图切换,上下翻转
May 12 #Javascript
js 中{},[]中括号,大括号使用详解
May 12 #Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 #Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 #Javascript
Jqyery中同等与js中windows.onload的应用
May 10 #Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 #Javascript
JavaScript中为元素加上name属性的方法
May 09 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python使用剪切板的方法
2017/06/06 Python
python读取Excel表格文件的方法
2019/09/02 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
如何实现jdbc性能优化
2012/07/30 面试题
你懂得怎么写自荐信吗?
2013/12/27 职场文书
军训拉歌口号
2014/06/13 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
合理化建议书范文
2015/09/14 职场文书
如何撰写创业策划书
2019/06/27 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript