动图学 JavaScript 之：原型继承

前言

你是否曾思考为什么我们能使用 JS 中的一些内置属性和方法，比如 .length，.split()，.join()？我们并没有显式地声明它们，那么究竟它们从哪里来的呢？可不要说什么“那是 JS 中的魔法！”。其实这些都因为一个叫做 原型继承（prototypal inheritance） 的东西。它太棒啦，你平时也经常会用到，只不过可能没有注意！

构造函数

我们经常需要创建很多相同类型的对象。想象一下我们有个网站，上面都是狗狗~

对于每个狗狗来说，我们需要一个对象来表示它！为了不每次都新创建一个对象，就需要写一个构造函数（稍后再说 ES6 中的类哈~）。有了构造函数，就可以用 new 关键字来创建狗狗的 实例（instance） 了。

每只狗都有一个 名字（name），品种（breed），颜色（color） 和一个 吠（bark） 方法。

当我们创建了这个 Dog 构造函数，它并不是我们创建的唯一对象（要知道函数也是对象）。自动地，我们创建了另一个 prototype 对象。默认情况下，这个对象有一个 constructor 属性，指向的就是我们的 Dog 构造器。

这个在 Dog 构造器上的 prototype 属性是不可枚举的，意味着当你尝试访问对象属性时，该属性不会显示。但是它仍然在那里！

原型继承

好吧~那么为什么需要有该属性对象呢？首先，让我们来创建几只狗狗。简单起见，我们就叫它们 dog1 和 dog2。dog1 叫 Daisy，是一只可爱的拉布拉多（Labrador）！dog2 叫 Jack，是一只勇敢的杰克罗素犬（Jack Russell）~

让我们将 dog1 打印到控制台，然后展开它的属性:

可以看到我们添加的属性有：name，breed，color 和 bark，但是快看，还有一个 __proto__ 属性！它也是不可枚举的，所以通常我们在获取对象属性的时候也看不到它。让我们展开看看：

是不是看起来和 Dog.prototype 一样哈！你猜怎么着，这个 __proto__ 就是对 Dog.prototype 的引用。这就是 原型继承 的全部内容：构造函数创造的每个实例都能够访问构造函数的原型。

原型继承的好处

那么为什么这很酷？有时候我们拥有每个实例共享的属性。比如 bark 方法：它在每个实例中都是相同的，那为什么每次创建新实例都要新建一个 bark 方法，很明显这样会浪费内存。相反地，我们可以将 bark 方法添加到 Dog.prototype 上去！

这样每当我们访问实例的属性时，引擎首先检查该属性在实例上是否定义，如果没有找到，就会通过 __proto__ 属性，顺着原型链 继续查找。

不止是一层

这只是一个步骤，其实可以包含多个步骤！如果继续进行下去，你可能会注意到，当我展开 Dog.prototype 的 __proto__ 对象时，我没有包含一个属性。由于 Dog.prototype 自己也是一个对象，这意味着它实际上是 Object 构造函数的实例。这意味着 Dog.prototype 也有一个 __proto__ 属性，并且指向了 Object.prototype 。