你有多久没在 JS 中使用 class 了？-51CTO.COM

Hello，大家好，我是 Sunday。

在 ES6 的规范中（2015年），ECMAScript 推出了 class 语法。

class 本质上是对基于原型的继承机制的一种语法糖，其目的是为了使定义和继承对象更加简洁和清晰。并且，这种语法在其他的语言（比如：java）中都有非常广泛的应用。

但是，不知道从什么时候开始，我们好像已经逐渐遗忘了 class，特别是在现在基于框架（Vue 或者 React）的项目中。

那么到底是因为什么原因导致 class 逐渐没落，目前 class 的应用场景又是什么呢？今天，咱们就来看一看这个问题。

01：JS 的独特特性

JavaScript 是一种动态、弱类型的语言，具有其独特的特性：

原型继承：JS 的核心是基于原型的继承机制，而不是传统的类继承。每个对象可以作为另一个对象的原型，从而实现属性和方法的共享。
函数式编程：函数是 JS 中的一等公民。同时在 JS 中我们习惯了使用函数可以作为参数传递，也可以作为返回值。
灵活性：JS 是一种弱类型语言，变量可以在不同时间持有不同类型的值。这种动态特性使得语言更加灵活。同时对象的结构可以在运行时动态改变，属性可以随时添加、删除或修改

这些特性使得 JavaScript 在很长一段时间内依赖于构造函数和原型链来实现面向对象编程，而不是类继承。

Vue 和 React 是目前两个最受欢迎的框架，但是它们并不推崇使用 class 语法：

选项式 API：Vue 2 采用的是选项式 API，我们通过定义对象的属性（如 data、methods、computed 等）来构建组件，而不是通过类继承。
组合式 API：Vue 3 引入了组合式 API（Composition API），提供了一种更灵活的方式来组织和复用逻辑，通过函数和钩子的组合来管理状态和生命周期方法，而不依赖于 class。

函数组件：React 从一开始就支持函数组件，随着 React 16.8 引入 Hooks，函数组件变得更加强大和灵活，几乎可以替代类组件的所有功能。所以，从 16.8 以后 React 不再推荐使用类组件。而专用函数是组件和 hooks
Hooks：Hooks 提供了在函数组件中管理状态和副作用的能力，例如 useState、useEffect、useContext 等，这些 hooks 目前是组件 react 项目的核心功能

基于此，我们可以在线，目前无论是 Vue 还是 React，都不在有使用 class 的场景。

那么，目前 class 就已经完全没有应用场景了吗？也不是！

尽管 class 在项目前端开发中逐渐减少使用，但它在一些特定场景中仍然有其独特的应用价值：

面向对象编程（OOP）：对于那些习惯于面向对象编程的开发者（特别是 java 转前端的开发者），class 提供了一种更熟悉和直观的方式来定义和继承对象。它在一些大型、复杂的项目中，特别是需要严格的对象模型和继承层次时，依然具有优势。
工具库和框架：在一些工具库和框架中，class 仍然被广泛使用。例如，很多 JavaScript 库（如 Three.js、Vue.js 等）依然使用 class 来定义核心对象和模块。
服务器端开发：在 Node.js 环境中，class 也经常被用来定义模块和组件，特别是在使用 TypeScript 时

针对 class 而言，虽然我们在日常的项目开发中很少有应用场景。但是在进行库（原生的 JS 或 TS）开发时，class 依然具备独特的优势。