构造函数不直接绑定全局事件监听器，而是通过实例化或原型方法调用addEventListener挂载到window/document；需避免重复绑定、确保正确解绑、注意this指向和内存泄漏。
构造函数本身不直接绑定全局事件监听器，而是通过在实例化时或原型方法中调用 addEventListener，把监听器挂载到全局对象（如 window 或 document）上。关键在于：**避免重复绑定、确保能正确解绑、注意 this 指向和内存泄漏风险**。
在构造函数内绑定（需谨慎）
适合一次性、与实例生命周期无关的全局行为（如监听键盘快捷键），但要注意不能每次 new 都重复绑定：
- 用静态属性或外部标志位控制只绑定一次
- 使用箭头函数或
bind固定this，否则回调里的this指向window - 示例：
class ModalManager {
constructor() {
// 只绑定一次
if (!ModalManager._globalBound) {
window.addEventListener('keydown', this.handleEscape.bind(this));
ModalManager._globalBound = true;
}
}
handleEscape(e) {
if (e.key === 'Escape') console.log('关闭模态框');
}
}
// 后续 new ModalManager() 不会重复绑定
在原型方法中按需绑定/解绑
更推荐的方式：把绑定和解绑逻辑拆开，由使用者显式调用，便于控制生命周期：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
-
enableGlobalHotkeys()：绑定全局监听器 -
disableGlobalHotkeys()：移除监听器（必须传入相同函数引用） - 建议用实例属性保存绑定的回调函数，方便解绑
class Toolbar {
constructor() {
this._onResize = this._handleResize.bind(this);
}
_handleResize() {
console.log('窗口尺寸变化', window.innerWidth);
}
enableGlobalHotkeys() {
window.addEventListener('resize', this._onResize);
}
disableGlobalHotkeys() {
window.removeEventListener('resize', this._onResize);
}
}
const tb = new Toolbar();
tb.enableGlobalHotkeys(); // ✅ 绑定
// ...后续调用 tb.disableGlobalHotkeys(); ✅ 解绑
用闭包或私有字段封装监听逻辑（ES2022+）
避免污染实例属性，提升封装性：
- 用
#privateField存储绑定函数，外部无法误调用 - 仍需保证绑定与解绑使用同一函数引用
class ThemeSwitcher {
#onStorageChange;
constructor() {
this.#onStorageChange = this.#handleStorageChange.bind(this);
}
#handleStorageChange(e) {
if (e.key === 'theme') document.body.setAttribute('data-theme', e.newValue);
}
startListening() {
window.addEventListener('storage', this.#onStorageChange);
}
stopListening() {
window.removeEventListener('storage', this.#onStorageChange);
}
}
务必记得解绑，尤其在实例销毁时
未解绑会导致内存泄漏和逻辑错乱（比如多个实例同时响应同一个事件）：
- 提供
destroy()方法集中清理所有全局监听器 - 若配合框架（如 React），在组件卸载时调用解绑
- 浏览器关闭或页面跳转前，可监听
beforeunload做兜底（非常规场景）
