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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
JS重载实现方法分析
Dec 16 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python生成二维码的实例详解
2017/10/29 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
优良学风班申请材料
2014/02/13 职场文书
公司接待方案
2014/03/08 职场文书
财务部总监岗位职责
2014/03/12 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
员工手册编写范本
2015/05/14 职场文书
教师节联欢会主持词
2015/07/04 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Java Redisson多策略注解限流
2022/09/23 Java/Android