概要

  JS虽然没有直接有面向对象的特性,但还是能prototype为了模拟面向对象的特性,如继承和多态。而大多数面向对象的语言(例如C++。Java等一下)相比,JS为了实现面向对象还是有点繁琐,抽象。需要对JS的prototype模式有深刻的理解。
  在开发过程中,有时候会遇到这样一个问题:假设在子类中“覆盖”了超类的某个方法,但仍须要在子类方法中调用一次超类方法,这时候应该怎么做?假设是Java,一个简单的superkeyword就可以解决这个问题,但假设是JS呢?
  解决这个问题的最基本方法能够是:在子类中,使用超类类型。通过applykeyword。以当前类实例引用运行一次超类方法。例如以下:


定义类A
// 定义类A
function A(a) {
this.a = a;
}
// 为类A定义show方法
A.prototype.show = function() {
alert("A: " + this.a);
};

定义类B并从A继承

// 定义类B
function B(a, b) {
// 调用A的构造函数
A.apply(this, arguments);
this.b = b;
}
// 链接A的原型
B.prototype = new A();


实例化类B对象并调用show方法
var b = new B(100, 200);
b.show();

  此时。会运行定义在A中的show方法(显示A.a的值)。表示类B已经从类A中继承了show方法


类B覆盖show方法
// 覆盖show方法
B.prototype.show = function() {
A.prototype.show.apply(this, arguments);
alert("B: " + this.b);
}; // 运行覆盖后的方法
b.show();

  在B的prototype中又一次定义show方法,即能够觉得B类覆盖了A类的show方法。

注意 A.prototype.show.apply(this, arguments) 这一句,实际上是利用了JS的原型特性。在B类对象中(以B类对象)运行了一次A类的show方法。

  JS特殊的动态语言特性使得“覆盖”这个语义能够随时发生。甚至能够通过操作prototype来取消”覆盖“语义,这也正是JS的灵活和强大之处。


更进一步

  通过上面的样例,能够发现,JS的”继承“,”覆盖“和”调用超类方法“尽管不难理解,但写起来仍较为繁琐,以下的代码能够简化这个流程。

(以下代码灵感部分来源于ExtJS库,部分參考自prototype库)


namespace
// 定义根命名空间
ALV = {}; // 定义注冊命名空间的方法
ALV.namespace = function(ns) {
var root = window;
var parts = ns.split(".");
for (var i = 0; i < parts.length; i++) {
var p = parts[i];
if (!root[p]) {
root[p] = {};
}
root = root[p];
}
};

合并对象的apply方法

// 合并对象成员
ALV.apply = function(obja, objb, def) {
if (def) {
ALV.apply(obja, def);
}
if (obja && objb && typeof objb === 'object') {
for (var o in objb) {
obja[o] = objb[o];
}
}
};

定义类的方法
// 原型定义
ALV.define = function(clazz, config) {
var parts = clazz.split(".");
var root = window;
for (var i = 0; i < parts.length - 1; i++) {
root = root[parts[i]];
}
var cn = parts[parts.length - 1];
if (!root[cn]) {
root[cn] = function() {};
}
clazz = root[cn];
// 将proto对象的成员赋值给类的原型
ALV.apply(clazz.prototype, config);
return clazz;
};

定义子类并继承超类的方法
// 定义继承的方法
ALV.extend = function(base, child, proto) {
// 将超类原型赋值给类的原型
var c = ALV.define(child);
if (base && typeof base === "function") {
c.prototype = new base();
}
if (proto && typeof proto == "object") {
ALV.apply(c.prototype, proto);
} // 调用超类方法
c.prototype.callParent = function(args) {
var m;
for (var o in this) {
if (this[o] === this.callParent.caller) {
m = o;
}
}
var method = base.prototype[m];
if (method && typeof method === "function") {
method.apply(this, args);
}
};
};

  上述代码中。子类的 prototype 链接到了超类对象上。完毕了 prototype 的继承。而 callParent 方法中,通过对当前类调用方法的查找,找到方法名(m变量),再在超类的 prototype 中找到同名方法,利用超类方法的 apply 操作,在子类对象上完毕对超类方法的调用。



測试代码
// 定义命名空间
ALV.namespace("Alvin.test");
// 定义超类
ALV.define("Alvin.test.A", {
a: 100,
show: function() {
alert("A: " + this.a);
}
});
// 定义子类
ALV.extend(Alvin.test.A, "Alvin.test.B", {
a: 100,
b: 200,
show: function() {
this.callParent(arguments);
alert("B: " + this.b);
}
});
// 实例化B类对象
var b = new Alvin.test.B();
b.show();
  从測试代码中能够看到,Alvin.test.B 类继承了 Alvin.test.A 类,且覆盖了当中的 show 方法。在 B 类的 show 方法中,this.callParent(arguments) 调用完毕了对 A 类show方法的调用。

这样 B 类就可以自然地访问超类方法没有在指定到底有什么关注的超类的名称。

版权声明:本文博主原创文章,博客,未经同意不得转载。

最新文章

  1. JDK1.6 中文API 下载地址
  2. restassured - JsonPath
  3. centos6.6 安装 LXC
  4. C++对MS SQL Server的操作
  5. UTF编码问题小结
  6. 设置控件Enable=false,控件颜色不变
  7. SQL SERVER 报:由于数据移动,未能继续以 NOLOCK 方式扫描错误的解决办法。
  8. Linux下实现秒级定时任务的两种方案(crontab 每秒运行)
  9. 洛谷P3469[POI2008]BLO-Blockade
  10. oracle修改审计功能
  11. 用系统默认mail服务实现邮件发送
  12. java开发师笔试面试每日8题(1)
  13. Spring Kafka整合Spring Boot创建生产者客户端案例
  14. JavaScript大杂烩13 - 总结ECMAScript 5新功能
  15. 游戏服务器学习笔记 3———— firefly 的代码结构,逻辑
  16. 20169211《linux内核原理与分析》第七周作业
  17. MongoDB查询指定字段(field)返回指定字段的方法
  18. java 8 新特性之Stream的排序/分类
  19. JSON与XML比较
  20. 飞思卡尔MC9S12系列单片机地址影射以及分页问题

热门文章

  1. Hive学习之更改表的属性
  2. java之观察者模式
  3. 星际地图制作中OB无建筑 退出问题
  4. Scale-up(纵向扩展) vs Scale-out(横向扩展)
  5. delphi 7 信息对话框的按钮屏蔽键盘操作,只允许鼠标点击
  6. [置顶] SpecDD(混合的敏捷方法模型)主要过程概述
  7. 【转载】Android Studio jar、so、library项目依赖,原文链接http://zhengxiaopeng.com/2014/12/13/Android-Studio-jar、so、library项目依赖/
  8. Cube Stacking(并差集深度+结点个数)
  9. 一个关于Integer的秘密
  10. MongoDB(三)mongoDB下载和安装