在 ECMAScript 2021 (ES12) 中，我们可以使用类静态属性来添加类的属性，而不需要实例化类。静态属性在类本身上设置，而不是在实例上设置。这使得静态属性在ES12中变得更加简单和直观。
在本文中，我们将探讨如何在ES12中创建一个静态属性，并提供一些有趣和实用的示例，使你更好的了解如何运用它。
创建静态属性
我们可以使用static关键字来创建一个静态属性。下面是一个简单的ES12类，展示了如何在类上设置静态属性：
class MyClass {
static myStaticProperty = "Hello world";
}在上面的示例中，我们在MyClass上创建了一个静态属性 myStaticProperty。我们可以访问这个静态属性，而不需要实例化类。
console.log(MyClass.myStaticProperty); // Output: "Hello world"
接下来，我们会看到如何更好的运用静态属性，以及它们如何与其他功能一起使用。
常量静态属性
我们也可以使用static关键字来创建一个在整个应用程序中都是固定不变的常量，虽然这样做在ES6之前也是可以实现的，但在ES12中可以更加优雅和简单。
class MyClass {
static MY_CONSTANT = 'my-value';
static ANOTHER_CONSTANT = 'another-value';
}在上述示例中，我们可以在整个应用程序中使用常量 MY_CONSTANT 和 ANOTHER_CONSTANT。
静态方法
静态方法允许我们定义仅在类本身上运行的方法。如下所示，我们可以使用static关键字来创建一个静态方法。
class MyClass {
static myStaticMethod() {
return 'Hello world';
}
}在上述示例中，我们在 MyClass上定义了myStaticMethod()。我们可以在不实例化类的情况下调用这个静态方法，只要在方法名后面加上括号即可。
console.log(MyClass.myStaticMethod()); // Output: "Hello world"
静态属性的用例
静态属性可以用于多种用例，下面列举一些比较实用的例子。
用于约束
当我们需要限制一个类的实例只能有特定数量的时候，可以使用静态属性。例如，如果我们需要定义一个类用于创建自己的 StopWatch 对象，我们可以通过静态属性约束：
-- -------------------- ---- -------
----- --------- -
------ ------------- - --
------------- -
-- ------------------------ -- ------------------------ -
----- --- ---------- ---- ------------
-
--------------------------
-
------ ------------- - --
-在上面的示例中，我们使用isFull()函数来检查是否已经满了。如果已满，则在创建新实例时，会抛出一个错误。
const stopwatch1 = new Stopwatch(); const stopwatch2 = new Stopwatch(); const stopwatch3 = new Stopwatch(); // 抛出一个错误
常量属性
当我们需要定义一些类的常量，可以使用静态属性。
class MyClass {
static MAX_VALUE = 1000;
static MIN_VALUE = -1000;
}在上述示例中，我们定义了两个静态属性，用于表示类的取值范围。这些属性在许多不同的函数中都可以使用，而不需要多次定义。
静态类成员的类型检查
静态属性还可以用于类型检查，如：
class MyClass {
static myStaticString: string = "Hello world";
static myStaticNumber: number = 42;
}在上述示例中，我们在静态属性中添加了显式类型，这样我们就知道了它们所代表的类型。
总结
ES12中的静态属性及方法，让我们可以更好的为类定义变量，以及添加一些不同的功能。在实践中，它们可以在所有访问这些属性和方法的代码之间共享状态，而无需为每个实例创建副本。在使用静态变量或创建静态方法之前，需要考虑使用其他适合的机制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fee56f95b1f8cacdd91ed1