基于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 Ajax 实例全解析
Apr 20 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
vue实现简单加法计算器
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
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP发送短信代码分享
2015/08/11 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
javascript this详细介绍
2016/09/19 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
python绘制条形图方法代码详解
2017/12/19 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
中学教师岗位职责
2013/11/26 职场文书
献爱心倡议书
2014/04/14 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
小学数学新课改心得体会
2016/01/22 职场文书