JavaScript类用法全解析【教程】

JavaScript中的class并非传统面向对象语言中的真正类，而是基于函数和原型链的语法糖，其本质仍是函数，不支持提升，要求constructor必须显式且唯一、继承时必须优先调用super()，静态方法绑定类本身、实例方法绑定原型、getter/setter提供属性式访问，同时严禁在类体中使用箭头函数；理解这些底层机制与语义边界，才能避免常见陷阱（如this引用错误、异步构造、原型污染），写出清晰、健壮、可维护的现代JavaScript代码。

JavaScript 用 class 关键字实现的不是传统意义上的类，而只是函数和原型链的语法糖——它不改变底层机制，但能让你写得更清晰、更少出错。

class 声明本质是函数，不是新类型

你写的 class Person 在运行时会被转成一个普通函数，并挂载到 Person.prototype 上。这意味着：

• typeof Person 返回 "function"，不是 "class"
• 不能用 new Person() 之前就调用 Person()，否则报 TypeError: Class constructor Person cannot be invoked without 'new'
• 类体中所有方法默认不可枚举（Object.keys(Person.prototype) 拿不到），但手动加的属性（如 this.name = name）会出现在实例上

constructor 必须显式定义，且只能有一个

如果你没写 constructor，JS 会自动插入一个空的；但一旦写了，就不能再写第二个，否则报 SyntaxError: A class may only have one constructor。

常见误用：

• 在 constructor 里忘记调用 super()（继承时），直接访问 this 会触发 ReferenceError: Must call super constructor in derived class before accessing 'this'
• 把异步操作（如 await fetch()）直接塞进 constructor——它不能是 async，必须同步完成初始化

示例：

class User {
  constructor(name) {
    this.name = name;
  }
}

class Admin extends User {
  constructor(name, role) {
    super(name); // 必须第一行
    this.role = role;
  }
}

静态方法、实例方法、getter/setter 的位置很关键

它们都写在 class 大括号内，但语义和绑定对象完全不同：

• static init() → 绑定在类本身：User.init()，不能通过实例调用
• getName()（无 static）→ 绑定在原型上：new User().getName()
• get id() → 访问时像属性：user.id，但背后执行函数

注意：箭头函数不能用作类方法（包括 static），因为它没有自己的 this 绑定，且语法不允许出现在类体顶层（会报 Unexpected token）。

extends 和 instanceof 的行为依赖原型链，不是字符串匹配

class A extends B 实际做了两件事：设置 A.prototype.__proto__ === B.prototype，并让 A.__proto__ === B（静态继承）。所以：

• new A() instanceof B 是 true，因为原型链向上能找到 B.prototype
• 但 Object.getPrototypeOf(A) !== B，而是 A.__proto__ === B —— 这个细节影响工具库（比如 Reflect.getPrototypeOf(A)）的行为
• 如果父类是函数（非 class），extends 仍可工作，但子类 constructor 中的 super() 必须显式调用父函数，且不能省略括号

容易忽略的一点：class 声明不会被提升（hoisting），不像函数声明。下面代码会报 ReferenceError：

let u = new User(); // ❌
class User { }

真正难处理的不是语法，而是混用 class 和原型操作时的隐式耦合——比如在 class 外改 User.prototype.method = ...，或者用 Object.assign(User.prototype, {...}) 扩展方法，这些都能跑通，但会让代码意图模糊、难以调试。

到这里，我们也就讲完了《JavaScript类用法全解析【教程】》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！