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 相关文章推荐
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信小程序搭建自己的Https服务器
May 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
简单了解python数组的基本操作
2019/11/26 Python
python中p-value的实现方式
2019/12/16 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
公关关系专员的自我评价分享
2013/11/20 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
公司租房协议书
2014/10/14 职场文书
男方婚礼答谢词
2015/01/20 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python