JavaScript中的原型和继承

368 查看

请在此暂时忘记之前学到的面向对象的一切知识。这里只需要考虑赛车的情况。是的，就是赛车。

最近我正在观看 24 Hours of Le Mans ，这是法国流行的一项赛事。最快的车被称为 Le Mans 原型车。这些车虽然是由“奥迪”或“标致”这些厂商制造的，可它们并不是你在街上或速公路上所见到的那类汽车。它们是专为参加高速耐力赛事而制造出来的。

厂家投入巨额资金，用于研发、设计、制造这些原型车，而工程师们总是努力尝试将这项工程做到极致。他们在合金、生物燃料、制动技术、轮胎的化合物成分和安全特性上进行了各种实验。随着时间的推移，这些实验中的某些技术经过反复改进，随之进入到车辆的主流产品线中。你所驾驶车辆的某些技术，有可能是在赛车原型上第一次亮相的。

你也可以说，这些主流车辆继承了来自赛车的技术原型。

到现在，我们就有讨论 JavaScript 中的原型和继承问题的基础了。它虽然并不像你在 C++、Java 或 C# 中了解的经典继承模式一样，但这种方式同样强大，并且有可能会更加灵活。

有关对象和类

JavaScript 中全是对象，这指的是传统意义上的对象，也就是“一个包含了状态和行为的单一实体”。例如，JavaScript 中的数组是含有数个值，并且包含 push、reverse 和 pop 方法的对象。

var myArray = [1, 2];

myArray.push(3);

myArray.reverse();

myArray.pop();

var length = myArray.length;

现在问题是，push 这样的方法是从何而来的呢？我们前面提到的那些静态语言使用“类语法”来定义对象的结构，但是 JavaScript 是一个没有“类语法”的语言，无法用 Array“类”的语法来定义每个数组对象。而因为 JavaScript 是动态语言，我们可以在实际需要的情况下，将方法任意放置到对象上。例如下面的代码，就在二维空间中，定义了用来表示一个点的点对象，同时还定义了一个 add 方法。

var point = {

x : 10,

y : 5,

add: function(otherPoint) {

this.x += otherPoint.x;

this.y += otherPoint.y;

}

};

但是上面的做法可扩展性并不好。我们需要确保每一个点对象都含有一个 add 方法，同时也希望所有点对象都共享同一个 add 方法的实现，而不是这个方法手工添加每一个点对象上。这就是原型发挥它作用的地方。

有关原型

在 JavaScript 中，每个对象都保持着一块隐藏的状态 —— 一个对另一个对象的引用，也被称作原型。我们之前创建的数组引用了一个原型对象，我们自行创建的点对象也是如此。上面说原型引用是隐藏的，但也有 ECMAScript（JavaScript 的正式名称）的实现可以通过一个对象的__proto__属性（例如谷歌浏览器）访问到这个原型引用。从概念上讲，我们可以将对象当作类似于图1 所表示的对象 —— 原型的关系。

图 1

展望未来，开发者将能够使用 Object.getPrototypeOf 函数，代替__proto__属性，取得对象原型的引用。在本文写出的时候，已经可以在 Google Chrome，FIrefox 和 IE9 浏览器中使用 Object.getPrototypeOf 函数。更多浏览器在未来会实现此功能，因为它已经是 ECMAScript 标准的一部分了。我们可以使用下面的代码，来证明我们建立的 myArray 和点对象引用的是两个不同的原型对象。

Object.getPrototypeOf(point) != Object.getPrototypeOf(myArray);

对于本文的其余部分，我将交叉使用 __proto__和Object.getPrototypeOf 函数，主要是因为 __proto__ 在图和句子中更容易识别。需要记住的是它(__proto__)不是标准，而 Object.getPrototypeOf 函数才是查看对象原型的推荐方法。

是什么让原型如此特别？

我们还没有回答这个问题：数组中 push 这样的方法是从何而来的呢？答案是：它来源于 myArray 原型对象。图 2 是 Chrome 浏览器中脚本调试器的屏幕截图。我们已经调用 Object.getPrototypeOf 方法查看 myArray 的原型对象。

图 2

注意 myArray 的原型对象中有许多方法，包括那些在代码示例中调用的 push、pop 和 reverse 方法。因此，原型对象中的确包括 push 方法，但是 myArray 方法如何引用到呢？

1	myArray.push(3);

了解其工作原理的第一步，是要认识到原型并不是特别的。原型只是普通的对象。可以给原型添加方法，属性，并把他们当作其他 JavaScript 对象一样看待。然而，套用乔治·奥威尔的小说《动物农场》中“猪”的说法 —— 所有的对象应当是平等的，但有些对象（遵守规则的）比其他人更加平等。

JavaScript 中的原型对象的确是特殊的，因为他们遵从以下规则。当我们告诉 JavaScript 我们要调用一个对象的 push 方法，或读取对象的 x 属性时，运行时会首先查找对象本身。如果运行时找不到想要的东西，它就会循着 __proto__ 引用和对象原型寻找该成员。当我们调用 myArray 的 push 方法时，JavaScript 并没有在 myArray 对象上发现 push 方法，而是在 myArray 的原型对象上找到了，于是 JavaScript 调用此方法（见图 3）。

图 3

上面所描述的行为是指一个对象本身继承了原型上的任何方法或属性。JavaScript 中其实不需要使用类语法也能实现继承。就像从赛车原型上继承了相应的技术的车，一个 JavaScript 对象也可以从原型对象上继承功能特性。

图 3 还展示了每个数组对象同时也可以维护自身的状态和成员。在请求得到 myArray 的 length 属性的情况下，JavaScript 会取得 myArray 中 length 属性的值，而不会去读取原型中的对应值。我们可以通过向对象上添加 push 这样的方法来“重写”push 方法。这样就会有效地隐藏原型中的 push 方法实现。

共享原型

JavaScript 中原型的真正神奇之处是多个对象如何维持对同一个原型对象的引用。例如，如果我们创建了这样的两个数组：

1 2	var myArray = [1, 2]; var yourArray = [4, 5, 6];

那么这两个数组将共享同一个原型对象，而下面的代码计算结果为 true：

1	Object.getPrototypeOf(myArray) === Object.getPrototypeOf(yourArray);

如果我们引用两个数组对象上的 push 方法，JavaScript 会去寻找原型上共享的 push 方法。

图 4

JavaScript 中的原型对象提供继承功能，同时也就实现了该方法实现的共享。原型也是链式的。换句话说，因为原型对象只是一个对象，所以一个原型对象可以维持到另一个原型对象的引用。如果你重新审视图 2 便可以看到，原型的 __proto__ 属性是一个指向另一个原型的非空值。当 JavaScript 查找像 push 方法这样的成员时，它会循着原型引用链检查每一个对象，直到找到该成员，或者抵达原型链的末端。原型链为继承和共享开辟了一条灵活的途径。

你可能会问的下一个问题是：我该如何设置那些自定义对象的原型引用呢？例如前面所使用的点对象，如何才能将 add 方法添加到原型对象中，并从多个点对象中继承方法呢？在回答这个问题之前，我们需要看看函数。

有关函数

JavaScript 中的函数也是对象。这样的表述带来了几个重要的结果，而我们并不会在本文中涉及所有的事项。这其中，能将一个函数赋值给一个变量，并且将一个函数作为参数传递给另一个函数的能力构成了现代 JavaScript 编程表达的基本范式。

我们需要关注的是，函数本身就是对象，因此函数可以有自身的方法，属性，并且引用一个原型对象。让我们来讨论下面的代码的含义。

// 这将返回 true：

typeof (Array) === "function"

// 这样的表达式也是：

Object.getPrototypeOf(Array) === Object.getPrototypeOf(function () { })

// 这样的表达式同样：

Array.prototype != null

代码中的第一行证明， JavaScript 中的数组是函数。稍后我们将看到如何调用 Array 函数创建一个新的数组对象。下一行代码，证明了 Array 对象使用与任何其他函数对象相同的原型，就像我们看到数组对象间共享相同的原型一样。最后一行代码证明了 Array 函数都有一个 prototype 属性，而这个 prototype 属性指向一个有效的对象。这个 prototype 属性十分重要。

JavaScript 中的每一个函数对象都有 prototype 属性。千万不要混淆这个 prototype 属性的 __proto__ 属性。他们用途并不相同，也不是指向同一个对象。

ڂ时忘记之前学到的面向对象的一切知识。这里只需要考虑赛车的情况。是的，就是赛车。