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 EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
javascript闭包入门示例
Apr 30 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
Ionic快速安装教程
2016/06/03 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python PIL模块的基本使用
2020/09/29 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
年度考核评语
2014/01/19 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
主管竞聘书范文
2014/03/31 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
我的1919观后感
2015/06/03 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书