基于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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
js仿360开机效果
2019/12/26 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
django使用html模板减少代码代码解析
2017/12/12 Python
django query模块
2019/04/20 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
跳槽求职信范文
2014/05/26 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
教代会开幕词
2015/01/28 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers