JavaScript模拟实现继承的方法


Posted in Javascript onMarch 30, 2015

本文实例讲述了JavaScript模拟实现继承的方法。分享给大家供大家参考。具体分析如下:

我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。

先定义一个父类,

//父类
function ParentClass() {
 this.className = "ParentClass";
 this.auth = "Auth";
 this.version = "V1.0";
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

一、prototype 实现:

//子类
//1、prototype继承
function ChildClassByPrototype() {
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByPrototype.prototype = new ParentClass();
var cctest1 = new ChildClassByPrototype();
cctest1.parentClassInfo();
cctest1.classInfo();

这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的 cctest1.parentClassInfo() 方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。

二、apply 实现:

//2、apply继承
function ChildClassByApply() {
 ParentClass.apply(this, new Array());
 //ParentClass.apply(this, []);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}

JavaScript中的apply可以理解为用A方法替换B方法,第一个参数为B方法的对象本身,第二个参数为一个数组,该数组内的值为需要传递给A方法对应的参数列表,如果参数为空,即没有参数传递,可通过 new Array()、[] 来传递。

三、call + prototype 实现:

//3、call+prototype继承
function ChildClassByCall() {
 ParentClass.call(this, arguments);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

call和apply作用类似,即都是用A方法替换B方法,只是传递的参数不一样,call方法的第一个参数为B方法的对象本身,后续的参数则不用Array包装,需直接依次进行传递。既然作用差不多,为何多了一句 原型赋值呢?这是因为call方法只实现了方法的替换而没有对对象属性进行复制操作。

每种方法都有其适用环境,比如,如果父类带有有参构造函数:

function ParentClass(className, auth, version) {
 this.className = className;
 this.auth = auth;
 this.version = version;
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

这种情况下,prototype就不适用了,可选用apply或call;

function ChildClassByApply(className, auth, version) {
 ParentClass.apply(this, [className, auth, version]);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
function ChildClassByCall(className, auth, version) {
 ParentClass.call(this, arguments[0], arguments[1], arguments[2]);
 //ParentClass.call(this, className, auth, version);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

实例化:

var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

在apply和call中,又该如何取舍呢?在OO的继承中,子类继承于父类,那么它应该也是父类的类型。即,ChildClassByCall、ChildClassByApply应该也是ParentClass类型,但我们用"instanceof"检测一下就会发现,通过apply继承的子类,并非ParentClass类型。所以,我们建议用call + prototype 来模拟实现继承。据说,Google Map API 的继承就是使用这种方式哟。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 #Javascript
JS实现向表格中动态添加行的方法
Mar 30 #Javascript
JS实现向表格行添加新单元格的方法
Mar 30 #Javascript
JS实现控制表格行文本对齐的方法
Mar 30 #Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 #Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 #Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 #Javascript
You might like
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python实现翻译word表格小程序
2020/02/27 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
事业单位竞聘上岗实施方案
2014/03/28 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
销售个人求职信范文
2014/04/28 职场文书
个人汇报材料范文
2014/12/30 职场文书
限期整改通知书
2015/04/22 职场文书