JavaScript 项目里class 和function构造函数区别现在哪个是主流

原创于 2026-01-12 11:43:54 发布 · 314 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #开发语言 #ecmascript

先说结论：
现在主流 JavaScript 项目里，class 用得非常多，反而“裸 function 构造函数”已经是偏老派写法了。

下面分层说清楚，为什么很多人会认为function用的更多，以及现实中到底怎么用。

现代 JS 里，`class` 是主流，不是没人用

在这些场景中，class 基本是默认选择：

1. 前端框架 / 工程化项目

React（class 少了，但 class 语法仍常见）
Vue / Angular
TypeScript 项目
企业级后台管理系统
Node.js 中大型服务

class Person {
  constructor(name) {
    this.name = name
  }

  sayHi() {
    console.log(this.name)
  }
}

理由很现实：

语义清晰（就是“类”）
更接近 Java / C# / Python
对新人友好
IDE / TS 支持更好

在公司代码里，99% 不会让你手写 function Person(){}

那为什么会看到很多人“不用 class”？

这通常来自 3 个特定圈子 👇

① React Hooks / 函数式编程圈

在 React 里：

不写 class component 了
用的是「函数 + hooks」

function App() {
  const [count, setCount] = useState(0)
}

注意：
这不是“不用 class”，
而是 根本不需要“类的概念”。

这是组件层面的函数式，不是 OO 的替代写法。

② 老 JS / 原型党 / 深度 JS 爱好者

这类人会说：

“JavaScript 本来就没有类，class 只是语法糖”

于是写：

function Person(name) {
  this.name = name
}
Person.prototype.sayHi = function () {
  console.log(this.name)
}

技术上 ✔
但：

啰嗦
易写错
可读性差
新人看不懂

👉 在生产项目里已经 越来越少

③ 函数式 / FP 派（Ramda、RxJS、函数组合）

const createPerson = (name) => ({
  name,
  sayHi: () => console.log(name)
})

适合：

工具函数
无状态逻辑
纯计算模块

不适合：

有生命周期
有继承关系
有复杂状态

三、真实世界的“使用现状总结”

场景	推荐写法
业务对象 / 实体 / Model	`class`
Node 服务 / SDK / 工具库	`class`
TypeScript 项目	`class（几乎必选）`
React 组件	`function + hooks`
简单工具函数	`function / arrow`
老项目维护	`function + prototype`

为什么现在反而更推荐 `class`

1. TypeScript 时代

class User {
  constructor(
    public id: number,
    private token: string
  ) {}
}

👉 function 写法在 TS 里 非常别扭

2. 更安全的 `this`

class 默认严格模式
少踩 this 的坑

3. 继承、封装更直观

class Admin extends User {
  deleteUser() {}
}

不用手动操作 prototype

一句话结论

“现在没人用 class 了”是错的
除了 React 组件，现代 JS 项目里 class 是标准写法
⚠️ function Person(){} 更多是历史遗留或刻意选择