0

0

JavaScript类如何定义_与传统构造函数有何区别【教程】

夜晨

夜晨

发布时间:2026-01-21 20:41:23

|

573人浏览过

|

来源于php中文网

原创

class声明不提升且强制new调用,function声明提升且可直接调用;class方法不可枚举、子类必须super(),static方法定义时机与绑定方式也不同。

javascript类如何定义_与传统构造函数有何区别【教程】

class 声明不会被提升,而 function 构造函数会

这是最常踩的坑:用 class 定义类时,如果在声明前就尝试实例化,会直接报 ReferenceError: Cannot access 'MyClass' before initialization。而传统 function 构造函数虽然没有变量提升的完整语义,但函数声明会被提升(hoisted),允许在声明前调用。

实操建议:

Dora
Dora

创建令人惊叹的3D动画网站,无需编写一行代码。

下载
  • 始终把 class 声明放在使用它的代码之前,不要依赖提升
  • 若需模块内“先用后定义”,改用 const MyClass = class { ... } 表达式(它和函数表达式一样不提升)
  • 构建工具(如 Webpack、Vite)中,ES 模块默认是 strict mode,且 class 总是处于 TDZ(暂时性死区),这点无法绕过

class 内部方法默认不可枚举,constructor 必须显式调用 super()

class 中定义的实例方法(包括 constructor)自动设置 enumerable: false,而用 function 构造函数 + .prototype 手动挂载的方法默认是可枚举的——这会影响 for...inObject.keys() 等行为。

子类 constructor 中若没写 super(),运行时直接抛 ReferenceError: Must call super constructor in derived class before accessing 'this';传统构造函数继承靠手动 Parent.call(this),没这层强制约束,但也容易漏掉导致 this 绑定错误。

立即学习Java免费学习笔记(深入)”;

实操建议:

  • 别依赖 for...in 遍历实例方法,优先用 Object.getOwnPropertyNames()Reflect.ownKeys()
  • 子类 constructor 第一行必须是 super()(或 return 一个对象),哪怕不传参也要写 super()
  • 想让某个方法可枚举?只能用赋值方式:this.myMethod = function() { ... },但这就脱离了原型链

class 不能直接当普通函数调用,而 function 构造函数可以

class 声明创建的是“类构造器”,它内部有 [[IsClassConstructor]] 内部属性,导致直接调用 MyClass()(不带 new)必然抛 TypeError: Class constructor MyClass cannot be invoked without 'new'。传统 function 构造函数没有这层限制——你可以 MyConstructor() 当普通函数用,只是 this 会指向全局或 undefined(strict mode 下)。

实操建议:

  • 如果你需要“兼容 new 和非 new 调用”的构造逻辑,必须用 function,并在内部判断 this instanceof MyConstructor
  • class 的设计哲学就是强制面向对象契约,不提供这种灵活性;强行绕过(比如用 Reflect.construct())属于反模式
  • 注意 Babel 编译后的 class 代码仍保留该检查,不是语法糖层面的“可忽略”

static 方法与 prototype 方法的绑定时机不同

class 中的 static 方法在类定义时就被绑定到类本身(即 MyClass.staticMethod),而实例方法只在原型对象上定义(MyClass.prototype.instanceMethod)。传统 function 构造函数里,两者都得手动挂:静态方法挂到函数对象上,实例方法挂到 .prototype 上——但没人强制你这么做,容易混用。

关键差异在于:Babel 或 TypeScript 编译 class 时,static 方法不会被添加到原型链,也不会被 instanceof 或原型查找影响;而手写 MyConstructor.static = function(){} 是纯属性赋值,无语言级保障。

实操建议:

  • 避免在 class 外部给类动态添加 static 属性(如 MyClass.extra = ...),这会破坏类型推导和 tree-shaking
  • 想让子类继承父类 static 方法?ES2022 起支持 static 继承,但老环境需靠 Object.setPrototypeOf(Child, Parent) 补齐
  • 不要在 static 方法里访问 this.prototype——这里的 this 指向类本身,不是实例
类的语法糖背后是更严格的运行时约束,不是换种写法那么简单。最容易被忽略的是:class 在模块顶层的声明位置、子类 super() 的调用顺序、以及 new 的强制性——这些都不是“能跑就行”的问题,而是会在特定执行路径下突然崩溃。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

47

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

192

2026.02.25

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

58

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

63

2025.11.27

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

58

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

63

2025.11.27

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

58

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

63

2025.11.27

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号