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 相关文章推荐
json简单介绍
Jun 10 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
详解Golang 与python中的字符串反转
2017/07/21 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
浅谈python迭代器
2017/11/08 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
python抽取指定url页面的title方法
2018/05/11 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
低碳环保倡议书
2014/04/14 职场文书
总经理人事任命书
2014/06/05 职场文书
数学教育专业求职信
2014/07/22 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Anaconda配置各版本Pytorch的实现
2021/08/07 Python