基于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实现键盘方向键翻页功能的代码
Jun 03 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
微信小程序实现日历功能
Nov 27 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
js利用iframe实现选项卡效果
Aug 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无敌近乎加密方式!
2010/07/17 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
express express-session的使用小结
2018/12/12 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
讲解Python中的递归函数
2015/04/27 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python处理excel绘制雷达图
2019/10/18 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python新手如何理解循环加载模块
2020/05/29 Python
如何卸载python插件
2020/07/08 Python
大学本科毕业生求职信范文
2013/12/18 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
学习演讲稿范文
2014/05/10 职场文书
安全横幅标语
2014/06/09 职场文书
综治工作心得体会
2014/09/11 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Python实现简单得递归下降Parser
2022/05/02 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android