本文详解将 class a extends b 改写为函数构造器 function a 时的关键陷阱：原型链重置顺序错误会导致所有实例方法（如 update）变为 undefined，而非箭头函数本身的问题。
在将 ES6 类重构为传统函数构造器时，一个极易被忽视但致命的错误是 原型链赋值的时机不当。你直觉怀疑 this.updateBind = () => { this.update(); } 中的箭头函数导致 this 绑定失效，但实际上——箭头函数在此处完全合法且行为正确：它正确捕获了构造函数创建的实例 this，后续调用 this.update() 也符合预期。真正的问题出在继承实现上。
看这段有问题的代码：
function A(m) {
B.call(this, m);
}
A.prototype.init = function() {
this.updateBind = () => {
this.update(); // ✅ this 指向实例，没问题
};
window.addEventListener('resizeEnd', this.updateBind);
};
A.prototype.update = function() {
this.scroll.update();
};
A.prototype.destroy = function() {
window.removeEventListener('resizeEnd', this.updateBind);
this.scroll.destroy();
};
// ❌ 错误：此行覆盖了前面所有已定义的 prototype 方法！
A.prototype = Object.create(B.prototype);
A.prototype.constructor = B;A.prototype = Object.create(B.prototype) 会完全替换整个 A.prototype 对象，导致此前通过 A.prototype.xxx = function(){} 添加的所有方法（init、update、destroy）全部丢失，变成 undefined。运行时调用 instance.update() 就会抛出 TypeError: instance.update is not a function。
✅ 正确做法是：先建立原型链，再挂载方法：
function A(m) {
B.call(this, m);
}
// ✅ 正确：优先设置继承关系
A.prototype = Object.create(B.prototype);
A.prototype.constructor = A; // ⚠️ 注意：constructor 应指向 A，而非 B！
// ✅ 再添加实例方法（此时操作的是继承自 B 的新 prototype 对象）
A.prototype.init = function() {
this.updateBind = () => {
this.update(); // 仍能正常访问 this.update()
};
window.addEventListener('resizeEnd', this.updateBind);
};
A.prototype.update = function() {
this.scroll.update();
};
A.prototype.destroy = function() {
window.removeEventListener('resizeEnd', this.updateBind);
this.scroll.destroy();
};? 关键要点总结：
- 顺序即正义：Object.create(B.prototype) 必须放在所有 A.prototype.xxx = ... 赋值语句之前；
- constructor 修正：A.prototype.constructor 应设为 A，而非 B，否则 new A() instanceof A 可能返回 false（尽管多数场景不影响功能，但违背语义）；
- 箭头函数无需改动：this.updateBind = () => this.update() 在函数构造器中依然可靠，因其词法绑定的是实例对象，与类中的行为一致；
- 额外建议：若项目支持，推荐使用 class 语法；若必须用函数构造器，可考虑封装继承工具（如 inherits(A, B)）提升可维护性。
如此修正后，init() 中的事件绑定、update() 调用及 destroy() 清理均可正常工作，Webpack 构建无报错，运行时逻辑与原类版本完全一致。
