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与其它库冲突的解决方法
Jun 25 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
大学迎新晚会主持词
2014/03/24 职场文书
应届大专生自荐书
2014/06/16 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers