Douglas Crockford    www.crockford.com   翻译:ThoughtScript  原文链接 http://javascript.crockford.com/inheritance.html

And you think you're so clever and classless and free  — John Lennon

JavaScript 一种是与类无关的面向对象语言(基于对象),因此Javascript使用了基于原型的方式(原型链)代替传统面向对象语言的继承方式。这可能会让过去习惯于使用C++、Java这类面向对象语言继承方式的程序员感到困惑。但马上你就能认识到实际上Javascript的原型方式确实比传统的方式更能表达继承关系。

JavaJavaScript

Strongly-typed Loosely-typed
Static Dynamic
Classical Prototypal
Classes Functions
Constructors Functions
Methods Functions

但是,首先我们需要思考我们使用继承的目的是什么?有两个主要的方面。第一是出于类型转换。我们希望语言环境能自动的对引用类的进行类型转换,但有时是无法通过类型系统的安全检查的,所以通常我们需要会对引用的对象进行显示转换,这对强类型语言至关重要,但是对像JavaScript这样弱类型语言却是无关紧要,因为Javascript中对象的引用不需要类型转换。 第二是考虑代码重用。通常我们通过使一系列不同对象实现相同的接口来达到重用。类继承方式通过创建一个单独的定义集合接口让重用变的可能,通常我们看到一些对象非常相似,但是对象间也存在区别,主要是增加或修改了一小部分方法。传统的类继承方式对代码重用的确有用,但JavaScript的原型方式更有用。 为了证明这点,我们将会介绍一些 sugar 让我们的代码形式类似于传统语言的形式。并且我们将展示在传统语言中不可行但却非常有用的模式,最后,我们将解释这些 sugar。

Classical Inheritance 类继承方式

首先,我们定义一个Parenizor类,Parenizor拥有设置和获取value变量的方法,和一个返回把value用括号包裹起来后值的toString方法。

function Parenizor(value) {
this.setValue(value);
}Parenizor.method('setValue', function (value) {this.value = value;return this;
});Parenizor.method('getValue', function () {return this.value;
});Parenizor.method('toString', function () {return '(' + this.getValue() + ')';
});

这样的语法看上去有些不寻常,但这是可以很容易让人识别这是传统类继承的模式。method方法接收一个方法名称和一个方法函数,让方法作为公共方法添加到类中。 所以现在我们可以这样写:

myParenizor = new Parenizor(0); myString = myParenizor.toString();

正如您所期望的,myString的值为“(0)” 现在我们定义另一个继承自Parenizor的类,同样的toString方法但返回“-0-”如果值为零或空。

function ZParenizor(value) {
this.setValue(value);
}ZParenizor.inherits(Parenizor);ZParenizor.method('toString', function () {if (this.getValue()) {return this.uber('toString');
}return"-0-";
});

inherits方法与Java的extends关键字作用很相似,uber方法与Java的super相似,允许方法调用父类的方法。(该名称已被更改,以避免保留字的限制。) 所以现在我们可以这样写:

myZParenizor = new ZParenizor(0); myString = myZParenizor.toString();

这次,myString的值为“-0-” Javascript没有类的概念,但是我们依旧可以按类方式的编程。

Multiple Inheritance 多重继承

过操纵一个函数的原型对象,我们可以实现多重继承,使我们能创建一个继承多个类的不同方法。 复杂的多重继承难以实现,并有可能遭受潜在的方法名称冲突。我们可以在JavaScript中实现复杂的多重继承,但对于这个例子中,我们将使用一种称为Swiss Inheritance的更严格形式。 假设有一个NumberValue的类,具有 一个setValue 方法用来检查value变量是否是指定范围内的数字,并在需要的时候可以抛出异常。我们只需要ZParenizor的 setValue和setRange方法,而不需要toString方法,所以我们可以这样写: ZParenizor.swiss(NumberValue, 'setValue', 'setRange'); 这里只把我们请求的方法添加到了ZParenizor类中。

Parasitic Inheritance 寄生继承

里用另一种代替继承自Parenizor的方法来定义ZParenizor。寄生继承并不直接从 Parenizor继承,而是通过在ZParenizor构造器内部中调用Parenizor构造器,通过对Parenizor构造器返回的结果that进行修改,最后返回修改后的that。而这个构造器添加的是特权方法(privileged methods)而非公共方法。

function ZParenizor2(value) {var that = new Parenizor(value);that.toString = function () {if (this.getValue()) {return this.uber('toString');
}return"-0-"
};return that;
}

类继承方式是 is-a(是...) 的关系,而寄生继承是 was-a-but-now's-a(原来是……而现在是……) 的关系。在对象构造中构造器扮演了主要的角色。注意uber方法(代替super保留字)对特权方法仍然有效。

Class Augmentation 类扩展

  JavaScript的动态特性使我们能够添加或替换现有类中的方法。我们能在任何时候调用method方法,不管现有的还是未来创建的类实例都将会含有新添加的方法,这样我们在随时都能很直接的扩展类的方法。而继承是通过追溯的方式工作的,和类扩展是不同的。我们把这种方式命名为“Class Augmentation ”是因为想避免Java中的extends(扩展)混淆,这是两个完全不同的概念。

Object Augmentation 对象扩展

  在静态的面向对象语言中,假如你需要一个只是与另一已经存在对象稍有不同的对象,你必须重新定义一个新的类。但在Javascript,你可以添加单个对象的方法,而不需要定义额外的类。这样你可以写更少更简单的类,这是Javascript非常强大的特性。把每一个Javascript对象现象成一张张哈希表,你可以随时添加新的变量到哈希表中,如何变量是函数,变量就会成为对象的方法。 这样在上面的例子中,我完全不需要用到ZParenizor类,就能以很简单的方式修改实例对象来达到扩展对象。

myParenizor = new Parenizor(0);
myParenizor.toString = function () {if (this.getValue()) {return this.uber('toString');
}return"-0-";
};
myString = myParenizor.toString();

这里我们没有使用任何形式的继承就增加了 toString方法到myParenizor 实例对象中。这是因为JavaScript是与类无关的语言,所以你可以扩展每一个独立的实例对象。

Sugar

了让上面的例子能运行,我写了四个sugar 方法。第一个是method方法,用来把实例方法添加到类中。

Function.prototype.method = function (name, func) {this.prototype[name] = func;return this;
};

这里添加了一个公共的方法到Function.prototype,这里通过类扩展的方式这样所有的方法都可以使用method方法。这你需要一个函数名称和函数,作为参数,将它们添加到一个函数的原型对象中。 这里返回本身(this)。当我写一个方法,它不需要返回值时,我通常会返回它本身,这样可以允许写成链式语句的编程风格。 下一个是inherits方法,用来让一个类继承另一个类。inherits方法应该在两个类定义之后调用,但在添加继承方法之前。

Function.method('inherits', function (parent) {var d = {}, p = (this.prototype = new parent());this.method('uber', function uber(name) {if (!(name in d)) {d[name] = 0;
}var f, r, t = d[name], v = parent.prototype;if (t) {while (t) {v = v.constructor.prototype;t -= 1;
}f = v[name];} else {f = p[name];if (f == this[name]) {f = v[name];
}
}d[name] += 1;r = f.apply(this, Array.prototype.slice.apply(arguments, [1]));d[name] -= 1;return r;
});return this;
});

再来,我们扩展Function类。我们创建parent类的实例对象做为新的prototype。在添加uber方法到prototype的同时修正constructor 字段。 uber方法将会在自己的prototype中查找指定的方法。这个方法在寄生继承或对象扩展的情况下会被调用执行。如果使用的是类继承方式,那么我们要找到parent的prototype中的函数。return语句调用了函数的apply方法来调用该函数,同时显示地设置this并传递一个参数数组。参数(如果有的话)可以从arguments数组中获得。不幸的是,arguments数组并不是一个真正的数组,所以我们必须再次调用apply来调用数组中的slice方法。 最后是swiss方法:

Function.method('swiss', function (parent) {for (var i = 1; i < arguments.length; i += 1) {var name = arguments[i];this.prototype[name] = parent.prototype[name];
}return this;
});

swiss方法遍历arguments参数对象。通过每一个参数名称name,他从parent原型中拷贝成员到自身类的原型中。

Conclusion 结论

  JavaScript可以传统语言方式那样使用,但它也有丰富独特的表达继承的方式。我们已经了解了 类继承方式,Swiss继承方式,寄生继承方式,类扩展和对象扩展。这一系列代码重用的模式来自被认为比Java更小,更简单的Javascript。 传统语言中的对象是固定的(hard),要在对象中添加新的成员变量的唯一方式就是创建新的类。但在Javascript中,对象是灵活(soft),添加一个新的成员到JavaScript对象中只需要作简单的赋值。 由于JavaScript中的对象是如此灵活,你必须对类层次结构有不同的认识。深层次(Deep hierarchies )是不适当的,浅层次(Shallow hierarchies )更具执行效率和可读性。 到现在我已经写了8年的JavaScript,期间我发现我从来没有使用过uber方法。调用父类成员(super)的想法在传统模式中是相当重要的,但是在原型和函数式的模式中这看起来并不是很有必要。从现在看来早期我支持传统模式中super的尝试是一个错误。

转载于:https://www.cnblogs.com/leejersey/p/4357667.html

Classical Inheritance in JavaScript相关推荐

  1. JavaScript继承详解(四)

    文章截图 - 更好的排版 在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. C ...

  2. JavaScript继承详解(四) 转

    在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...

  3. [转]JavaScript继承详解

    原文地址:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  4. JavaScript 资源列表

    这段时间闲着没事,就在JavaScript上多花点心思吧. 一.书籍 1. <JavaScript高级程序设计>     非常详尽而实用. 2. <JavaScript: The D ...

  5. 好文推荐(对JScript初,中级者有用):面向对象的Jscript[转贴]

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  6. JavaScript中Object的总结

    基于原型继承,动态对象扩展,闭包,JavaScript已经成为当今世界上最灵活和富有表现力的编程语言之一. 这里有一个很重要的概念需要特别指出:在JavaScript中,包括所有的函数,数组,键值对和 ...

  7. JavaScript 面试中常见算法问题详解

    JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...

  8. 《JavaScript 模式》读书笔记

    简介 在软件开发过程中,模式是指一个通用问题的解决方案.一个模式不仅仅是一个可以用来复制粘贴的代码解决方案,更多地是提供了一个更好的实践经验.有用的抽象化表示和解决一类问题的模板. 对象有两大类: 本 ...

  9. 每个JavaScript开发人员应该知道的33个概念

    每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...

最新文章

  1. 用leangoo怎么做迭代管理?(Sprint Backlog、任务看板、燃尽图)
  2. Dinic最大流 || Luogu P3376 【模板】网络最大流
  3. leetcode-49-字母异位词分组
  4. lstm需要优化的参数_使用PyTorch手写代码从头构建LSTM,更深入的理解其工作原理...
  5. SQL Server之索引
  6. mysql导出表_mysql导出表的3种方式
  7. Qt开启本地事件循环(防止界面卡阻塞【卡死】)QEventLoop 的基本使用
  8. wince植入胎压监测_wince设备通过USB连接线上网指南(原创)(测试成功)
  9. 51单片机——红外解码
  10. mysql安装可视化界面_MySQL的下载、安装配置、连接可视化界面。
  11. 国内第三个双机场城市新机场试飞,6月正式投用
  12. C/C++:个人收支系统实现
  13. 压缩文件下载后无法打开问题解决方法
  14. 跑跑卡丁车显示服务器断开连接,win10系统电脑玩跑跑卡丁车出现与服务器断开连接的详细技巧...
  15. 程序员面试必问:你为什么要离开上一家公司。你会怎么回答?
  16. Python爬虫学习总结
  17. php如何连接数据库 甲骨文,Windows PHP/phpStudy 连接 甲骨文Oracle 数据库 oci8
  18. java spring 配置
  19. 计量经济学及Stata应用案例(一)
  20. 这些年我是如何在知乎安稳引流不被封号的

热门文章

  1. 面试 Google, 我失败了!
  2. 一口气说出 6种 延时队列的实现方案,大厂offer稳稳的
  3. StringBuilder 为什么线程不安全?
  4. 面试官:不使用synchronized和lock,如何实现一个线程安全的单例?
  5. 分布式、高并发、多线程,到底有什么区别?
  6. 深入浅出Python元编程
  7. 数据库外键的使用原则
  8. Andriod --- JetPack (七):Room + ViewModel + LiveData 增删改查实例
  9. 当点击某个链接发送多个请求之后,浏览器显示正在等待localhost响应怎么办(实用)
  10. html中基本选择器的优先级,CSS_CSS中的各种选择器与样式优先级小结,优先级:由高到低(从上到下)- phpStudy...