基于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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
layui use 定义js外部引用函数的方法
Sep 26 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python去掉字符串中空格的方法
2014/03/11 Python
Python3基础之基本数据类型概述
2014/08/13 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python实现抖音视频批量下载
2018/06/20 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
军训感想500字
2014/02/20 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
保安辞职信范文
2015/02/28 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL