基于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 相关文章推荐
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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 curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python如何读写json数据
2018/03/21 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Python日期时间Time模块实例详解
2019/04/15 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
基于python实现复制文件并重命名
2020/09/16 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
怎么写有吸引力的自荐信
2013/11/17 职场文书
青蓝工程实施方案
2014/03/27 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
新文化运动的基本口号
2014/06/21 职场文书
优秀教师推荐材料
2014/12/16 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server