在 JavaScript 的新标准 ES6 中引入了一种新的语法糖叫做 class。这种语法糖带来了代码可读性的增强，让 JavaScript 开发更接近面向对象编程的规范。在学习和使用 class 语法糖之前，我们需要先了解一下它与 ES5 的对比。
ES5 中的构造函数
在 ES5 中，我们使用构造函数来创建一个类。构造函数通常定义在一个函数表达式里面，比如：
-- -------------------- ---- ------- --- ------ - -------------- ---- - --------- - ----- -------- - ---- -- -------------------------- - ---------- - --------------- ---- -- - - --------- - -- --- - -- - - -------- - - ----- ------- -- --- --- - --- ----------------- --- ----------------
在这个例子中，Animal 就是一个构造函数。我们使用 new 运算符可以创建出一个实例 dog。然后我们可以访问 dog 的属性和方法。
ES6 中的 class
在 ES6 中，我们可以使用 class 语法糖来创建一个类。比如：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
----------- -
--------------- ---- -- ------------- --- - -- ----------- ----- -------
-
-
----- --- - --- ----------------- ---
----------------在这个例子中，我们可以看到定义类的方式变得更加简洁易懂。我们用 class 关键字定义 Animal 类，然后在类的构造函数 constructor 中定义类的属性。类的方法直接定义在类里面，不需要使用 prototype。
ES5 与 ES6 的对比
下面我们将 ES5 中的代码改写成 ES6 中的代码，进行一下对比。
-- -------------------- ---- -------
-- ---
--- ------ - -------------- ---- -
--------- - -----
-------- - ----
--
-------------------------- - ---------- -
--------------- ---- -- - - --------- - -- --- - -- - - -------- - - ----- -------
--
--- --- - --- ----------------- ---
----------------
-- ---
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
----------- -
--------------- ---- -- ------------- --- - -- ----------- ----- -------
-
-
----- --- - --- ----------------- ---
----------------我们可以看到，在 ES6 中，类的定义变得更加简洁易懂。同时，我们也可以使用一些新的语法特性来简化代码。比如：
- 使用箭头函数来定义方法，可以省略掉
function关键字和return语句。 - 使用模板字符串来拼接字符串，可以省略掉
+运算符和字符串引号。
学习和指导意义
在学习和使用 class 语法糖时，我们需要注意以下几个点：
class 语法糖并不是 JavaScript 在语言层面上支持面向对象编程的证明。JavaScript 依然是一门基于原型的语言。class 只是一个语法糖，它使得 JavaScript 代码更易读和易懂。
在 ES6 中，使用
var声明的变量会有 function-scoped 的作用域，并存在 hoisting 的现象。而使用let和const声明的变量会有 block-scoped 的作用域，并不存在 hoisting。所以，建议使用let和const声明变量。在 ES6 中，类的方法默认是不可枚举的。这意味着，我们无法通过
for...in循环遍历类的方法。如果需要让类的方法可枚举，可以使用Object.defineProperty()方法或者Reflect.defineProperty()方法来进行定义。
在使用 class 语法糖时，我们可以更加容易地创建和维护类的结构。同时，我们也需要注意 class 语法糖的一些用法和特性，避免由此产生的问题和错误。
示例代码
下面是一个使用 class 语法糖实现的简单计算器的例子代码：
-- -------------------- ---- -------
----- ---------- -
------- - -- -- ----------
-------- -
------------ -- ----
------ -----
-
------------- -
------------ -- ----
------ -----
-
------------- -
------------ -- ----
------ -----
-
----------- -
------------ -- ----
------ -----
-
----------- -
------ -------------
-
-
----- ---- - --- -------------
----- ------ - ----
-------
------------
------------
----------
-------------
-------------------- -- -----在这个例子中，我们使用 class 语法糖定义了一个 Calculator 类。这个类有四个方法，分别用来做加法、减法、乘法和除法。getResult() 方法用来返回计算结果。
在计算过程中，我们可以使用链式的调用方法来简化代码。
注意，在这个例子中，我们使用了 class 的一个新特性：私有属性。使用井号 # 来定义的属性，只能在类内部使用，无法在类外部被访问。这使得我们可以更加规范和安全地使用类的属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c72d31cc0f7239cded1b16
