基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解


Posted in Javascript onMay 07, 2013

继承的方式

ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。最原始的继承实现方式就是对象冒充,下面着重介绍该方法。

对象冒充

对象冒充实现继承的核心其实依赖于在函数环境中使用 this 关键字。其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使 ClassA 构造函数成为 ClassB 的方法,然后调用它。ClassB 就会收到 ClassA 的构造函数中定义的属性和方法。例如,用下面的方式定义 ClassA 和 ClassB:

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}
function ClassB(sColor) {
}

关键字 this 引用的是构造函数当前创建的对象。不过在这个方法中,this 指向的所属的对象。这个原理是把 ClassA 作为常规函数来建立继承机制,而不是作为构造函数。如下使用构造函数 ClassB 可以实现继承机制:
function ClassB(sColor) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
}

在这段代码中,为 ClassA 赋予了方法 newMethod(请记住,函数名只是指向它的指针)。然后调用该方法,传递给它的是 ClassB 构造函数的参数 sColor。最后一行代码删除了对 ClassA 的引用,这样以后就不能再调用它。

所有新属性和新方法都必须在删除了新方法的代码行后定义。否则,可能会覆盖超类的相关属性和方法:

function ClassB(sColor, sName) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

为证明前面的代码有效,可以运行下面的例子:
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();    //输出 "blue"
objB.sayColor();    //输出 "red"
objB.sayName();        //输出 "John"

对象冒充可以实现多重继承

有趣的是,对象冒充可以支持多重继承。例如,如果存在两个类 ClassX 和 ClassY,ClassZ 想继承这两个类,可以使用下面的代码:
function ClassZ() {
    this.newMethod = ClassX;
    this.newMethod();
    delete this.newMethod;
    this.newMethod = ClassY;
    this.newMethod();
    delete this.newMethod;
}

这里存在一个弊端,如果存在两个类 ClassX 和 ClassY 具有同名的属性或方法,ClassY 具有高优先级。因为它从后面的类继承。除这点小问题之外,用对象冒充实现多重继承机制轻而易举。

由于这种继承方法的流行,ECMAScript 的第三版为 Function 对象加入了两个方法,即 call() 和 apply()。后来很多衍生出来的实现继承的方法其实也是基于call() 和 apply()来实现的。

Javascript 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
Javascript 中的 && 和 || 使用小结
Apr 25 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 #Javascript
JS中的substring和substr函数的区别说明
May 07 #Javascript
js图片自动切换效果处理代码
May 07 #Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 #Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 #Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 #Javascript
基于JavaScript 类的使用详解
May 07 #Javascript
You might like
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP 输出缓存详解
2009/06/20 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
提高网站信任度的技巧
2008/10/17 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
python实现Floyd算法
2018/01/03 Python
python把转列表为集合的方法
2019/06/28 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
汇科协同Java笔试题
2012/03/31 面试题
运动会入场解说词300字
2014/01/25 职场文书
大学毕业感言200字
2014/03/09 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2015高考寄语集锦
2015/02/27 职场文书
资料员岗位职责范本
2015/04/13 职场文书
冰雪公主观后感
2015/06/16 职场文书
银行工作心得体会范文
2016/01/23 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
MySQL表的增删改查基础教程
2021/04/07 MySQL