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 hasFocus使用实例
Jun 29 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
Angular实现svg和png图片下载实现
May 05 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
动手学习无线电
2021/03/10 无线电
js修改原型的属性使用介绍
2014/01/26 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue实现购物车案例
2020/05/30 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python中的类学习笔记
2014/09/23 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
中等生评语大全
2014/05/04 职场文书
公司会议策划方案
2014/05/17 职场文书
小学生通知书评语
2014/12/31 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle
Python中的socket网络模块介绍
2022/07/23 Python