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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP开发负载均衡指南
2010/07/17 PHP
drupal 代码实现URL重写
2011/05/04 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
JSON取值前判断
2014/12/23 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
详解python程序中的多任务
2020/09/16 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
护士求职自荐信范文
2014/03/19 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
Mysql数据库group by原理详解
2022/07/07 MySQL