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的相对父元素和相对文档定位示例代码
Aug 02 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
JavaScript实现区块链
Mar 14 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
微信小程序与webview交互实现支付功能
Jun 07 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
php上传图片类及用法示例
2016/05/11 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
javascript 写类方式之一
2009/07/05 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
python flask中静态文件的管理方法
2018/03/20 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python实现简单图片物体标注工具
2019/03/18 Python
python取余运算符知识点详解
2019/06/27 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
CSS3盒子模型详解
2013/04/24 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
海上钢琴师观后感
2015/06/03 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js