static

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

static 关键字定义类的 静态方法或字段静态初始化块(有关此用法的更多信息,请参阅链接)。无法在类的实例上直接访问静态属性。相反,它们是在类本身上访问的。

¥The static keyword defines a static method or field for a class, or a static initialization block (see the link for more information about this usage). Static properties cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.

静态方法通常是实用函数,例如创建或克隆对象的函数,而静态属性对于缓存、固定配置或不需要跨实例复制的任何其他数据很有用。

¥Static methods are often utility functions, such as functions to create or clone objects, whereas static properties are useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.

注意:在类的上下文中,MDN Web 文档内容可互换地使用术语属性和 fields

¥Note: In the context of classes, MDN Web Docs content uses the terms properties and fields interchangeably.

Try it

语法

¥Syntax

js
class ClassWithStatic {
  static staticField;
  static staticFieldWithInitializer = value;
  static staticMethod() {
    // …
  }
}

还有一些额外的语法限制:

¥There are some additional syntax restrictions:

  • 静态属性(字段或方法)的名称不能是 prototype
  • 类字段(静态或实例)的名称不能是 constructor

描述

¥Description

本页介绍类的公共静态属性,其中包括静态方法、静态访问器和静态字段。

¥This page introduces public static properties of classes, which include static methods, static accessors, and static fields.

公共静态功能使用 static 关键字声明。它们在 类评价 时使用 [[DefineOwnProperty]] 语义(本质上是 Object.defineProperty())添加到类构造函数中。从类构造函数中再次访问它们。

¥Public static features are declared using the static keyword. They are added to the class constructor at the time of class evaluation using the [[DefineOwnProperty]] semantic (which is essentially Object.defineProperty()). They are accessed again from the class constructor.

静态方法通常是实用函数,例如创建或克隆实例的函数。当你希望某个字段在每个类中仅存在一次而不是在你创建的每个类实例上存在时,公共静态字段非常有用。这对于缓存、固定配置或不需要跨实例复制的任何其他数据很有用。

¥Static methods are often utility functions, such as functions to create or clone instances. Public static fields are useful when you want a field to exist only once per class, not on every class instance you create. This is useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.

静态字段名称可以是 computed。计算表达式中的 this 值是围绕类定义的 this,并且引用类名称的是 ReferenceError,因为该类尚未初始化。awaityield 在此表达式中按预期工作。

¥Static field names can be computed. The this value in the computed expression is the this surrounding the class definition, and referring to the class's name is a ReferenceError because the class is not initialized yet. await and yield work as expected in this expression.

静态字段可以有一个初始值设定项。没有初始化器的静态字段被初始化为 undefined。公共静态字段不会在子类上重新初始化,但可以通过原型链访问。

¥Static fields can have an initializer. Static fields without initializers are initialized to undefined. Public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.

js
class ClassWithStaticField {
  static staticField;
  static staticFieldWithInitializer = "static field";
}

class SubclassWithStaticField extends ClassWithStaticField {
  static subStaticField = "subclass field";
}

console.log(Object.hasOwn(ClassWithStaticField, "staticField")); // true
console.log(ClassWithStaticField.staticField); // undefined
console.log(ClassWithStaticField.staticFieldWithInitializer); // "static field"
console.log(SubclassWithStaticField.staticFieldWithInitializer); // "static field"
console.log(SubclassWithStaticField.subStaticField); // "subclass field"

在字段初始值设定项中,this 指当前类(也可以通过其名称访问),super 指基类构造函数。

¥In the field initializer, this refers to the current class (which you can also access through its name), and super refers to the base class constructor.

js
class ClassWithStaticField {
  static baseStaticField = "base static field";
  static anotherBaseStaticField = this.baseStaticField;

  static baseStaticMethod() {
    return "base static method output";
  }
}

class SubClassWithStaticField extends ClassWithStaticField {
  static subStaticField = super.baseStaticMethod();
}

console.log(ClassWithStaticField.anotherBaseStaticField); // "base static field"
console.log(SubClassWithStaticField.subStaticField); // "base static method output"

该表达式是同步计算的。不能在初始化表达式中使用 awaityield。(将初始化表达式视为隐式封装在函数中。)

¥The expression is evaluated synchronously. You cannot use await or yield in the initializer expression. (Think of the initializer expression as being implicitly wrapped in a function.)

静态字段初始值设定项和 静态初始化块 是一对一评估的。字段初始值设定项可以引用其上方的字段值,但不能引用其下方的字段值。所有静态方法都是预先添加的并且可以访问,但如果它们引用正在初始化的字段下方的字段,则调用它们可能不会按预期运行。

¥Static field initializers and static initialization blocks are evaluated one-by-one. Field initializers can refer to field values above it, but not below it. All static methods are added beforehand and can be accessed, although calling them may not behave as expected if they refer to fields below the one being initialized.

注意:这对于 私有静态字段 来说更为重要,因为访问未初始化的私有字段会抛出 TypeError,即使私有字段在下面声明。(如果不声明私有字段,那就是早期的 SyntaxError。)

¥Note: This is more important with private static fields, because accessing a non-initialized private field throws a TypeError, even if the private field is declared below. (If the private field is not declared, it would be an early SyntaxError.)

示例

¥Examples

在类中使用静态成员

¥Using static members in classes

以下示例演示了几件事:

¥The following example demonstrates several things:

  1. 如何在类上定义静态成员(方法或属性)。
  2. 具有静态成员的类可以被子类化。
  3. 如何调用静态成员以及如何不调用静态成员。
js
class Triple {
  static customName = "Tripler";
  static description = "I triple any number you provide";
  static calculate(n = 1) {
    return n * 3;
  }
}

class SquaredTriple extends Triple {
  static longDescription;
  static description = "I square the triple of any number you provide";
  static calculate(n) {
    return super.calculate(n) * super.calculate(n);
  }
}

console.log(Triple.description); // 'I triple any number you provide'
console.log(Triple.calculate()); // 3
console.log(Triple.calculate(6)); // 18

const tp = new Triple();

console.log(SquaredTriple.calculate(3)); // 81 (not affected by parent's instantiation)
console.log(SquaredTriple.description); // 'I square the triple of any number you provide'
console.log(SquaredTriple.longDescription); // undefined
console.log(SquaredTriple.customName); // 'Tripler'

// This throws because calculate() is a static member, not an instance member.
console.log(tp.calculate()); // 'tp.calculate is not a function'

从另一个静态方法调用静态成员

¥Calling static members from another static method

为了调用同一类的另一个静态方法中的静态方法或属性,可以使用 this 关键字。

¥In order to call a static method or property within another static method of the same class, you can use the this keyword.

js
class StaticMethodCall {
  static staticProperty = "static property";
  static staticMethod() {
    return `Static method and ${this.staticProperty} has been called`;
  }
  static anotherStaticMethod() {
    return `${this.staticMethod()} from another static method`;
  }
}
StaticMethodCall.staticMethod();
// 'Static method and static property has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method and static property has been called from another static method'

从类构造函数和其他方法调用静态成员

¥Calling static members from a class constructor and other methods

不能使用非静态方法中的 this 关键字直接访问静态成员。你需要使用类名来调用它们:CLASSNAME.STATIC_METHOD_NAME() / CLASSNAME.STATIC_PROPERTY_NAME 或通过调用该方法作为 constructor 的属性:this.constructor.STATIC_METHOD_NAME() / this.constructor.STATIC_PROPERTY_NAME

¥Static members are not directly accessible using the this keyword from non-static methods. You need to call them using the class name: CLASSNAME.STATIC_METHOD_NAME() / CLASSNAME.STATIC_PROPERTY_NAME or by calling the method as a property of the constructor: this.constructor.STATIC_METHOD_NAME() / this.constructor.STATIC_PROPERTY_NAME

js
class StaticMethodCall {
  constructor() {
    console.log(StaticMethodCall.staticProperty); // 'static property'
    console.log(this.constructor.staticProperty); // 'static property'
    console.log(StaticMethodCall.staticMethod()); // 'static method has been called.'
    console.log(this.constructor.staticMethod()); // 'static method has been called.'
  }

  static staticProperty = "static property";
  static staticMethod() {
    return "static method has been called.";
  }
}

规范

Specification
ECMAScript Language Specification
# sec-class-definitions

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看