基于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中size()方法用法实例
Dec 27 Javascript
DOM 高级编程
May 06 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
JavaScript中的类型检查
Feb 03 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
JS typeof fn === 'function' && fn()详解
2020/08/22 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python实现随机漫步方法和原理
2019/06/10 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python模拟斗地主发牌
2020/04/22 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
干部行政关系介绍信
2014/01/17 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
顶岗实习协议书
2015/01/29 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers