前言
ES6 作为一个重要的 JavaScript 规范，为 JavaScript 程序员带来了很多新的特性。其中最重要的就是 class 关键字。
ES6 中的 class 拓展了 JavaScript 的语法，使得我们可以更加方便地使用面向对象编程的方式。然而，对于初学者来说，这种新的语法可能会感到有些陌生，比如与原型链的关系。
因此，本文将深入探讨 ES6 中的 class 和 prototype，帮助读者更深入的理解面向对象编程的原理和操作方式。
1. ES6 中的 class
在 ES6 之前，JavaScript 中没有专门用于对象生成的关键字。通常我们使用函数来创建一个对象，然后用 prototypes 来扩展对象的属性和方法。
但是，ES6 中引入了 class 关键字，可以用来更加简单明了地定义对象和类的结构。
与其它面向对象编程语言的 class 关键字略有不同，JavaScript 中的 class 实际上还是构造函数的语法糖，即用 class 定义类的本质还是函数的定义，只不过让我们使用起来更加方便了。
下面是一个基本的 class 的定义：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
--- ------ -
------ --------- - ----------
-
--- ----------- -
--------- - -----------------
-
-- constructor 是一个特殊的方法，用于创建和初始化对象。instance 创建后会调用 constructor 方法。除了 constructor 之外，还有其它的特殊方法，如 getter/setter 方法，抽象方法等，详情可以参考 class。
- get 和 set 的方法名必须是一样的，用于访问变量的属性值，即类似于 Java 中的 getter 和 setter 方法。
现在我们创建一个 Square 实例，并设置其 area 属性值为 64，然后打印出值：
let square = new Square(5); square.area = 64; console.log(square.side); // 输出 8
结合上述代码，我们可以看到 class 的定义语法是更加简单、优雅的，并将相关属性和方法封装在一个体系结构之中。
2. ES6 中的 prototype
在 ES5 中，原型链是 JavaScript 实现类的核心。当我们使用函数生成一个对象时，实际上会生成一个带有一组特殊属性和方法的对象，这些属性和方法可以扩展和重载函数。
这个对象被称为构造函数的 prototype。实际上，所有使用该构造函数创建的对象都会共享该 prototype 对象。
下面是一个使用 prototype 创建对象的示例代码：
-- -------------------- ---- ------- -------- -------------- ------- - --------- - ----- ----------- - ------- - ----------------------- - ---------- - ------ --- - --------- - ------------ -- --- -------- - --- ----------- --- ----------------------------- -- -- --
在上面的代码中，我们创建了一个 Triangle 的构造函数，并在 prototype 上定义了一个 area 方法。在构造函数中，我们初始化了 base 和 height 属性，最后返回的是这个对象的面积。在调用 area 方法时，JavaScript 引擎会先查找实例对象的属性和方法，如果没有找到，则会顺着原型链查找 prototype 对象的属性和方法。
3. class 和 prototype 的关系
在 ES6 中，我们可以使用 class 创建一个类，但是该类的本质实际上还是一个函数。在这个函数创建的对象中，也有一个对应的 prototype 对象。
因此，在 class 中定义的属性和方法也可以被复写或者访问。我们也可以通过 super 关键字调用父类定义的属性和方法。
下面是一个使用 class 和 prototype 的演示代码：
-- -------------------- ---- -------
----- ----- -
----------------- -
--------- - -----
-
------- -
-------------- -- - ----------------
-
-
----- --------- ------- ----- -
------------------- ------ -
-------------------
----------- - -------
---------- - ------
-
--- ------ -
------ ----------- - -----------
-
--- ----------- -
----------- - -----------------
---------- - -----------------
-
------- -
--------------
--------------- ---- -- ----------------
-
-
--- --------- - --- ------------ ---
-------------- - ---
------------------在上述代码中，我们首先定义了一个 Shape 的 class，其中包含了一个 print() 方法。接下来，我们又定义了一个 Rectangle 的 class，继承自 Shape。在 Rectangle 中我们定义了一个 area 属性和 getter/setter 方法。在 print() 方法中，我们调用了超类的方法，并打印了 rectangle 的内部状态。
最终，我们创建了一个 Rectangle 的实例，将它的 area 设为 25 并输出了这个实例的信息。
总结
本文深入探讨了 ES6 中的 class 和 prototype 的关系。我们了解了 class 实际上是构造函数的语法糖，用以方便生成一个对象类的结构。并且，我们还详细讲解了 prototype 的基本原理和使用方法，以及 class 和 prototype 之间的关系。
深入理解 class 和 prototype 可以让我们更好的使用面向对象编程，更加熟练掌握 JavaScript 等编程语言的特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6538bde67d4982a6eb1ba495