基于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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
Javascript 中的 && 和 || 使用小结
Apr 25 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
domReady的实现案例
Nov 23 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
javascript 写类方式之十
2009/07/05 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
一看就懂得Python的math模块
2018/10/21 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
python Shapely使用指南详解
2020/02/18 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
工程项目建议书范文
2014/03/12 职场文书
市场总经理岗位职责
2014/04/11 职场文书
医药销售自我评价200字
2014/09/11 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
学校学期工作总结
2015/08/13 职场文书