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 替换Html标签实现代码
Oct 14 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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如何实现验证码
2016/01/20 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
详解Vue之事件处理
2020/07/10 Javascript
python游戏开发之视频转彩色字符动画
2019/04/26 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python sorted函数的小练习及解答
2019/09/18 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
任课老师推荐信范文
2013/11/24 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
真诚的求职信
2014/07/04 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
工作后的感想
2015/08/07 职场文书
教师教育教学随笔
2015/08/15 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电