JavaScript面向对象之Prototypes和继承

答案：一、前言 

本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继承做了详细的分析和阐述，是理解JS OO 的佳作之一。翻译不好的地方望大家修改补充。 

二、正文 
JavaScript中的面向对象不同于其他语言，在学习前最好忘掉你所熟知的面向对象的概念。JS中的OO更强大、更值得讨论(arguably)、更灵活。 

1.类和对象 
JS从传统观点来说是面向对象的语言。属性、行为组合成一个对象。比如说，JS中的array就是由属性和方法（如push、reverse、pop 等)组合成的对象。 
复制代码 代码如下:
 
var myArray = [1, 2]; 
myArray.push(3); 
myArray.reverse(); 
myArray.pop(); 
var length = myArray.length; 
 
问题是：这些方法（如push)从哪里来的？一些静态语言（比如JAVA）用class来定义一个对象的结构。但是JS是没有”class"（classless）的语言，没有一个叫做“Array"的类定义了这些方法给每个array去继承。因为JS是动态的，我们可以在需要的时候随意的往对象中添加方法。例如，下面的代码定义了一个对象，该对象表示二维空间中的坐标，里面有一个add方法。 
复制代码 代码如下:
 
var point = { 
x : 10, 
y : 5, 
add: function(otherPoint) 
{ 
this.x = otherPoint.x; 
this.y = otherPoint.y; 
} 
}; 
 
我们想让每一个point对象都有一个add方法。我们也希望所有的poin对象共享一个add方法，而不必把add方法加到所有的point对象当中。这就需要让prototype登场了。 

2.关于Prototypes 
JS中每一个对象都有一个隐含的属性（state）——对另一个对象的引用，称为对象的prototype.我们上面创建的array和point当然也都含有各自prototype的引用。prototype引用是隐含的，但是它是ECMAScript已实现的，允许我们使用对象的_proto_(在Chrome中）属性来获取它。从概念上理解我们可以认为对象和prototype的关系就像下图所表示的： 

作为开发者，我们将用Object.getPrototypeOf 函数来替代_proto_属性来查看对象的prototype引用。在写这篇文章的时候，Object.getPrototypeOf这个函数已经在Chrome,firefox,还有IE9中提供了支持。在未来还会有更多的浏览器来支持这一特性，这已经是ECMAScript的标准之一。我们可以用以下代码来证明myArray和我们之前创建的point对象确实引用了两个不同的prototype对象。 

复制代码 代码如下:
 
Object.getPrototypeOf(point) != Object.getPrototypeOf(myArray); 
 

在文章接下来的部分，我还将使用到_proto_，主要是因为_proto_在图示和句子里里比较直观。但要记住这不是规范的，Object.getPrototypeOf才是用来获取对象prototype的推荐方法。 

2.1是什么使Prototypes如此特别？ 

我们已经知道了array的push方法来自myArray的prototype对象。图2是Chrome中的一个截图，我们调用Object.getPrototypeOf方法来取得myArray的prototype对象。 

图 2 

注意到myArray的prototype对象里包含了很多方法，比如push、pop还有reverse这些我们在开头代码里使用过的。prototype对象才是push方法的唯一拥有者，但这个方法是如何通过myArray调用到的呢？ 
复制代码 代码如下:
 
myArray.push(3); 
 
要想明白它是怎样实现的，第一步是认清Protytype一点儿不特殊。Prototype就是一些对象。我们可以给这些对象添加方法、属性，像其他任何的JS对象一样。但同时Prototype也是一个特殊的对象。 

Prototype的特殊是因为下列规则：当我们通知JS我们想要在一个对象上调用push方法或是读取某个属性的时候,解释器（runtime)首先去寻找这个对象本身的方法或属性。如果解释器没有找到该方法（或属性）就会沿着_proto_引用去寻找对象的prototype中的各个成员。当我们在myArray中调用push方法，JS没有在myArray对象中找到push，但是在myArray的prototype对象中找到了push，即调用了该push方法（图3）。 

图 3 

我所描述的这种行为本质上就是对象本身继承了 它的prototype中的所有方法和属性。我们在JS中不需要用class来实现这种继承关系。即，一个JS对象从它的prototype中继承特性。 

图3还告诉我们每个array对象都能维护自己的状态（state)和成员。如果我们需要myArray的length属性，JS将从myArray中找到length的值而不会去prototype中去寻找。我们能运用这个特性来“override"一个方法，即，将需覆盖的方法（像push）放到myArray自己的对象中。这样做就可以有效的将prototype中的push方法隐藏掉。 

3.共享Prototype 
Prototype在JS中真正神奇的地方是多个对象能引用同一个prototype对象。比如，我们创建两个数组： 
复制代码 代码如下:
 
var myArray = [1, 2];var yourArray = [4, 5, 6]; 
 
这两个数组将共享一个相同的prototype对象，下面的代码将返回true 
复制代码 代码如下:
 
Object.getPrototypeOf(myArray) === Object.getPrototypeOf(yourArray); 
 
如果我们在两个数组中调用push方法，JS将调用他们共同的prototype中的push。 

Prototype对象在JS中给我们这种继承的特性，它们也允许我们共享方法的实现。Prototype也是链式的。换句话说，prototype是一个对象，那么prototype对象也可以拥有一个指向别的prototype对象的引用。从图2中可以看到prototype的_proto_属性是一个不为null的值也指向另外一个prototype.当JS开始寻找成员变量的时候，比如push方法，它将沿着这些prototype的引用检查每一个对象直到找到这个对象或达到链的尾部为止。这种链的方式更增加了JS中继承和共享的灵活性。 

接下来你也许会问：我怎样设置自定义对象的prototype引用？比如，我们之前创建过的对象point，我们怎样加入一个add方法到prototype对象中，让所有的point对象都能继承它？在我们回答这个问题之前，我们先了解一下JS中的函数. 

4.关于Funciton 
函数在JS中同样也是对象。函数在JS中有很多重要的特性，在此文章中我们不能一一列举。但像把一个函数赋值给一个变量或是将一个函数当做另外一个函数的参数在当今的JS编程中是很基础的方式。 

我们需要关注的是：因为函数是对象，所以它拥有方法、属性和一个prototype对象的引用。我们一起讨论一下下面代码的含义： 
复制代码 代码如下:
 
// this will return true: 
typeof (Array) === "function" 
// and so will this: 
Object.getPrototypeOf(Array) === Object.getPrototypeOf(function () { }) 
// and this, too: 
Array.prototype != null 
 
第一行代码证明Array在JS中是一个函数。待会儿我们将看到怎样调用Array函数来创建一个新的array对象。 <

上一个：Javascript的各种节点操作实例演示代码
下一个：jquery 中多条件选择器,相对选择器,层次选择器的区别