在 ES6 的规范中(2015年),ECMAScript 推出了 class 语法。
class 本质上是对基于原型的继承机制的一种语法糖,其目的是为了使定义和继承对象更加简洁和清晰。并且,这种语法在其他的语言(比如:java)中都有非常广泛的应用。
但是,不知道从什么时候开始,我们好像已经逐渐遗忘了 class,特别是在现在基于框架(Vue 或者 React)的项目中。
那么到底是因为什么原因导致 class 逐渐没落,目前 class 的应用场景又是什么呢?今天,咱们就来看一看这个问题。
01:JS 的独特特性
JavaScript 是一种动态、弱类型的语言,具有其独特的特性:
- 原型继承:JS 的核心是基于原型的继承机制,而不是传统的类继承。每个对象可以作为另一个对象的原型,从而实现属性和方法的共享。
- 函数式编程:函数是 JS 中的一等公民。同时在 JS 中我们习惯了使用函数可以作为参数传递,也可以作为返回值。
- 灵活性:JS 是一种弱类型语言,变量可以在不同时间持有不同类型的值。这种动态特性使得语言更加灵活。同时对象的结构可以在运行时动态改变,属性可以随时添加、删除或修改
这些特性使得 JavaScript 在很长一段时间内依赖于 构造函数和原型链 来实现面向对象编程,而不是类继承。
02:Vue 和 React 并不推崇使用 class
Vue 和 React 是目前两个最受欢迎的框架,但是它们并不推崇使用 class 语法:
Vue
- 选项式 API:Vue 2 采用的是选项式 API,我们通过定义对象的属性(如 data、methods、computed 等)来构建组件,而不是通过类继承。
- 组合式 API:Vue 3 引入了组合式 API(Composition API),提供了一种更灵活的方式来组织和复用逻辑,通过函数和钩子的组合来管理状态和生命周期方法,而不依赖于 class。
React
- 函数组件:React 从一开始就支持函数组件,随着 React 16.8 引入 Hooks,函数组件变得更加强大和灵活,几乎可以替代类组件的所有功能。所以,从 16.8 以后 React 不再推荐使用类组件。而专用函数是组件和 hooks
- Hooks:Hooks 提供了在函数组件中管理状态和副作用的能力,例如 useState、useEffect、useContext 等,这些 hooks 目前是组件 react 项目的核心功能
基于此,我们可以在线,目前无论是 Vue 还是 React,都不在有使用 class 的场景。
那么,目前 class 就已经完全没有应用场景了吗?也不是!
03:class 的应用场景有什么?
尽管 class 在项目前端开发中逐渐减少使用,但它在一些特定场景中仍然有其独特的应用价值:
- 面向对象编程(OOP):对于那些习惯于面向对象编程的开发者(特别是 java 转前端的开发者),class 提供了一种更熟悉和直观的方式来定义和继承对象。它在一些大型、复杂的项目中,特别是需要严格的对象模型和继承层次时,依然具有优势。
- 工具库和框架:在一些工具库和框架中,class 仍然被广泛使用。例如,很多 JavaScript 库(如 Three.js、Vue.js 等)依然使用 class 来定义核心对象和模块。
- 服务器端开发:在 Node.js 环境中,class 也经常被用来定义模块和组件,特别是在使用 TypeScript 时
总结
针对 class 而言,虽然我们在日常的项目开发中很少有应用场景。但是在进行 库(原生的 JS 或 TS) 开发时,class 依然具备独特的优势。