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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP学习 变量使用总结
2011/03/24 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Javascript 继承实现例子
2009/08/12 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
python 中if else 语句的作用及示例代码
2018/03/05 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python__name__原理及用法详解
2019/11/02 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
自荐信不宜过于夸大
2013/11/06 职场文书
写给老师的表扬信
2014/01/21 职场文书
党风廉设责任书
2014/04/16 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
单位未婚证明范本
2014/11/25 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
离婚民事起诉状
2015/08/03 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang