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 相关文章推荐
jQuery-ui中自动完成实现方法
Jun 10 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
js的三种继承方式详解
Jan 21 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
Angular网络请求的封装方法
May 22 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 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
基于mysql的bbs设计(四)
2006/10/09 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Python 中Operator模块的使用
2021/01/30 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
《草虫的村落》教学反思
2014/02/16 职场文书
村党建工作汇报材料
2014/11/02 职场文书
小学中队活动总结
2015/05/11 职场文书