javascript 继承实现方法


Posted in Javascript onAugust 26, 2009

下面我给出几种常用的方法:
1 .对象冒充
原理: 构造函数使用this关键字给所有属性和方法赋值, 因为构造函数只是一个函数,所以可以使ClassA的构造函数成为classB的方法,然后调用它.这样classB就会收到classA的构造函数中定义的属性和方法.例子:

function classA(name) 
{ 
this.name=name; 
this.showName=function(){alert(this.name);} 
} 
function classB(name) 
{ 
this.newMethod = classA; 
this.newMethod(name); 
} 
obj = new classA("hero"); 
objB = new classB("dby"); 
obj.showName(); // print hero 
objB.showName(); // print dby 说明classB 继承了classA的方法.

对象冒充可以实现多重继承 例如
function classz(){ 
this.newMethod = classX; 
this.newMethod(); 
delete this.newMethod; 
this.newMethod=classY; 
this.newMethod(): 
delete this.newMethod; 
}

但是如果classX和classY有相同的属性或者方法,classY具有高优先级.
2.call()方法
call方法使与经典的对象冒充法就相近的方法,它的第一个参数用作this的对象,其他参数都直接传递给函数自身.
function sayName(perfix) 
{ 
alert(perfix+this.name); 
} 
obj= new Object(); 
obj.name="hero"; 
sayName.call(obj,"hello," ); 
function classA(name) 
{ 
this.name=name; 
this.showName=function(){alert(this.name);}; 
} 
function classB(name) 
{ 
classA.call(this,name); 
} 
objB = new classB("bing"); 
objB.showName();////说明classB继承classA的showName方法

3.apply()方法
aplly()方法有2个参数,一个用作this对象,一个使传递给函数的参数数组.
function sayName(perfix) 
{ 
alert(perfix+this.name); 
} 
obj= new Object(); 
obj.name="hero"; 
sayName.aplly(obj,new Array("hello,") );

4. 原型链
prototype对象的任何属性和方法都会被传递给对应类的所有实例,原型链就是用这种方式来显现继承.
function classA (){} 
classA.prototype.name="hero"; 
classA.prototype.showName=function(){alert(this.name)} 
function classB(){} 
classB.prototype=new classA(); 
objb = new classB() 
objb.showName();//print hero 说明b继承了a的方法

这里需要注意 调用classA的构造函数时,没有给它传递参数,这是原型链的标准做法,确保函数的构造函数没有任何参数.
并且 子类的所有属性和方法,必须出现在prototype属性被赋值后,应为在它之前赋的值会被删除.因为对象的prototype属性被替换成了新对象,添加了新方法的原始对象将被销毁.

5 混和方式
就是用冒充方式 定义构造函数属性,用原型法定义对象方法.

function classA(name) 
{ 
this.name=name; 
} 
classA.prototype.showName=function(){alert(this.name)} 
function classB(name) 
{ 
classA.call(this,name); 
} 
classB.prototype = new classA(); 
classB.prototype.showName1=function(){alert(this.name+"*****");}; 
obj = new classB("hero"); 
obj.showName(); 
obj.showName1();

在classB的构造函数中通过调用call方法 继承classA中的name属性,用原型链来继承classA的showName方法.
Javascript 相关文章推荐
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
浅谈javascript的分号的使用
May 12 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
vuex的简单使用教程
Feb 02 Javascript
详解JS数值Number类型
Feb 07 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 #Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 #Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 #Javascript
jquery 表单进行客户端验证demo
Aug 24 #Javascript
JS 时间显示效果代码
Aug 23 #Javascript
JQuery this 和 $(this) 的区别
Aug 23 #Javascript
ext checkboxgroup 回填数据解决
Aug 21 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
浅析Python __name__ 是什么
2020/07/07 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
python Timer 类使用介绍
2020/12/28 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
小学班主任评语大全
2014/04/23 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
九年级化学教学反思
2016/02/22 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers