Hello，大家好，我是 Sunday。

在 ES6 的規(guī)范中（2015年），ECMAScript 推出了 class 語法。

class 本質上是對基于原型的繼承機制的一種語法糖，其目的是為了使定義和繼承對象更加簡潔和清晰。并且，這種語法在其他的語言（比如：java）中都有非常廣泛的應用。

但是，不知道從什么時候開始，我們好像已經(jīng)逐漸遺忘了 class，特別是在現(xiàn)在基于框架（Vue 或者 React）的項目中。

那么到底是因為什么原因導致 class 逐漸沒落，目前 class 的應用場景又是什么呢？今天，咱們就來看一看這個問題。

01：JS 的獨特特性

JavaScript 是一種動態(tài)、弱類型的語言，具有其獨特的特性：

• 原型繼承：JS 的核心是基于原型的繼承機制，而不是傳統(tǒng)的類繼承。每個對象可以作為另一個對象的原型，從而實現(xiàn)屬性和方法的共享。
• 函數(shù)式編程：函數(shù)是 JS 中的一等公民。同時在 JS 中我們習慣了使用函數(shù)可以作為參數(shù)傳遞，也可以作為返回值。
• 靈活性：JS 是一種弱類型語言，變量可以在不同時間持有不同類型的值。這種動態(tài)特性使得語言更加靈活。同時對象的結構可以在運行時動態(tài)改變，屬性可以隨時添加、刪除或修改

這些特性使得 JavaScript 在很長一段時間內依賴于 構造函數(shù)和原型鏈 來實現(xiàn)面向對象編程，而不是類繼承。

02：Vue 和 React 并不推崇使用 class

Vue 和 React 是目前兩個最受歡迎的框架，但是它們并不推崇使用 class 語法：

Vue

• 選項式 API：Vue 2 采用的是選項式 API，我們通過定義對象的屬性（如 data、methods、computed 等）來構建組件，而不是通過類繼承。
• 組合式 API：Vue 3 引入了組合式 API（Composition API），提供了一種更靈活的方式來組織和復用邏輯，通過函數(shù)和鉤子的組合來管理狀態(tài)和生命周期方法，而不依賴于 class。

React

• 函數(shù)組件：React 從一開始就支持函數(shù)組件，隨著 React 16.8 引入 Hooks，函數(shù)組件變得更加強大和靈活，幾乎可以替代類組件的所有功能。所以，從 16.8 以后 React 不再推薦使用類組件。而專用函數(shù)是組件和 hooks
• Hooks：Hooks 提供了在函數(shù)組件中管理狀態(tài)和副作用的能力，例如 useState、useEffect、useContext 等，這些 hooks 目前是組件 react 項目的核心功能

基于此，我們可以在線，目前無論是 Vue 還是 React，都不在有使用 class 的場景。

那么，目前 class 就已經(jīng)完全沒有應用場景了嗎？也不是！

03：class 的應用場景有什么？

盡管 class 在項目前端開發(fā)中逐漸減少使用，但它在一些特定場景中仍然有其獨特的應用價值：

• 面向對象編程（OOP）：對于那些習慣于面向對象編程的開發(fā)者（特別是 java 轉前端的開發(fā)者），class 提供了一種更熟悉和直觀的方式來定義和繼承對象。它在一些大型、復雜的項目中，特別是需要嚴格的對象模型和繼承層次時，依然具有優(yōu)勢。
• 工具庫和框架：在一些工具庫和框架中，class 仍然被廣泛使用。例如，很多 JavaScript 庫（如 Three.js、Vue.js 等）依然使用 class 來定義核心對象和模塊。
• 服務器端開發(fā)：在 Node.js 環(huán)境中，class 也經(jīng)常被用來定義模塊和組件，特別是在使用 TypeScript 時

總結

針對 class 而言，雖然我們在日常的項目開發(fā)中很少有應用場景。但是在進行 庫（原生的 JS 或 TS） 開發(fā)時，class 依然具備獨特的優(yōu)勢。