基于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实现 在光标处插入指定内容
May 25 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
理解javascript中的严格模式
Feb 01 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
Angular模板表单校验方法详解
2017/08/11 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
python提取内容关键词的方法
2015/03/16 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python中eval与int的区别浅析
2019/08/11 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
django rest framework 自定义返回方式
2020/07/12 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
交通安全演讲稿
2014/01/07 职场文书
模具数控专业自荐信
2014/01/27 职场文书
艺术教育实施方案
2014/05/03 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python