JavaScript 静态属性

摘要：在本教程中，您将了解类的 JavaScript 静态属性，以及如何在静态方法、类构造函数和其他实例方法中访问静态属性。

JavaScript 静态属性简介

类似于 静态方法，静态属性由 类 的所有实例共享。要定义静态属性，您需要使用 static 关键字，后跟属性名称，如下所示

class Item {
  static count = 0;
}
Code language: JavaScript (javascript)

要访问静态属性，请使用类名后跟 . 运算符和静态属性名称。例如

console.log(Item.count); // 0Code language: JavaScript (javascript)

要在静态方法中访问静态属性，请使用类名后跟 . 运算符和静态属性名称。例如

class Item {
  static count = 0;
  static getCount() {
    return Item.count;
  }
}

console.log(Item.getCount()); // 0Code language: JavaScript (javascript)

要在类构造函数或实例方法中访问静态属性，请使用以下语法

className.staticPropertyName;Code language: CSS (css)

或者

this.constructor.staticPropertyName;Code language: CSS (css)

以下示例在类构造函数中增加了 count 静态属性

class Item {
  constructor(name, quantity) {
    this.name = name;
    this.quantity = quantity;
    this.constructor.count++;
  }
  static count = 0;
  static getCount() {
    return Item.count;
  }
}
Code language: JavaScript (javascript)

当您创建一个新的 Item 类实例时，以下语句将 count 静态属性增加 1

this.constructor.count++;Code language: CSS (css)

例如

// Item class ...

let pen = new Item("Pen", 5);
let notebook = new Item("notebook", 10);

console.log(Item.getCount()); // 2Code language: JavaScript (javascript)

此示例创建了两个 Item 类实例，并调用了类构造函数。由于类构造函数每次被调用时都会将 count 属性增加 1，因此 count 的值为 2。

总结一下。

class Item {
  constructor(name, quantity) {
    this.name = name;
    this.quantity = quantity;
    this.constructor.count++;
  }
  static count = 0;
  static getCount() {
    return Item.count;
  }
}

let pen = new Item('Pen', 5);
let notebook = new Item('notebook', 10);

console.log(Item.getCount()); // 2Code language: JavaScript (javascript)

摘要

• 类的静态属性由该类所有实例共享。
• 使用 static 关键字定义静态属性。
• 使用 className.staticPropertyName 在静态方法中访问静态属性。
• 使用 this.constructor.staticPropertyName 或 className.staticPropertyName 在构造函数中访问静态属性。