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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
Python函数学习笔记
2008/10/07 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
Final类有什么特点
2012/04/25 面试题
送货司机岗位职责
2013/12/11 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
课程设计感想范文
2015/08/11 职场文书
文明礼貌主题班会
2015/08/14 职场文书
如何在Python项目中引入日志
2021/05/31 Python