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中直接引用Microsoft的COM生成Word
Jan 20 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
Java无向树分析 实现最小高度树
Apr 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
PHP数字格式化
2006/12/06 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
初始Nodejs
2014/11/08 NodeJs
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python Process多进程实现过程
2019/10/22 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
小学信息技术教学反思
2014/02/10 职场文书
优质服务口号
2014/06/11 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
培根随笔读书笔记
2015/07/01 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
Java字符串逆序方法详情
2022/03/21 Java/Android
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python