基于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 相关文章推荐
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
js使用ajax读博客rss示例
May 06 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
基于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
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python中base64加密解密方法实例分析
2015/05/16 Python
对python生成业务报表的实例详解
2019/02/03 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python正则表达式如何匹配中文
2020/05/27 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
见习期自我鉴定
2014/01/31 职场文书
六五普法规划实施方案
2014/03/21 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
深入浅析Django MTV模式
2021/09/04 Python