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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
fastadmin中调用js的方法
May 14 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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
PHP4中session登录页面的应用
2008/07/25 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python datetime包函数简单介绍
2019/08/28 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
销售辞职信范文
2015/03/02 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
python如何读取.mtx文件
2021/04/22 Python
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python