基于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 使用手册(三)
Sep 23 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
解决Vue router-link绑定事件不生效的问题
Jul 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python实现对变位词的判断方法
2020/04/05 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
实习教师自我鉴定
2013/12/12 职场文书
完美的中文自荐信
2014/05/24 职场文书
暑期学习心得体会
2014/09/02 职场文书
企业挂职心得体会
2014/09/10 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
信访工作汇报材料
2014/10/27 职场文书
《假如》教学反思
2016/02/17 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers