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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
vue.js的安装方法
May 12 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
高一地理教学反思
2014/01/18 职场文书
转正申请报告格式
2015/05/15 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
Go 内联优化让程序员爱不释手
2022/06/21 Golang
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android