基于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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
vue 登录滑动验证实现代码
Aug 24 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
解析js如何获取css样式
2016/12/11 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
深入理解Python中的super()方法
2017/11/20 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
元旦晚会邀请函
2014/02/01 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书