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 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
js导出txt示例代码
Jan 14 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
windows下python和pip安装教程
2018/05/25 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python安装pil库方法及代码
2019/06/25 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Python是怎样处理json模块的
2020/07/16 Python
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
五一家具促销方案
2014/01/10 职场文书
高级编程求职信模板
2014/02/16 职场文书
座谈会主持词
2014/03/20 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python实现大文本文件分割成多个小文件
2021/04/20 Python