动图学 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 。

比如说 .toString() 这个方法。它是定义在 dog1 上么？明显不是。那么在 Dog.prototype 上有么？也没有！其实它是定义在 Dog.prototype.__proto__ 上，即 Object.prototype 上。

ES6 中的类

前面我们使用的是构造函数的方式（function Dog() { ... }），实际上 ES6 中提供了构造函数和原型的更简单的语法：类（Classes）

类只是 构造函数 的 语法糖。一切都是以相同的方式工作！

我们使用 class 关键字来定义类。每个类都有一个 constructor 函数，基本上对应了 ES6 中构造函数的写法。而我们想要添加到原型 prototype 上的属性和方法，都可以在类中直接定义。

关于类的另一个好处就是，我们可以轻松地 扩展（extend） 其他的类。

类的继承

假如我们要添加另一种狗，吉娃娃（Chihuahuas）狗。为了便于理解，我们只添加一个 name 属性。但是吉娃娃也可以有自己特殊的叫声！和普通的叫声不同，吉娃娃的叫声可能比较小~

在子类中，我们可以通过 super 关键字访问到父类的构造方法。参数当然也参考父类的构造方法传入。

myPet 可以访问到 Chihuahua.prototype 和 Dog.prototype （当然也有 Object.prototype ，因为 Dog.prototype 是个对象）。

由于 Chihuahua.prototype 上有一个 smallBark 方法，Dog.prototype 上有一个 bark 方法，所以我们可以在 myPet 实例上同时访问到 smallBark 和 bark 方法。

原型的终点

现在，你可以想象，原型链不会永远持续下去。最终会有一个原型等于 null 的对象：它就是 Object.prototype。如果我们试图访问在本地或者原型链上都不存在的属性，最终会返回 undefined。

Object.create

尽管上面已经解释了构造函数和类，其实还有一个为对象添加原型的方式是使用 Object.create 方法。通过这个方法，我们创建了一个新对象，并且指明了这个对象的原型是什么。

只需要将一个已经存在的对象传入 Object.create 方法中。创建出来的对象就是以我们传入的对象作为原型。看例子：

我们打印一下 me ，可以看到：

我们并没有为 me 对象添加其他的属性，但是访问它却有一个 __proto__ 属性，并且这个属性指向的是具有 name 和 age 的对象 person。而 person 这个对象的 __proto__ 属性指向的是 Object.prototype。

全文就到这里啦，希望对你学习原型继承有帮助~

本文是翻译的系列文章：

动图学 JS 之：声明提升（Hoisting）
动图学 JS 之：作用域链（Scope Chain）
动图学 JS 之：事件循环（Event Loop）
动图学 JS 之：JavaScript 引擎原理
动图学 JS 之：原型继承【本篇】

参考链接

JavaScript Visualized: Prototypal Inheritance

本文首发于公众号：码力全开（codingonfire）

本文随意转载哈，注明原文链接即可，公号文章转载联系我开白名单就好~