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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
javascript变量声明实例分析
Apr 25 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
vue发送ajax请求详解
Oct 09 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 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无敌近乎加密方式!
2010/07/17 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
React SSR样式及SEO的实践
2018/10/22 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
python获取代码运行时间的实例代码
2018/06/11 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
详解Python time库的使用
2019/10/10 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书