如何让JavaScript类中的方法仅在首次实例化时执行一次？

你需要让初始化方法仅在类的首次实例化时执行，后续实例化只执行UI修改逻辑，这里提供两种实用的实现方式：

方法一：使用类静态属性追踪初始化状态 #

利用类的静态属性（所有实例共享）标记是否已完成初始化，构造函数中判断状态决定是否执行初始化方法：

class MyClass {
  // 静态属性：标记UI是否已初始化
  static uiInitialized = false;

  constructor(params) {
    // 仅首次实例化时执行初始化
    if (!MyClass.uiInitialized) {
      this.createUI();
      MyClass.uiInitialized = true;
    }
    // 每次实例化都执行UI更新逻辑
    this.updateUI(params);
  }

  // 首次执行：创建UI元素
  createUI() {
    console.log("hello world!");
    // 这里编写创建UI的核心逻辑，比如生成DOM元素、绑定基础事件等
  }

  // 每次执行：根据参数修改已有UI
  updateUI(params) {
    console.log(`根据参数 ${JSON.stringify(params)} 更新UI`);
    // 编写修改UI的逻辑，比如更新内容、调整样式等
  }
}

// 测试示例
new MyClass({ text: "第一次实例" });
// 输出：hello world! 、 根据参数 {"text":"第一次实例"} 更新UI
new MyClass({ text: "第二次实例" });
// 输出：根据参数 {"text":"第二次实例"} 更新UI
new MyClass({ text: "第三次实例" });
// 输出：根据参数 {"text":"第三次实例"} 更新UI

方法二：用闭包封装初始化逻辑 #

如果希望初始化逻辑和类本身解耦，可以用自执行函数创建闭包，确保初始化代码只执行一次：

// 闭包封装初始化逻辑，仅执行一次
const initUI = (() => {
  let isInitialized = false;
  return () => {
    if (!isInitialized) {
      console.log("hello world!");
      // 这里编写创建UI的逻辑
      isInitialized = true;
    }
  };
})();

class MyClass {
  constructor(params) {
    initUI(); // 调用初始化逻辑（自动判断是否执行）
    this.updateUI(params);
  }

  updateUI(params) {
    console.log(`根据参数 ${JSON.stringify(params)} 更新UI`);
    // 编写UI修改逻辑
  }
}

// 测试效果和方法一完全一致
new MyClass({ text: "第一次实例" });
new MyClass({ text: "第二次实例" });

两种方法都能满足你的需求：首次实例化创建UI，后续实例化仅修改已有UI。如果初始化逻辑和类强相关，优先选方法一；如果想把初始化逻辑独立出来，方法二更合适。

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