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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP实现网上点歌(二)
2006/10/09 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
phalcon框架使用指南
2016/02/23 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
linux下安装easy_install的方法
2013/02/10 Python
Python中optparse模块使用浅析
2015/01/01 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python按钮的响应事件详解
2019/03/04 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
大学生职业生涯规划书模板
2014/01/03 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
创先争优标语
2014/06/27 职场文书
校本教研活动总结
2014/07/01 职场文书
个人四风对照检查材料
2014/09/26 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
对公司的意见和建议
2015/06/04 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书