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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
js实现表格字段排序
Feb 19 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
函数式编程入门实践(一)
Apr 20 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.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
如何使用php输出时间格式
2013/08/31 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
Java程序员综合测试题
2014/04/25 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
给医务人员表扬信
2014/01/12 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
党性分析自查总结
2014/10/14 职场文书
刑事起诉书范文
2015/05/19 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python