第八章 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

例子:
= 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 属性是只读的,不能像上面这样设置。

posted on 2005-04-22 14:09 NeilChen 阅读(...) 评论(...) 编辑 收藏

导航

统计