ES6类继承中静态属性的微妙（异常）行为探究

这个问题确实是ES6类静态属性继承时容易踩的原型链坑：默认情况下子类的静态属性会共享父类的，除非子类自己显式定义。要实现每个类（包括子类）首次使用时完成一次性初始化、且后续不受父类属性变更影响的类属性，最优雅的方式是用惰性初始化的静态getter，让每个类在首次访问属性时创建自己的独立副本。

核心思路 #

静态getter中的this指向当前调用的类（父类或子类），我们可以利用这一点，在首次访问时给当前类添加专属的静态属性，之后直接返回该属性即可，彻底脱离原型链的共享逻辑。

具体实现 #

基础版（简单值初始化） #

class Parent {
  // 静态getter实现惰性初始化
  static get initialized() {
    // 检查当前类是否已经拥有自己的initialized属性（排除原型链上的）
    if (!Object.hasOwn(this, 'initialized')) {
      // 给当前类定义独立的静态属性，可选设置为不可写防止后续修改
      Object.defineProperty(this, 'initialized', {
        value: new Date().toISOString(), // 这里替换成你的一次性初始化逻辑/值
        writable: false, // 可选：禁止后续修改，保证初始化仅执行一次
        enumerable: true
      });
    }
    return this.initialized;
  }
}

class Child extends Parent {}

测试验证 #

// 首次访问父类，触发初始化
console.log(Parent.initialized); // 输出当前时间戳，比如 "2024-05-20T12:34:56.789Z"
// 修改父类属性（如果设置了writable:false，严格模式下会报错，非严格模式静默失败）
Parent.initialized = "篡改值";
console.log(Parent.initialized); // 还是原来的时间戳，说明初始化后不可修改

// 首次访问子类，触发子类自己的初始化
console.log(Child.initialized); // 输出子类首次访问的时间戳，和父类不同
// 再次修改父类，完全不影响子类
Parent.initialized = "再次篡改";
console.log(Child.initialized); // 依然是子类自己的初始化值

进阶版（复杂对象+不可变） #

如果初始化的是对象，要注意对象本身的可变性，可以用Object.freeze冻结对象，防止内部属性被修改：

class Parent {
  static get config() {
    if (!Object.hasOwn(this, 'config')) {
      const initialConfig = Object.freeze({
        timeout: 1000,
        version: "1.0.0"
      });
      Object.defineProperty(this, 'config', {
        value: initialConfig,
        writable: false,
        enumerable: true
      });
    }
    return this.config;
  }
}

class Child extends Parent {}

测试对象的独立性：

// 修改父类对象的内部属性（严格模式下会报错）
Parent.config.timeout = 2000;
console.log(Parent.config.timeout); // 还是1000

// 子类的config是完全独立的
console.log(Child.config.timeout); // 1000

为什么这个方案有效？ #

1. 惰性初始化：只有当类首次访问该属性时才执行初始化逻辑，避免不必要的性能开销。
2. 类专属属性：通过Object.hasOwn判断当前类是否已有自己的属性，确保每个类（父类、子类）都会创建独立的静态属性，彻底脱离原型链的共享。
3. 可控制的不可变性：通过writable: false和Object.freeze可以保证初始化后属性值不会被意外修改，符合“一次性初始化”的需求。

内容的提问来源于stack exchange，提问作者aksuska