JavaScript 类与面向对象
class 是 JavaScript 在 ES2015 引入的「面向对象语法层」——它不是新的对象模型,而是建立在既有原型(prototype)机制之上的一套更顺手、更安全的写法。一句话概括:class 把「构造函数 + 原型方法 + 实例属性」三件事,收拢成一段读起来像传统 OOP 的声明,再补上构造函数时代做不到的能力——真正的私有字段 #、静态初始化块、super 调父类方法。本叶从语法糖的底层真相讲起,把类体里每一类成员(实例/原型方法、字段、静态、私有、访问器)、继承与 super、instanceof 判定,到尚未原生落地的装饰器现状,逐块讲透。
概述
- 它管什么:用一段声明定义「对象的模板」——构造时初始化哪些实例数据、共享哪些方法、哪些成员挂在类自身(静态)、哪些对外彻底不可见(私有
#),以及子类如何extends复用与super改写父类行为。 - 为什么值得认真学:
class的表象很像 Java/C# 的类,但底层仍是原型——方法在原型上共享、字段在每个实例上各存一份、this 取决于调用点而非定义处。不理解这层映射,就会写出「方法当回调丢了this」「以为下划线_private真的私有」「子类构造函数忘了super()直接报错」这类典型坑。 - 现代化关注点:私有字段
#、私有方法、#x in obj品牌检查、静态初始化块(均为 ES2022,2023 起浏览器广泛可用);以及装饰器——它至今未原生落地(TC39 提案处于 Stage 2.7、正向 Stage 3 收敛),现在只能靠 TypeScript / Babel 转写使用,且与 TS 早年的「实验性装饰器」是两套不兼容的规范。
本叶地图
- 入门 —— 从「
class到底做了什么」切入,一段最小类拆解出原型、字段、this三条主线 - 类语法:构造与成员 ——
class声明/表达式、constructor、实例方法(挂原型)vs 类字段(挂实例) - 继承与 super ——
extends、super()构造、super.method()改写、继承内置类(如Array) - 静态成员 ——
static方法/字段、私有静态、静态初始化块与执行时机 - 私有字段 # ——
#field硬私有、#method()私有方法、#x in obj品牌检查与常见误区 - 访问器与 instanceof ——
get/set、instanceof、Symbol.hasInstance定制、new.target阻止直接实例化 - 装饰器现状 —— 提案 Stage、为何非原生、Stage 3 装饰器与 TS 旧装饰器的区别
- 参考 —— 类体成员速查表 + 各特性 ES 版本 / Baseline 状态 + 标准与调试链接