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 读取xml,写入xml 实现代码
Jul 10 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
AngularJS语法详解
2015/01/23 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
用Python实现KNN分类算法
2017/12/22 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Anaconda入门使用总结
2018/04/05 Python
python定时关机小脚本
2018/06/20 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python unittest框架操作实例解析
2020/04/13 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
高中自我鉴定范文
2013/11/03 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
园艺师求职信
2014/03/10 职场文书
环境科学专业求职信
2014/08/04 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers