ECMAScript 2021（ES12）中如何使用 Class 构造函数来创建对象
在 JavaScript 中，创建对象有多种方式。其中一种常用的方式是使用 Class 构造函数。ES6 引入了 Class 关键字来简化这种方法。在 ES6 中通过 Class 关键字可以创建一个对象的“模板”，并且可以通过这个模板来“制造”出很多个拥有相同特征和属性的对象。
在 ES6 之前，JavaScript 没有原生的类概念。但是通过原型继承可以实现类似“类”的特性。ES6 引入了 Class 关键字让 JavaScript 支持面向对象编程中类的概念。ES6 中的 Class 其实真正的内部实现还是基于原型继承，只是外部语法上来看更像是面向对象编程的类。
ES6 中定义类的格式如下：
-- -------------------- ---- -------
----- --------- -
------------- -
-- ------
-
--------- -
-- ---
-
--------- -
-- ---
-
-根据语法规则，Class 名称首字母需要大写。其中 constructor 是 Class 的构造函数，每次 new 一个对象时都会执行这个函数。而其他 method 是 Class 的方法。
在 ES6 中，我们可以使用以下方式来创建一个类：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
----------- -
------------------- -- ------ -----------
-
-
----- --- - --- --------------
---------------- -- ------ -- ------ --------ES6 Class 关键字是新引入的语法，许多浏览器和 nodejs 都支持。但是在某些环境下，特别是在一些低版本的浏览器和 nodejs 中可能并不支持，此时需要使用 babel 来将 ES6 代码转化为 ES5，同时支持大部分浏览器和 nodejs。
babel 是 JavaScript 代码转换工具，可以将 ES6 代码转化为 ES5 代码。使用 babel 来转换 Class 关键字示例代码如下：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
----------- -
------------------- -- ------ -----------
-
-
----- --- - --- --------------
---------------- -- ------ -- ------ --------经过 babel 转换后的代码如下：
-- -------------------- ---- -------
---- --------
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
--- ------ - -------- ------------ -
--------------------- --------
--------- - -----
--
-------------------------- - -------- -- -
------------------- -- ------ -----------
--
--- --- - --- --------------
---------------- -- ------ -- ------ --------可以看到，经过转换后的代码和 ES5 的方式创建对象很相似，使用原型链定义方法。但是在代码中仍然使用了类似 ES6 的 class 类型定义，可以更清晰地说明代码中的目的。
总结
Class 作为一种新型的语法语言，目的是简化JavaScript中的类创建过程。在基于原型模式的面向对象编程中，Class 在语义上更近似于现有面向对象编程语言中的类。它为 JavaScript 带来了实现面向对象编程的新方式，对于前端开发人员来说可以更加方便快捷地创建对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb02dd5ad90b6d041e4efb