讲师中心 微信公众号
AI工具推荐 视频效率加速

如何将 ES6 类正确转换为传统函数构造器(含继承与箭函数处理)

轻强大大_9276

轻强大大_9276

发布时间:2026-01-30 14:57:18

|

809人浏览过

|

来源于php中文网

原创

如何将 ES6 类正确转换为传统函数构造器(含继承与箭函数处理)

本文详解将 `class a extends b` 转换为等效函数构造器时的关键陷阱:原型链覆盖导致方法丢失,以及箭函数 `this` 绑定在函数构造器中的行为一致性说明。重点纠正 `object.create(b.prototype)` 位置错误,并提供可直接复用的修复方案。

将 ES6 类重构为传统函数构造器(Function Constructor)时,看似只是语法替换,实则暗藏原型链管理的逻辑陷阱。你遇到的“无报错但功能失效”问题,根源并非箭函数本身,而是 A.prototype = Object.create(B.prototype) 这一行被错误地放在了所有方法定义之后——它会彻底清空此前挂载在 A.prototype 上的所有自定义方法(如 init、update、destroy),导致实例调用时返回 undefined。

✅ 正确的函数构造器继承写法(关键顺序!)

必须先建立原型链,再定义实例方法。否则 Object.create(B.prototype) 会覆盖已添加的方法:

ES6-ES11新特性相关课件
ES6-ES11新特性相关课件

ES6-ES11新特性相关课件

下载
// ✅ 正确:先设置原型继承关系
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(); // 箭函数自动绑定 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();
};
? 为什么 this.updateBind 没问题? 箭函数不绑定自己的 this,而是继承外层作用域的 this(即实例本身)。在 init() 中定义时,this 指向当前 new A() 实例,与类写法语义完全相同。因此箭函数无需任何改造——真正的问题是 update 方法本身因原型被覆盖而根本不存在。

⚠️ 常见错误与注意事项

  • constructor 指向错误:A.prototype.constructor = B 是严重错误,会导致 instance.constructor === B,应改为 A.prototype.constructor = A。
  • super() 的等价替代:B.call(this, m) 正确模拟了 super(m),但需确保 B 本身也是函数构造器(若 B 是类,需用 Reflect.construct(B, [m], A),但通常建议统一风格)。
  • 方法缺失调试技巧:在实例化后立即检查 console.log(new A().update),若输出 undefined,即可定位为原型覆盖问题。
  • 现代替代建议:如无兼容性要求,优先使用 class + extends;若需函数式风格,可考虑工厂函数或组合式模式,避免手动维护原型链。

✅ 最终验证示例

// 测试继承与方法可用性
const instance = new A({/* mock config */});
console.log(instance instanceof A);     // true
console.log(instance instanceof B);     // true
console.log(typeof instance.init);      // "function"
console.log(typeof instance.update);    // "function" ← 修复后不再为 undefined

总结:函数构造器迁移的核心是原型链初始化时机,而非箭函数。只要保证 Object.create(B.prototype) 在任何 A.prototype.xxx = ... 之前执行,并修正 constructor 指向,原有箭函数逻辑可零改动复用。

热门AI工具

更多
UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

3996

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

306

2025.12.06

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

856

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

6343

2024.05.29

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

11985

2023.07.31

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ECMAScript6 / ES6---十天技能课堂
ECMAScript6 / ES6---十天技能课堂

共25课时 | 2.7万人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 10.9万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 19.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn