纯JS应用报TypeError:无法读取undefined的'components'属性

报错核心触发逻辑 #

报错Uncaught TypeError: Cannot read properties of undefined (reading 'components')的直接触发点在Excel类构造函数的this.components = options.components || []行，执行到这行时options值为undefined，读取属性失败。
导致这个问题的两个根本错误：

• 类层级设计错误：Header、Formula这类页面子组件和根类Excel是组合关系，不应该使用extends继承Excel。
• 实例化参数缺失：当你在Excel的getRoot方法中执行new Component()实例化组件时，由于组件类错误继承了Excel，实例化时会自动调用Excel的构造函数，但你没有传入构造函数要求的selector、options参数，直接导致构造函数内拿到的options为undefined。

修复步骤 #

1. 移除所有子组件对Excel类的继承，子组件改为独立类实现自身逻辑即可。
   修正后的Formula.js代码：

export class Formula {
  toHTML() {
    return '<h1>Formula</h1>'
  }
}

Header.js做相同处理，删除extends Excel相关逻辑。

2. 入口文件实例化Excel时，按构造函数要求传入挂载选择器和组件配置，参考示例：

// index.js 入口文件
import { Excel } from './excel/Excel'
import { Formula } from './components/Formula'
import { Header } from './components/Header'

// 传入正确参数初始化Excel实例
const app = new Excel('#app', {
  components: [Header, Formula]
})
app.render()

如果你需要给所有子组件抽取公共逻辑，可以单独定义一个通用的Component基类放公共方法，不要耦合Excel根容器类的逻辑，避免触发构造函数参数校验错误。

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