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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
Vue 实现html中根据类型显示内容
Oct 28 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python书单 不将就
2017/07/11 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
求职信的七个关键技巧
2014/02/05 职场文书
万年牢教学反思
2014/02/15 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
乔迁之喜主持词
2014/03/27 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
九九重阳节致辞
2015/07/31 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
python热力图实现的完整实例
2022/06/25 Python
基于Python实现nc批量转tif格式
2022/08/14 Python