JavaScript原型链实现可复用组件生命周期

JavaScript 本身并没有所谓的“组件生命周期”——这一概念源于前端框架。但如果你希望将一套通用的初始化、更新与销毁逻辑抽取出来，并在不同组件间复用，原型链这个经典手法反而能派上用场。简单来说，就是模仿 Vue 或 React 的流程，但完全自主实现。

该方案的核心思想是：在基类的原型上预先定义好一组“钩子”，然后让子类通过继承获得这些钩子，并允许子类按需扩展自定义行为。

预先设定一组钩子方法

一切从基础定义开始。在基类的原型上预设四个空方法，它们就是后续被调用的“钩子点”：

• created：实例创建完毕后立即执行（在构造函数运行结束时）。
• mounted：组件挂载到 DOM 上之后触发（当然，需要先实现挂载逻辑）。
• updated：数据发生变更、视图完成刷新后调用。
• destroyed：实例清理之前，理论上用于释放资源。

这些方法一开始都设为空函数，以防子类未实现时直接抛出错误：

Component.prototype.create = function() {};
Component.prototype.mount = function() {};
Component.prototype.update = function() {};
Component.prototype.destroy = function() {};

嵌入流程中，自动触发

如果生命周期钩子全部依赖手动调用，那便失去了意义。真正的玩法是让它们“随波逐流”，嵌入到关键流程里自动执行。例如，在基类的构造函数末尾自动调用 created，在挂载方法里自动触发 mounted：

function Component(options) {
  this.options = options || {};
  this.data = this.options.data ? this.options.data() : {};
  this.created(); // 构造一完，自动触发
}

Component.prototype.mount = function(el) {
  this.el = typeof el === 'string' ? document.querySelector(el) : el;
  this.render();
  this.mounted(); // 挂载完成，自动触发
};

子类可以覆写，还能链接父类

子类若想添加自己的逻辑，完全没问题。只需通过 super 显式调用父类对应的钩子方法，就能保证父类的逻辑不会被跳过：

class MyButton extends Component {
  created() {
    super.created(); // 先执行基类的逻辑
    console.log('MyButton created');
  }
  mounted() {
    super.mounted();
    this.el.addEventListener('click', () => this.handleClick());
  }
}

这样一来，既复用了基类的初始化结构，子类对具体行为的掌控权也一点没丢。

要让 updated 灵敏响应？搭建观察者模式

想让 updated 真正在数据变化时被触发，光靠手动赋值是不够的。需要搭配一个简易的响应式系统。最直接的办法，就是在 setData 方法中统一管理更新通知：

Component.prototype.setData = function(newData) {
  Object.assign(this.data, newData);
  this.render();
  this.updated(); // 数据变了，视图重绘，触发 updated
};

需要特别强调的是：在实际项目中，切勿图省事直接操作 this.data 来修改数据。一定要统一通过 setData 这条通道，这是确保 updated 钩子能被可靠触发的关键。