基于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实例分享---具有立体效果的图片特效
Jun 08 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
详解Vue方法与事件
Mar 09 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
Array.filter中如何正确使用Async
Nov 04 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
Smarty变量用法详解
2016/05/11 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
JS编程小常识很有用
2012/11/26 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
js实现查询商品案例
2020/07/22 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python中文件遍历的两种方法
2014/06/16 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
土木工程专业个人求职信
2013/12/05 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers