
将 es6 类改为函数构造器时,若在设置原型链后又定义方法,会导致方法被覆盖为 undefined;关键在于先建立 `a.prototype = object.create(b.prototype)`,再添加实例方法,而非反之。
在将 class A extends B 迁移为函数构造器 function A(m) 的过程中,核心问题并非箭头函数 this.updateBind = () => { this.update(); } 本身——它在函数构造器中完全合法且能正确绑定 this(因为箭头函数继承外层作用域的 this,而此处外层是实例上下文)。真正导致 init()、update()、destroy() 等方法调用失败的根本原因,是原型链初始化顺序错误。
原始错误代码中:
A.prototype.init = function() { /* ... */ };
A.prototype.update = function() { /* ... */ };
// ... 其他方法定义
A.prototype = Object.create(B.prototype); // ❌ 覆盖整个 prototype!
A.prototype.constructor = B;该写法先向 A.prototype 添加了若干方法,但紧接着 A.prototype = Object.create(B.prototype) 重新赋值了整个原型对象,导致之前定义的所有方法(init、update 等)全部丢失,变为 undefined。因此即使 this.updateBind 正确创建,this.update() 在执行时也会抛出 TypeError: this.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!
// ✅ 再定义实例方法
A.prototype.init = function() {
this.updateBind = () => {
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();
};? 补充说明与注意事项:
- A.prototype.constructor = A 是良好实践,确保 new A() instanceof A 正确返回 true;若设为 B,则 instanceof 检查会失真;
- 箭头函数 this.updateBind 在函数构造器中无需特殊处理——只要 this 是实例(即通过 new A() 创建),其内部 this.update() 就能正常访问到 A.prototype.update;
- 若需兼容更老环境或避免 this 绑定隐患,也可改用 bind 显式绑定(但非必需):
this.updateBind = this.update.bind(this);
- 强烈建议在 update 和 destroy 中加入空值检查(如 this.scroll?.update()),防止 scroll 未初始化时崩溃;
- 最终验证方式:实例化后检查方法是否存在:
const instance = new A({/* config */}); console.log(typeof instance.init, typeof instance.update); // 应输出 "function function"
综上,迁移类到函数构造器的核心原则是:继承先行,扩展在后;箭头函数可用,但原型赋值时机决定一切。










