基于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 15 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
js Date概念详细介绍
Nov 22 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
js html实现计算器功能
Nov 13 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 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中文件上传的安全问题
2006/10/09 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
详解JavaScript函数
2015/12/01 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python实现文件复制删除
2016/04/19 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
大学老师推荐信
2014/02/25 职场文书
合作投资意向书
2014/04/01 职场文书
大学校园招聘会感想
2015/08/10 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript