基于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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
js三种排序算法分享
Aug 16 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
微信小程序实现文件预览
Oct 22 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
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
电子商务应届生求职信
2013/11/16 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
农村婚礼证婚词
2014/01/08 职场文书
服务质量承诺书
2014/03/27 职场文书
团队拓展活动总结
2014/08/27 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
生死抉择观后感
2015/06/09 职场文书