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的表格排序
Sep 11 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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 MYSQL 数据备份类
2009/06/19 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
JavaScript中的其他对象
2008/01/16 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
javascript 常用功能总结
2012/03/18 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
python语言使用技巧分享
2016/05/31 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python如何生成网页验证码
2018/07/28 Python
python实现推箱子游戏
2020/03/25 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Django如何重置migration的几种情景
2021/02/24 Python
Ajax的优点和缺点
2014/11/21 面试题
UNIX文件系统常用命令
2012/05/25 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
运动会广播稿200米
2014/01/27 职场文书
中式婚礼主持词
2014/03/13 职场文书
社区交通安全实施方案
2014/03/22 职场文书
工作说明书格式
2014/07/29 职场文书
妇女工作先进事迹
2014/08/17 职场文书
给校长的一封检讨书
2014/09/20 职场文书
保证书格式
2015/01/16 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2015入党自传书范文
2015/06/26 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python