JavaScript的静态属性和函数

发表于 分类于 阅读次数： Valine：

原文：Static Properties and Functions in JavaScript

static关键字可以在ES6的类中定义静态属性和函数。

在ES6的类中，static关键字可以定义类自身的函数，而非实例的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
class MyClass {
  static myFunction() {
    return 42;
  }
}

typeof MyClass.myFunction; // 'function'
MyClass.myFunction(); // 42

// `myFunction()`是`MyClass`的函数
// **不是**`MyClass`实例的函数
const obj = new MyClass();
obj.myFunction; // undefined

在JavaScript中，类和其他对象没有什么不同。static可以在类内部定义类的函数，直接把函数赋值给MyClass也是等价的：

1
2
3
4
5
6
class MyClass {}
MyClass.myFunction = function() {
  return 42;
};

MyClass.myFunction(); // 42

this

在static函数中，this指向了类本身。

1
2
3
4
5
6
7
class MyClass {
  static myFunction() {
    return this;
  }
}

MyClass.myFunction() === MyClass; // true

静态属性

静态属性，也称为类字段，目前初于TC39提案的第三阶段，这意味着它还不是JavaScript语言的一部分。但已经在最近版本的Chrome得到了支持。

译注：本文写于2019年12月18日，译稿已是2023年，静态属性已成为JavaScript语言标准

1
2
3
4
5
class MyClass {
  static answer = 42;
}

MyClass.answer; // 42

在使用静态属性时，对于非原始类型要特别小心。如果继承了非原始类型的静态属性，每个类继承的其实是同一个对象。

1
2
3
4
5
6
7
class MyClass {
  static val = new Object();
}

class MyChildClass extends MyClass {}

MyChildClass.val === MyClass.val; // true