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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 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处理整数函数的详解
2013/06/09 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
传智播客学习之java 反射
2009/11/22 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
初始Nodejs
2014/11/08 NodeJs
浅谈javascript中基本包装类型
2015/06/03 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python中sys模块是做什么用的
2020/08/16 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
职工运动会邀请函
2014/01/19 职场文书
阳光体育活动方案
2014/02/16 职场文书
2014年端午节活动方案
2014/03/11 职场文书
保护环境演讲稿
2014/05/10 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
2016党员党课心得体会
2016/01/07 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书