第五章 类和继承

前面章节中的模块都不是以面向对象形式写的，但是在Closure中许多模块是，尽管JavaScript支持基于原型编程，Closure库以原型来实现类的编程。为了管理内存，用传统的复制对象来创建对象。

许多Javascript开发者都回避使用面向对象，他们认为本身的弱类型是很优秀的功能。另一些人完全认为面试对象是有缺陷的，认为即使Java的面向对象也不是一个好的设计，引用Effective Java中的第14条说：“组合优于继承”，反对者也提到第15条：“对继承写详细文档或都根本就不使用它”。这两点关于继承的使用在Closure库都被认真设计。

不管你支持那一方，理解Closure中类是怎样使用的是很重要的。本章将讲解Closure中类的使用，通过本章，你将能用库的样式创建对象 ，也能更好的理解库原代码。

Closure中类的例子

创建类的第一步是声明一个构造函数。它能被new关键字用来创建对象实例，这个函数中包含this来引用新创建的实例。

第二步是对函数的原型添加属性。类的每个实例在它的原型链中都有一个隐藏的引用来引用构造函数的原型。这使用对于类的所有实例原型中的信息都可用。

Closue例子

这是一个名为House的例子，它包含一个房子信息：

[javascript]  view plain  copy

1. /** 
2. * @fileoverview House contains information about a house, such as its 
3. * address. 
4. * @author bolinfest@gmail.com (Michael Bolin) 
5. */  
6. goog.provide('example.House');  
7. /** 
8. * Creates a new House. 
9. * @param {string} address Address of this house. 
10. * @param {number=} numberOfBathrooms Defaults to 1. 
11. * @param {Array.<Object>=} itemsInTheGarage 
12. * @constructor 
13. */  
14. example.House = function(address, numberOfBathrooms, itemsInTheGarage) {  
15. /** 
16. * @type {string} 
17. * @private 
18. */  
19. this.address_ = address;  
20. if (goog.isDef(numberOfBathrooms)) {  
21. this.numberOfBathrooms_ = numberOfBathrooms;  
22. }  
23. /** 
24. * @type {Array.<Object>} 
25. * @protected 
26. */  
27. this.itemsInTheGarage = goog.isDef(itemsInTheGarage) ?  
28. itemsInTheGarage : [];  
29. };  

[javascript]  view plain  copy

1. /** 
2. * @type {number} 
3. * @private 
4. */  
5. example.House.prototype.numberOfBathrooms_ = 1;  
6. /** 
7. * @type {boolean} 
8. * @private 
9. */  
10. example.House.prototype.needsPaintJob_ = false;  
11. /** @return {string} */  
12. example.House.prototype.getAddress = function() {  
13. return this.address_;  
14. };  
15. /** @return {number} */  
16. example.House.prototype.getNumberOfBathrooms = function() {  
17. return this.numberOfBathrooms_;  
18. };  
19. /** @return {boolean} */  
20. example.House.prototype.isNeedsPaintJob = function() {  
21. return this.needsPaintJob_;  
22. };  
23. /** @param {boolean} needsPaintJob */  
24. example.House.prototype.setNeedsPaintJob = function(needsPaintJob) {  
25. this.needsPaintJob_ = needsPaintJob;  
26. };  
27. /** @param {string} color */  
28. example.House.prototype.paint = function(color) {  
29. /* some implementation */  
30. };  
31. /** @return {number} */  
32. example.House.prototype.getNumberOfItemsInTheGarage = function() {  
33. return this.itemsInTheGarage.length;  
34. };  

此文件以@fileoverview 注解开始，对本文件内容给出了主要描述。这注解是可选的，但使用它是很好的编程习惯，@author也是一样。

就像第3章所说，goog.provide('example.House')确保有一个全局对象并有House属性。如果goog.provide()已经创建了一个House对象，它会重新分配一个空的新对象。

在16行，example.House被分配为一个函数。@constructor注解标明它是一个构造函数，也就是说它能用于new关键字。当new 用在一个没有@constructor注解的函数时，编译器会发出警告。

就像其它基于类的编程一样，构造函数是用来初使化它有四个参数，对参数的赋值都是应用在新创建的实例上。

example.House有四个字段，每一个都以不同方式赋值，address通过构造函数参数，因此为每房子只有一个地址，它没有默认值，因此是必须的参数。

numberOfBathrooms是可选的，由于它有默认值1以example.House.prototype方式声明，因此它能被类的多个实例共享。

itemsInTheGarage如果传入时将设为此值，否则为[]空数组。

needsPaintJob不通过构造函数赋值，它能被共享。

构造函数必须第一个声明，其它方法和属性可以任意顺序。每一个方法中至少包含一个到this的引用，当指向类的实例，如果它不含this，它会被重写为静态方法。为了理解this在方法中是如何工作的，参考如下例子：

[javascript]  view plain  copy

1. var whiteHouse = new example.House('1600 Pennsylvania Avenue', 35);  
2. whiteHouse.setNeedsPaintJob(true);  

第二行和如下相同：

[javascript]  view plain  copy

1. whiteHouse.setNeedsPaintJob.call(whiteHouse, true);  

对象whiteHouse没有setNeedsPaintJob方法，但是它的原型中有，在example.House.prototype中的setNeedsPaintJob用如下方法分配：

[javascript]  view plain  copy

1. function(needsPaintJob) {  
2. this.needsPaintJob_ = needsPaintJob;  
3. }  

这个方法根本不知道对象的原型，它只知道this引用。
Java中等价例子

[javascript]  view plain  copy

1. package example;  
2. /** 
3. * House contains information about a house, such as its address. 
4. * @author bolinfest@gmail.com (Michael Bolin) 
5. */  

[javascript]  view plain  copy

1. public class House {  
2. private final String address;  
3. private final int numberOfBathrooms;  
4. private boolean needsPaintJob;  
5. protected Object[] itemsInTheGarage;  
6. public House(String address) {  
7. this(address, 1);  
8. }  
9. public House(String address, int numberOfBathrooms) {  
10. this(address, numberOfBathrooms, new Object[0]);  
11. }  
12. public House(String address, int numberOfBathrooms,  
13. Object[] itemsInTheGarage) {  
14. this.address = address;  
15. this.numberOfBathrooms = numberOfBathrooms;  
16. this.needsPaintJob = false;  
17. this.itemsInTheGarage = itemsInTheGarage;  
18. }  
19. public String getAddress() {  
20. return address;  
21. }  
22. public int getNumberOfBathrooms() {  
23. return numberOfBathrooms;  
24. }  
25. public boolean isNeedsPaintJob() {  
26. return needsPaintJob;  
27. }  
28. public void setNeedsPaintJob(boolean needsPaintJob) {  
29. this.needsPaintJob = needsPaintJob;  
30. }  
31. public void paint(String color) { /* some implementation */ }  
32. public int getNumberOfItemsInTheGarage() {  
33. return itemsInTheGarage.length;  
34. }  
35. }  

静态成员
静态成员是和类相关联，而不是和实例关联。如house.js例子所示：

[javascript]  view plain  copy

1. example.House.prototype.numberOfBathrooms_ = 1;  

尽管 numberOfBathrooms_ 是一个字段，不同实例有不同的值，默认值是声明在原型中，可以不通过类实例更改。同样，实例方法也不是真正受限于类的实例。

[javascript]  view plain  copy

1. var obj = {};  
2. example.House.prototype.setNeedsPaintJob.call(obj, true);  
3. alert(obj.needsPaintJob_); // alerts true  

虽然静态成员和原型继承是相对立的，但在Closure库中也是支持的，它的添加方法是：静态成员作为构造函数属性添加而不是原型：

[javascript]  view plain  copy

1. /** 
2. * This would be referred to as an instance method of House because it is 
3. * defined on House's prototype. 
4. * @param {example.House} house2 
5. * @return {number} 
6. */  
7. example.House.prototype.calculateDistance = function(house2) {  
8. return goog.math.Coordinate.distance(this.getLatLng(), house2.getLatLng());  
9. };  
10. /** 
11. * This would be referred to as a static method of House because it is 
12. * defined on House's constructor function. 
13. * @param {example.House} house1 
14. * @param {example.House} house2 
15. * @return {number} 
16. */  
17. example.House.calculateDistance = function(house1, house2) {  
18. return goog.math.Coordinate.distance(house1.getLatLng(), house2.getLatLng());  
19. };  

你可能注意到这两个方法很相似，并想知道是否可以从第一个产生第二个。编译器高级模式中对此有特殊处理逻辑，它会在可能情况下重写实例方法和它们调用。这使得它能减少编译后代码大小，因此this不能被重命名，但是house能。另一个是它能提高运行时性能，编译器能内联不含有this的函数块。

单例模式

像第三章所示，goog.addSingletonGetter()能够创建一个返回单例的静态方法。它能直接通过构造函数调用：

[javascript]  view plain  copy

1. goog.provide('example.MonaLisa');  
2. /** @constructor */  
3. example.MonaLisa = function() {  
4. // Probably a really fancy implementation in here!  
5. };  
6. goog.addSingletonGetter(example.MonaLisa);  
7. // Now the constructor has a method named getInstance() defined on it that  
8. // will return the singleton instance.  
9. var monaLisa1 = example.MonaLisa.getInstance();  
10. var monaLisa2 = example.MonaLisa.getInstance();  
11. // alerts true because getInstance() will always return the same instance  
12. alert(monaLisa1 === monaLisa2);  

注意goog.addSingletonGetter()的参数是example.MonaLisa而不是new example.MonaLisa(),因为goog.addSingletonGetter()会延迟实例化实例。因此如果example.MonaLisa.getInstance()未调用时，example.MonaLisa将不会被实例化。goog.addSingletonGetter()对实例化的对象没有任何参数，因此它只能用来构造不含参数的对象。

但是请注意，goog.addSingletonGetter()不能阻止使用构造函数构建对象。它通过getInstance()返回对象来代替通过构造方法。

Closure子类示例
如果成员只对子类可见，可以用@protected标明，按惯例，私有成员在Closure中声明用下划线开关，受保护成员则不用。

Closure 示例

[javascript]  view plain  copy

1. /** 
2. * @fileoverview A Mansion is a larger House that includes a guest house. 
3. * @author bolinfest@gmail.com (Michael Bolin) 
4. */  
5. goog.provide('example.Mansion');  
6. goog.require('example.House');  
7. /** 
8. * @param {string} address Address of this mansion. 
9. * @param {example.House} guestHouse This mansion's guest house. 
10. * @param {number=} numberOfBathrooms Number of bathrooms in this mansion. 
11. * Defaults to 10. 
12. * @constructor 
13. * @extends {example.House} 
14. */  
15. example.Mansion = function(address, guestHouse, numberOfBathrooms) {  
16. if (!goog.isDef(numberOfBathrooms)) {  
17. numberOfBathrooms = 10;  
18. }  
19. example.House.call(this, address, numberOfBathrooms);  
20. /** 
21. * @type {example.House} 
22. * @private 
23. */  
24. this.guestHouse_ = guestHouse;  
25. };  
26. goog.inherits(example.Mansion, example.House);  

[javascript]  view plain  copy

1. /** 
2. * Donates all of the items in the garage. 
3. * @param {example.Goodwill} Goodwill Organization who receives the donations. 
4. */  
5. example.Mansion.prototype.giveItemsToGoodwill = function(goodwill) {  
6. // Can access the itemsInTheGarage field directly because it is protected.  
7. // If it were private, then the superclass would have to expose a public or  
8. // protected getter method for itemsInTheGarage.  
9. var items = this.itemsInTheGarage;  
10. for (var i = 0; i < items.length; i++) {  
11. goodwill.acceptDonation(items[i]);  
12. }  
13. this.itemsInTheGarage = [];  
14. };  
15. /** @inheritDoc */  
16. example.Mansion.prototype.paint = function(color) {  
17. example.Mansion.superClass_.paint.call(this, color);  
18. this.getGuestHouse_.paint(color);  
19. };  

对一个子类，它的构造函数如下改变：

1，Jsdoc注释有@extends注解，这对编译器很有帮助。对于类型检查也很有用，如一个接受example.House的方法也接受example.Mansion。

2，方法中应改显示调用父类构造函数：

[javascript]  view plain  copy

1. example.House.call(this, address, numberOfBathrooms);  

3，在构造函数下面应改调用goog.inherits()，它有两个参数，子类构造函数和父类构造函数：

[javascript]  view plain  copy

1. goog.inherits = function(childCtor, parentCtor) {  
2. /** @constructor */  
3. function tempCtor() {};  
4. tempCtor.prototype = parentCtor.prototype;  
5. childCtor.superClass_ = parentCtor.prototype;  
6. childCtor.prototype = new tempCtor();  
7. childCtor.prototype.constructor = childCtor;  
8. };  

在goog.inherits()中，它给子类构造函数添加了一个superClass_属性并指向父类的原型，因此example.Mansion.superClass_.paint和example.House.prototype.pant相同。
在子类中声明字段

在字类和父类中字段是共享的，因此要确保不要重名

[javascript]  view plain  copy

1. goog.provide('example.Record');  
2. goog.provide('example.BankRecord');  
3. goog.require('goog.string');  
4. /** @constructor */  
5. example.Record = function() {  
6. /** 
7. * A unique id for this record 
8. * @type {string} 
9. * @private 
10. */  
11. this.id_ = goog.string.createUniqueString();  
12. };  
13. /** @return {string} */  
14. example.Record.prototype.getId = function() {  
15. return this.id_;  
16. };  
17. /** 
18. * @param {number} id 
19. * @constructor 
20. * @extends {example.Record} 
21. */  
22. example.BankRecord = function(id) {  
23. example.Record.call(this);  
24. // THIS IS A PROBLEM BECAUSE IT COLLIDES WITH THE SUPERCLASS FIELD  
25. /** 
26. * A unique id for this record 
27. * @type {number} 
28. * @private 
29. */  

[javascript]  view plain  copy

1. this.id_ = id;  
2. };  
3. goog.inherits(example.BankRecord, example.Record);  
4. /** @return {number} */  
5. example.BankRecord.prototype.getBankRecordId = function() {  
6. return this.id_;  
7. };  

在这个例子中，example.BankRecord中的id_将覆盖example.Record中的，重定义id_后它getId()方法返回一个数字而不是字符串，这种错误编译器无法检测到。

@override和@inheritDoc

@overide用于子类覆盖父类时：

[javascript]  view plain  copy

1. /** @return {example.House} */  
2. example.Person.prototype.getDwelling = function() { /* ... */ };  
3. /** 
4. * In this example, RichPerson is a subclass of Person. 
5. * @return {example.Mansion} 
6. * @override 
7. */  
8. example.RichPerson.prototype.getDwelling = function() { /* ... */ };  

@override也可用于有相同方法签名，但是文档需要更新情况：

[javascript]  view plain  copy

1. /** @return {string} A description of this object. */  
2. Object.prototype.toString = function() { /* ... */ };  
3. /** 
4. * @return {string} The format of the string will be "(x,y)". 
5. * @override 
6. */  
7. Point.prototype.toString = function() { /* ... */ };  

如果文档没有任何更新，可以用@inheritDoc

使用goog.base()简单调用父类

在example.Mansion调用父类很麻烦，可用如下方法：

[javascript]  view plain  copy

1. /** 
2. * @param {string} address Address of this mansion. 
3. * @param {example.House} guestHouse This mansion's guest house. 
4. * @param {number=} numberOfBathrooms Number of bathrooms in this mansion. 
5. * Defaults to 10. 
6. * @constructor 
7. * @extends {example.House} 
8. */  
9. example.Mansion = function(address, guestHouse, numberOfBathrooms) {  
10. if (!goog.isDef(numberOfBathrooms)) {  
11. numberOfBathrooms = 10;  
12. }  
13. goog.base(this, address, numberOfBathrooms);  
14. /** 
15. * @type {example.House} 
16. * @private 
17. */  
18. this.guestHouse_ = guestHouse;  
19. };  
20. goog.inherits(example.Mansion, example.House);  

同样，goog.base也可替换example.Mansion.superClass_.paint.call：

[javascript]  view plain  copy

1. /** @inheritDoc */  
2. example.Mansion.prototype.paint = function(color) {  
3. goog.base(this, 'paint', color);  
4. this.guestHouse_.paint(color);  
5. };  

抽象方法

要声明一个只用于子类覆盖的方法，将其值声明为：goog.abstractMethod：

[javascript]  view plain  copy

1. goog.provide('example.SomeClass');  
2. /** @constructor */  
3. example.SomeClass = function() {};  
4. /** 
5. * The JSDoc comment should explain the expected behavior of this method so 
6. * that subclasses know how to implement it appropriately. 
7. */  
8. example.SomeClass.prototype.methodToOverride = goog.abstractMethod;  

如果子类不覆盖此方法将会在运行时方法调用时报错：

[javascript]  view plain  copy

1. goog.provide('example.SubClass');  
2. /** 
3. * @constructor 
4. * @extends {example.SomeClass} 
5. */  
6. example.SubClass = function() {  
7. goog.base(this);  
8. };  
9. goog.inherits(example.SubClass, example.SomeClass);  
10. var subClass = new example.SubClass();  
11. // There is no error from the Compiler saying this is an abstract/unimplemented  
12. // method, but executing this code will yield a runtime error thrown by  
13. // goog.abstractMethod.  
14. subClass.methodToOverride();  

到写本书时为止，编译器不会在编译时发出警告。

接口

声明接口很简单：

[javascript]  view plain  copy

1. goog.provide('example.Shape');  
2. /** 
3. * An interface that represents a two-dimensional shape. 
4. * @interface 
5. */  
6. example.Shape = function() {};  
7. /** 
8. * @return {number} the area of this shape 
9. */  
10. example.Shape.prototype.getArea = function() {};  

要实现一个接口：

[javascript]  view plain  copy

1. goog.provide('example.Circle');  
2. /** 
3. * @param {number} radius 
4. * @constructor 
5. * @implements {example.Shape} 
6. */  
7. example.Circle = function(radius) {  
8. this.radius = radius;  
9. };  
10. /** @inheritDoc */  
11. example.Circle.prototype.getArea = function() {  
12. return Math.PI * this.radius * this.radius;  
13. };  

对于方法参数为example.Shape时可用example.Circle:

[javascript]  view plain  copy

1. goog.provide('example.ShapeUtil');  
2. /** @param {!example.Shape} shape */  
3. example.ShapeUtil.printArea = function(shape) {  
4. document.write('The area of the shape is: ' + shape.getArea());  
5. };  
6. // This line is type checked successfully by the Closure Compiler.  
7. example.ShapeUtil.printArea(new example.Circle(1));  

多继承
Closure中不支持多继承，但开发者可以有方案实现它，可借助于goo.mixin():

[javascript]  view plain  copy

1. goog.provide('example.Phone');  
2. goog.provide('example.Mp3Player');  
3. goog.provide('example.AndroidPhone');  
4. /** @constructor */  
5. example.Phone = function(phoneNumber) { /* ... */ };  
6. example.Phone.prototype.makePhoneCall = function(phoneNumber) { /* ... */ };  
7. /** @constructor */  
8. example.Mp3Player = function(storageSize) { /* ... */ };  
9. example.Mp3Player.prototype.playSong = function(fileName) {  
10. var mp3 = this.loadMp3FromFile(fileName);  
11. mp3.play();  
12. return mp3;  
13. };  
14. /** 
15. * @constructor 
16. * @extends {example.Phone} 
17. */  
18. example.AndroidPhone = function(phoneNumber, storageSize) {  
19. example.Phone.call(this, phoneNumber);  
20. example.Mp3Player.call(this, storageSize);  
21. };  
22. goog.inherits(example.AndroidPhone, example.Phone);  
23. goog.mixin(example.AndroidPhone.prototype, example.Mp3Player.prototype);  

枚举

枚举用@enum标注：

[javascript]  view plain  copy

1. /** @enum {number} */  
2. example.CardinalDirection = {  
3. NORTH: Math.PI / 2,  
4. SOUTH: 3 * Math.PI / 2,  
5. EAST: 0,  
6. WEST: Math.PI  
7. };  

枚举方法：

[javascript]  view plain  copy

1. /** 
2. * @param {example.CardinalDirection} direction 
3. * @return {example.CardinalDirection} 
4. */  
5. example.CardinalDirection.rotateLeft90Degrees = function(direction) {  
6. return (direction + (Math.PI / 2)) % (2 * Math.PI);  
7. };  

这会在example.CardinalDiretion中添加新属性，因此goog.object.forEache遍历它时也会包含rotateLeft90Degrees(),可以将枚举放在数组中来迭代：

[javascript]  view plain  copy

1. /** @type {Array.<example.CardinalDirection>} */  
2. example.CardinalDirection.values = [  
3. example.CardinalDirection.NORTH,  
4. example.CardinalDirection.SOUTH,  
5. example.CardinalDirection.EAST,  
6. example.CardinalDirection.WEST  
7. ];  

不幸的是它要求example.CardinalDirection 和example.CardinalDirection.values同时维护，但它能保证迭代正确。

goog.Disposable


如果一个对象不再被使用，它要求显示被释放内存，它需要继承goog.Disposable，它含有两个方法：

[javascript]  view plain  copy

1. goog.Disposable.prototype.dispose = function() {  
2. if (!this.disposed_) {  
3.     this.disposed_ = true;  
4. this.disposeInternal();  
5. }  
6. };  
7. goog.Disposable.prototype.disposeInternal = function() {  
8.     // No-op in the base class.  
9. };  

第一个方法dispose释放对象引用，实际上调用 disposeInternal完成，disposed_标识可以确保disposeInternal只被调用 一次。

覆盖disposeInternal()方法：

覆盖disposeInternal()要完成5个工作：

1，调用父类disposeInternal方法

2，释放类中引用的所有对象

3，移除类的监听器

4，移除类的DOM节点

5，移除类的COM对象

[javascript]  view plain  copy

1. goog.provide('example.AutoSave');  
2. goog.require('goog.Disposable');  
3. /** 
4. * @param {!Element} container into which the UI will be rendered. 
5. * @param {!goog.ui.Button} saveButton Button to disable while saving. 
6. * @constructor 
7. * @extends {goog.Disposable} 
8. */  
9. example.AutoSave = function(container, saveButton) {  
10. // Currently, goog.Disposable is an empty function, so it may be tempting  
11. // to omit this call; however, the Closure Compiler will remove this line  
12. // for you when Advanced Optimizations are enabled. It is better to  
13. // leave this call around in case the implementation of goog.Disposable()  
14. // changes.  
15. goog.Disposable.call(this);  
16. /** 
17. * @type {!Element} 
18. */  
19. this.container = container;  
20. /** 
21. * @type {function(Event)} 
22. */  
23. this.eventListener = goog.bind(this.onMouseOver, this);  
24. // Although this usage follows the standard set by the W3C Event model,  
25. // this is not the recommended way to manage events in the Closure Library.  
26. // The correct way to add event listeners is explained in the next chapter.  
27. container.addEventListener('mouseover', this.eventListener, false);  
28. /** 
29. * @type {!goog.ui.Button} 
30. */  
31. this.saveButton = saveButton;  
32. };  
33. goog.inherits(example.AutoSave, goog.Disposable);  
34. /** @type {XMLHttpRequest} */  
35. example.AutoSave.prototype.xhr;  
36. /** @type {Element} */  
37. example.AutoSave.prototype.label;  
38. /** 
39. * Dialog to display if auto-saving fails; lazily created after the first 
40. * failure. 
41. * @type {goog.ui.Dialog} 
42. */  
43. example.AutoSave.prototype.failureDialog;  
44. example.AutoSave.prototype.render = function() {  
45. this.container.innerHTML = '<span style="display:none">Saving...</span>';  
46. this.label = this.container.firstChild;  
47. };  
48. /** @param {Event} e */  
49. example.AutoSave.prototype.onMouseOver = function(e) { /* ... */ };  
50. /** @inheritDoc */  
51. example.AutoSave.prototype.disposeInternal = function() {  
52. // (1) Call the superclass's disposeInternal() method.  
53. example.AutoSave.superClass_.disposeInternal.call(this);  
54. // (2) Dispose of all Disposable objects owned by this class.  
55. goog.dispose(this.failureDialog);  
56. // (3) Remove listeners added by this class.  
57. this.container.removeEventListener('mouseover', this.eventListener, false);  
58. // (4) Remove references to COM objects.  
59. this.xhr = null;  
60. // (5) Remove references to DOM nodes, which are COM objects in IE.  
61. delete this.container;  
62. this.label = null;  
63. };