第八章 8.5 面向对象的 JavaScript (Object-Oriented JavaScript)

虽然 JavaScript 支持我们所谓的对象(object)，但他没有正式的“类”(class) 这个提法。这使得他和传统的面向对象语言比如 C++ 以及 Java 有些区别。面向对象的语言一个共有的概念就是强类型，支持基于类的继承。而 JavaScript 不具备。
另一方面，JavaScript 大量使用对象，有基于原型的继承方法， JavaScript 又是一个真正的面向对象语言。
（此处省去若干字）

在 Java 中，有些普遍的命名约定是值得我们写 JavaScript 程序时沿用的。比如：类以大写字母开头，而变量或对象实例以小写字母开头。

在 Java 中，类的成员大致分为四种类型：实例属性(instance properties), 实例方法(instance methods), 类属性(class properties), 类方法(class methods). 下面我们来逐一探讨。

8.5.1 Instance Properties

JavaScript 中任何 object property 都是 instance property. 比如那前面圆的例子来说：

c.r

8.5.2 Instance Methods

例子：

a = c.area();

8.5.3 Class Properties

如：

Number.MAX_VALUE

我们可以通过给 constructor 添加属性，就可以简单的实现 class property :

Circle.PI = 3.14;

因为在 JavaScript 中 function 也是 object. 因此可以附加属性。

8.5.4 Class Methods.

和 Class Property 一样，也是全局的。例子如 Date.parse() 方法。因为是通过类名称而不是对象实例被调用的，Class Method 里是不能用 this 的。实现方法就是类似的向 constructor 添加属性方法就可以了。

8.5.5 例子：

function Circle(radius) {   // The constructor defines the class itself.
    // r is an instance property, defined and initialized in the constructor.
    this.r = radius;
}


// Circle.PI is a class property--it is a property of the constructor function.
Circle.PI = 3.14159;


// Here is a function that computes a circle's area.
function Circle_area(  ) { return Circle.PI * this.r * this.r; }


// Here we make the function into an instance method by assigning it
// to the prototype object of the constructor.
// Note: with JavaScript 1.2, we can use a function literal to
// define the function without naming it Circle_area.
Circle.prototype.area = Circle_area;


// Here's another function. It takes two Circle objects as arguments and
// returns the one that is larger (i.e., has the larger radius).
function Circle_max(a,b) {
    if (a.r > b.r) return a;
    else return b;
}


// Since this function compares two Circle objects, it doesn't make sense as
// an instance method operating on a single Circle object. But we don't want
// it to be a standalone function either, so we make it into a class method
// by assigning it to the constructor function:
Circle.max = Circle_max;


// Here is some code that uses each of these fields:
var c = new Circle(1.0);      // Create an instance of the Circle class
c.r = 2.2;                    // Set the r instance property
var a = c.area();             // Invoke the area(  ) instance method
var x = Math.exp(Circle.PI);  // Use the PI class property in our own computation
var d = new Circle(1.2);      // Create another Circle instance
var bigger = Circle.max(c,d); // Use the max(  ) class method

8.5.6 例子：复数类

下面的例子用了 JavaScript 1.2 及更高版本才有的 function literal 特性。因此不需要为了兼容 1.1 而在调用 prototype 之前调用一次 new 操作。

/*
 * Complex.js:
 * This file defines a Complex class to represent complex numbers.
 * Recall that a complex number is the sum of a real number and an
 * imaginary number and that the imaginary number i is the
 * square root of -1.
 */


/*
 * The first step in defining a class is defining the constructor
 * function of the class. This constructor should initialize any
 * instance properties of the object. These are the essential
 * "state variables" that make each instance of the class different.
 */
function Complex(real, imaginary) {
    this.x = real;       // The real part of the number
    this.y = imaginary;  // The imaginary part of the number
}


/*
 * The second step in defining a class is defining its instance
 * methods (and possibly other properties) in the prototype object
 * of the constructor. Any properties defined in this object will
 * be inherited by all instances of the class. Note that instance
 * methods operate implicitly on the this keyword. For many methods,
 * no other arguments are needed.
 */


// Return the magnitude of a complex number. This is defined
// as its distance from the origin (0,0) of the complex plane.
Complex.prototype.magnitude = function(  ) {
    return Math.sqrt(this.x*this.x + this.y*this.y);
};


// Return a complex number that is the negative of this one.
Complex.prototype.negative = function(  ) {
    return new Complex(-this.x, -this.y);
};


//  Convert a Complex object to a string in a useful way.
//  This is invoked when a Complex object is used as a string.
Complex.prototype.toString = function(  ) {
    return "{" + this.x + "," + this.y + "}";
};


// Return the real portion of a complex number. This function
// is invoked when a Complex object is treated as a primitive value.
Complex.prototype.valueOf = function(  ) { return this.x; }


/*
 * The third step in defining a class is to define class methods,
 * constants, and any needed class properties as properties of the
 * constructor function itself (instead of as properties of the
 * prototype object of the constructor). Note that class methods
 * do not use the this keyword: they operate only on their arguments.
 */


// Add two complex numbers and return the result.
Complex.add = function (a, b) {
    return new Complex(a.x + b.x, a.y + b.y);
};


// Subtract one complex number from another.
Complex.subtract = function (a, b) {
    return new Complex(a.x - b.x, a.y - b.y);
};


// Multiply two complex numbers and return the product.
Complex.multiply = function(a, b) {
    return new Complex(a.x * b.x - a.y * b.y,
                       a.x * b.y + a.y * b.x);
};


// Here are some useful predefined complex numbers.
// They are defined as class properties, where they can be used as
// "constants." (Note, though, that they are not actually read-only.)
Complex.zero = new Complex(0,0);
Complex.one = new Complex(1,0);
Complex.i = new Complex(0,1);

8.5.7 父类和子类(Superclasses and Subclasses)

在 Java, C++ 等 OO 语言中，都有严格的类层次结构。在 JavaScript 中，使用基于原型扩展的继承方法代替了基于类的继承。类似的继承体系也是可以实现的。比如，Object 类是最普通的，也就是最基础的类。而其他的都是他的一些特殊的版本或者说子类。可以说 Object 是所有内建的子类的父类。

我们已经知道了对象通过其 constructor 的原型来继承属性。那么他们如何继承的 Object 类的属性呢？别忘了，prototype 对象本身也是一个 Object， 是通过 Object() 这个 constructor 创建的。这说明 prototype 对象自身从 Object.prototype 继承属性！
所以，上面例子里提到的 Complex 类，会从 Complex.prototype 继承属性；而 Complex.prototype 本身又从 Object.prototype 继承属性。因此实际上 Complex 类是从两者都继承属性。当你要查找一个 Complex 对象的属性时，首先被查找的是对象本身，如果找不到，然后是 Complex.prototype, 如果还找不到，最后是 Object.prototype.

需要注意的是，因为 Complex.prototype 在 Object.prototype 之前被搜索，所以前者的属性会覆盖或者隐藏后者的同名属性。比如 toString() 就会覆盖掉。

以上展示的都是典型的 JavaScript 编程方法。通常来说，不太可能需要创建一个复杂的类库体系。当需要的时候，我们也可以创建这样的子类。具体方法就是将子类的 prototype 设置为父类的一个实例就可以了。例子如下：

// This is the constructor for the subclass.
function MoreComplex(real, imaginary) {
    this.x = real;
    this.y = imaginary;
}


// We force its prototype to be a Complex object. This means that
// instances of our new class inherit from MoreComplex.prototype,
// which inherits from Complex.prototype, which inherits from
// Object.prototype.
MoreComplex.prototype = new Complex(0,0);


// Now add a new method or other new features to this subclass.
MoreComplex.prototype.swap = function(  ) {
    var tmp = this.x;
    this.x = this.y;
    this.y = tmp;
} 

这样做有一个缺点：
因为明确指定了 MoreComplex.prototype 的原型对象，我们覆盖了 JavaScript 提供的默认的那个原型对象，同时丢弃了那个 constructor 属性。这个时候 MoreComplex 类的 constructor 属性是从父类继承来的，而不是他自己应该有的那个。一个解决办法是明确的去指定该属性：

MoreComplex.prototype.constructor = MoreComplex; 

注意：在 JavaScript 1.1 中 constructor 属性是只读的，不能像上面这样设置。