typeerror发生在调用非函数值时，常见原因包括方法名拼写错误、对象未定义该方法、this绑定丢失、异步方法未初始化及dom元素获取失败。
当 JavaScript 中出现 TypeError，且错误发生在“调用方法时”，通常意味着你试图对一个不是函数的值使用了函数调用语法 ()。这不是语法错误，而是运行时类型不匹配——JavaScript 发现目标不可调用（not callable）。
常见触发场景：方法名拼写错误或属性未定义
对象上不存在该方法，访问结果是 undefined，而 undefined() 会直接抛出 TypeError。
-
错误示例：
const obj = {}; obj.sayHello();→TypeError: obj.sayHello is not a function - 检查拼写：
obj.sayhello（小写 l） vssayHello（大写 H） - 确认方法是否在对象创建后才被添加（如异步加载、条件赋值未执行）
this 绑定丢失导致方法变成普通值
将对象方法单独提取为变量后调用，this 指向丢失，若方法内部依赖 this 且逻辑中返回非函数值，后续再调用可能出错；更常见的是：提取后调用时，原方法虽存在，但因上下文错误返回 undefined 或其他非函数值，接着又被误当作函数调用。
-
错误示例：
const btn = document.getElementById('btn'); const handleClick = btn.addEventListener; handleClick('click', handler);→TypeError: Illegal invocation（严格模式下典型报错） - 修复方式：用
.bind(btn)、箭头函数包装，或直接传方法引用btn.addEventListener(...)
异步操作中过早调用未初始化的方法
方法本应由异步逻辑（如 await init()）挂载到对象上，但在初始化完成前就尝试调用。
立即学习“Java免费学习笔记（深入）”；
-
错误示例：
await loadModule(); instance.doWork(); // 但 loadModule() 内部尚未给 instance 添加 doWork 方法 - 可在调用前加防护：
if (typeof instance.doWork === 'function') { instance.doWork(); } - 或统一用可选链 + 空值合并：
instance.doWork?.() ?? console.warn('doWork not ready');
DOM 元素未获取成功，却当作有方法的对象使用
document.querySelector 返回 null，而 null 没有 addEventListener 等方法。
-
错误示例：
const el = document.querySelector('#nonexistent'); el.addEventListener('click', fn);→TypeError: Cannot read property 'addEventListener' of null - 务必检查 DOM 查询结果：
if (el) { el.addEventListener(...); } - 现代写法可配合可选链：
el?.addEventListener?.('click', fn);
