回页首

面向对象的 JavaScript

上一小节介绍的许多概念都是称为基于类的面向对象编程的特定 OOP 范式所专用的。但是，并非所有编程语言都遵守这个范式。另一种常见 OOP 类型是基于原型的面向对象编程，JavaScript 语言中就使用该范式。在本小节中，您将了解 JavaScript 的面向对象实现，一个用例，以及您可能会遇到的一些障碍，特别是当您来自一个基于类的 OOP 环境时。

JavaScript 并不只是一种基本脚本语言

当 JavaScript 首次流行时，它主要用作一种在基本 web 页面上执行一些简单技巧的方法。大多数 JavaScript 用户都不是软件开发人员，他们是图形或 web 设计师，他们可能拥有丰富的 HTML 经验，但他们的编程语言知识很少，甚至没有。HTML 本身在支持生成动态效果方面的功能是非常有限的，而这正是 JavaScript 优势所在。然而，大多数设计师并不实际学习如何用 JavaScript 编程，而只是尽量找到它们需要的代码段，仅仅学习调试该代码段以满足自身需要的所需的知识，然后使用那段小代码。当设计师这样做过几次之后，他们就会误以为他们自己的 JavaScript 水平不错了。

在 web 早期，JavaScript 的功能很有限。但是，它现在已经成长为一个成熟的、功能齐全的编程语言，它不再只用于为网站编写一些简单技巧，而是用于驱动整个富互联网应用程序。事实上，作为一种语言，JavaScript 今天还在以各种方式应用。例如，CouchDB 面向文档数据库管理系统就使用 JavaScript 函数来查询数据库中的数据。

许多 Java 开发人员（以及使用其他更传统的编程语言的开发人员）可能会轻视 JavaScript，认为它是一种基本脚本语言。尽管 JavaScript 已经发展得非常强大，认为它只是用于在网站上执行一些小技巧的误解仍然存在。这是因为大多数使用 JavaScript 的 web 开发人员将使用 jQuery、Prototype 或 Dojo 这样的库来避免为它们编写 JavaScript 的工作。事实上，很多 web 开发人员可能被视为编写 jQuery 应用程序的专家，但对于 JavaScript 本身，他们实际上几乎没有什么专长。很多这样的开发人员没有意识到的是，JavaScript 实际上非常强大，且包含开箱即用的面向对象特性。在本小节中，您将了解这些特性。

基于原型的 OOP

JavaScript 实现的面向对象编程类型不同于 Java™ 代码中使用的类型。尽管 Java 编程基于一个基于类的 OOP 模型，但 JavaScript 基于一个不怎么基于类的 OOP 模型，这个模型称为基于原型的对象方向。对象只在需要的时候才被声明，而不是定义一组用于创建对象的类模板。当一个对象需要从另一个对象继承特性时，它可以简单地克隆一个原型对象的特性。原型 OOP 的一个关键优势是，对象原型可以在运行时修改，这意味着对象结构的定义不是严格的。大多数基于类的 OOP 编程语言不允许类在运行时动态改变（但有几个例外，比如 Perl、Python 和 Ruby）。

在下一小节中，您将学习如何使用原型模型在 vanilla JavaScript 中进行 OOP。

纯 JavaScript 中基本的面向对象示例

在本系列第 1 部分中，您学习了 Firefox 的 Firebug 插件，以及如何使用控制台来运行 JavaScript 代码，而不必编辑、保存和运行文件并在一个 web 页面上执行事件。打开 Firefox 并启动 Firebug。您当前所处的 web 页面无关紧要，因为这个示例不需要任何特殊 JavaScript 库。

您将创建一个充当一个对象原型的函数，而不是在 JavaScript 中声明类。然后您可以使用 new 关键字创建这个对象的一个实例。要查看这样一个示例，将清单 1 中的代码输入 Firebug 控制台：

清单 1. JavaScript 中的一个基本对象原型

function Car() { }

var myCar = new Car();
console.log(myCar);

这应该在控制台日志中生成以下输出：Object {}。

实际上，您可以单击这个输出，它将把您带到 Firebug 的另一部分，您可以在那里检查一个对象的各个属性。如果您单击这个特殊对象，您将看到一条消息 “There are no properties to show for this object”。

这段代码的实际作用是定义一个对象函数Car()。然后，它使用 new 的操作符实例化一个对象，最后，它将该对象输出到 Firebug 控制台，您可以在那里进一步检查它。但是，这个对象还不够完善，因此，我们让它更有趣一些（见清单 2）。

清单 2. 定义您的对象中的一个成员变量

function Car() { }
Car.prototype.current_speed = 0;

var myCar = new Car();
console.log(myCar);

这次，控制台日志将输出更有趣的内容：Object { current_speed=0 }。

单击输出将把您带到 DOM 检查器窗口，您将在该窗口中看到属性current_speed及其值0。 使用Car原型函数创建的任何对象将默认拥有一个值为 0 的current_speed属性。

如果不能加速，一辆汽车将毫无用处，因此我们向这个原型添加一个方法（见清单 3）。

清单 3. 向原型添加一个方法

function Car() { }
Car.prototype.current_speed = 0;
Car.prototype.accelerate = function(increment) {
    this.current_speed += increment;
}

var myCar = new Car();
myCar.accelerate(30);
myCar.accelerate(20);

console.log(myCar);

控制台输出应该生成以下内容：Object { current_speed=50 }。

单击输出不仅将向您显示current_speed属性，还将显示该对象可用的新accelerate方法。在清单 3 中的示例中，您能看到如何调用一个对象的方法：使用圆点表示法，比如object.method(arg[0],arg[1],...,arg[N])；在本例中为myCar.accelerate(20)。这种表示法可用于访问一个对象的任何属性。将行console.log(myCar)更改为console.log(myCar.current_speed)，您将看到控制台输出显示值50，而不是实际对象本身的一个表示。

下面，我们讨论如何在 JavaScript 中实现一个构造器函数。构造器是对象被实例化之后立即调用的函数。当您创建对象函数时，这翻倍（double）成为一个构造器函数。清单 4 展示了一个应用示例。

清单 4. 添加一个构造器函数体

function Car(reg_no) { 
    this.reg_no = reg_no;
    console.log('Car with registration no. '+this.reg_no+' created.');
}

Car.prototype.reg_no = '';
Car.prototype.current_speed = 0;
Car.prototype.accelerate = function(increment) {
    this.current_speed += increment;
}

var myCar = new Car('10C500');
myCar.accelerate(30);
myCar.accelerate(20);

console.log(myCar.current_speed);

在清单 4 中，Car的constructor函数接受一个参数作为其注册编号。然后，它将对象实例的注册编号设置为该参数值，并向 Firebug 控制台输出一条消息，确认实例已被创建。Firebug 控制台窗口中应该显示如清单 5 所示的输出。

清单 5. 输出

Car with registration no. undefined created.
50

为演示如何在一个对象原型上实现继承性，我们来创建一个更高级的Car原型，并添加加速、减速和换挡三个方法（见清单 6）。

清单 6. 一个更完整的Car原型

function Car(reg_no) { 
    this.reg_no = reg_no;
}

Car.prototype.reg_no = '';
Car.prototype.current_speed = 0;
Car.prototype.current_gear = 0;

Car.prototype.accelerate = function(increment) {
    this.current_speed += increment;
}
Car.prototype.decelerate = function(decrement) {
    this.current_speed -= decrement;
}
Car.prototype.increaseGear = function() {
    this.current_gear++;
}
Car.prototype.decreaseGear = function() {
    this.current_gear--;
}

现在我们以此为基础创建一个称为ATCar的继承对象原型，该原型描述一辆自动挡汽车。这个示例并不是一辆完美的汽车，因为它基于速度而不是 RPM 进行换挡，但它能够帮助您理解原型 OOP 中的继承性和多态性（见清单 7）。

清单 7. 一个ATCar对象原型，继承自Car

function ATCar(reg_no) {
    Car.call(this,reg_no);
}
ATCar.prototype = new Car();
ATCar.prototype.constructor = ATCar;

ATCar.prototype.accelerate = function(increment) {
    Car.prototype.accelerate.call(this,increment);
    if(increment >= 10) this.increaseGear();
}

ATCar.prototype.decelerate = function(decrement) {
    Car.prototype.decelerate.call(this,decrement);
    if(this.current_speed === 0) this.current_gear = 0;
    else if(decrement >= 10) this.decreaseGear();
}

您需要注意的第一件事是：构造器使用Car对象原型上的 call 函数。只要一个 ATCar 被实例化，这通常会调用父原型定义上的构造器。这让您确信您实现了继承性，这样，ATCar原型就不需要了解Car对象原型的内部工作原理。下面，您将把ATCar函数的 prototype 属性设置为Car函数的一个新实例。本质上，这将告知 JavaScript ：您想在ATCar原型中继承Car原型的属性和方法。

在清单 7 中，您还覆盖了accelerate和decelerate方法，这样，在自动挡汽车上，加速和减速将导致自动换挡。在这两个方法中，您首先调用父原型的方法，这样您就不必重新实现实际加速，从而不必编写重复代码。由于这个示例只有一行代码，因此这在本例中并不那么重要，但是想象一下，如果这是一个复杂的函数，重复编写它将有多么痛苦！

最后，我们看看这个示例的应用情况（见清单 8）。

清单 8. 使用自动挡汽车原型

var myCar = new ATCar('10C500');
myCar.accelerate(30);
myCar.accelerate(20);
myCar.decelerate(5);

console.log(myCar);

这将输出已经创建的新对象。单击该对象查看细节。结果应该如图 1 所示。

图 1.myCar对象属性的 Firebug 视图

本文的主要目的是展示如何使用 Dojo 的基于类的 OOP 模拟特性，因此，上述内容只是纯 JavaScript 实现对象方向的原型途径的一个简介。要了解关于基于原型的 OOP 的更多信息，请参阅参考资料。

原型 OOP 的问题

对于基于原型的面向对象编程比基于类的 OOP 好还是差，不同的人有不同的观点。根据您作为一个程序员的偏好，赞成或反对的观点都很容易驳斥。基于原型的对象方向的一个最常见的问题 — 特别是在 JavaScript 中 — 是许多开发人员对它缺乏基本了解。但是，随着对 JavaScript 有深入理解的开发人员的人数逐步上升，这个问题将不再是问题。尽管如此，许多熟悉基于类的 OOP 语言（比如 Java 语言）的程序员仍然乐于坚持使用一个基于类的系统，Dojo 提供了一些很棒的特性来模拟这种类型的系统，以便您以类似的方式编写 JavaScript 代码。下一节解释如何使用 Dojo 的这些特性在 JavaScript 中创建基于类的应用程序。

dojo.declare("Car",null,{

});

var myCar = new Car();
console.log(myCar);