ES6 中的 Class 语法是基于 ES5 中的构造函数的，但它有一些新的特性，包括继承、静态方法和 getters/setters。本文将详细介绍 ES6 中 Class 语法与 ES5 中构造函数的对比，以及如何使用 Class 语法编写更加优雅的代码。
ES5 构造函数
在 ES5 中，我们通过构造函数来创建对象。构造函数与普通函数的区别在于构造函数需要使用 new 关键字来创建对象。以下是一个简单的例子：
-- -------------------- ---- ------- -------- ------------ ---- - --------- - ----- -------- - ---- - ------------------------- - ---------- - ------------------- -- ---- -- - - ----------- - --- ------ - --- ------------- ---- ------------------ -- ------ -- ---- -- ---
在构造函数中，我们通过 this 关键字将值赋给当前对象。同时，在构造函数的 prototype 属性中定义的方法将会成为该类型的所有实例所共享的方法。
ES6 Class
ES6 的 Class 语法可以看作是构造函数的语法糖。以下是一个等价的 Class 定义：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ---------------
-
-
--- ------ - --- ------------- ----
------------------ -- ------ -- ---- -- ---在 Class 中，我们使用 constructor 来定义构造函数。与 ES5 中的构造函数类似，我们通过 this 关键字将值赋给当前对象。在 Class 中定义的方法也会成为该类型的所有实例所共享的方法。
除此之外，Class 还支持继承和静态方法的定义。以下是一个继承的例子：
-- -------------------- ---- -------
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
------------------- -- ---- -- ------------ --- - -- -------- ----------------
-
-
--- ------- - --- ---------------- --- --------- ----------
------------------- -- ------ -- ---- -- ----- --- - -- -------- -------- -------在这里，我们使用 extends 关键字来继承父类，并使用 super 关键字来调用父类的构造函数。我们也可以在子类中重写父类中定义的方法或添加新的方法。
Class 还支持静态方法的定义。静态方法是属于该类型本身而不是实例的方法，可以通过类型名来调用。以下是一个静态方法的例子：
class Utils {
static add(a, b) {
return a + b;
}
}
console.log(Utils.add(1, 2)); // 3在这里，我们使用 static 关键字来定义静态方法。静态方法不需要使用 this 关键字，可以直接访问该类型中的其他静态属性或方法。
总结
ES6 中的 Class 语法相比于 ES5 中的构造函数更加优雅，支持继承、静态方法和 getters/setters 等特性。通过使用 Class 语法，我们可以编写更加模块化和可读性高的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492c4c948841e9894092053