作家
登录

JavaScript 继承使用分析

作者: 来源:www.28hudong.com 2013-03-30 00:53:09 阅读 我要评论

深入学习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);

  推荐阅读

  基于jQuery的倒计时插件代码

剩余时间:1小时:40分:30秒 复制代码 代码如下: 1 /* * 倒计时插件,主要用来限时购买 * By wayshan 版本1.0 * 使用方法: * $(function(){ * $("#ElementId").countdown({ * Edate:"2012-12-21 15:14:23" * });>>>详细阅读


本文标题:JavaScript 继承使用分析

地址:http://www.17bianji.com/kaifa2/JS/24596.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)