請停止在JavaScript中使用類，你將成為一名更好的開發人員
多年來，OOP(面向對象編程)是軟件工程中的事實上的標準。類，多態性，繼承和封裝的概念主導了開發過程，并對其產生了革命性的影響。但是所有內容都有有效期限，其中包括編程范例。在本文中，我將討論為什么首先引入類，為什么在JavaScript中使用類是一個壞主意，以及一些替代方法。
ES6之前的classes
即使自ES6(ECMAScript 2015)起將class關鍵字添加到JavaScript中，人們仍在使用類。實現的方法是構造函數和原型委托。為了確切地說明我的意思，我將在ES5和ES6環境中實現相同的類。考慮一個繼承自 Car 的 Car 和 SportsCar 類。兩者都有品牌( make )、型號( model )屬性和啟動方式( start )，但SportsCar還有渦輪增壓( turbocharged )屬性，并覆蓋啟動方式(start)。
- // "class" 聲明
- function Car(make, model) {
- this.make = make;
- this.model = model;
- }
- // 啟動方法
- Car.prototype.start = function() {
- console.log('vroom');
- }
- // 覆蓋toString方法
- Car.prototype.toString = function() {
- console.log('Car - ' + this.make + ' - ' + this.model);
- }
- // 繼承實例
- function SportsCar(make, model, turbocharged) {
- Car.call(this, make, model);
- this.turbocharged = turbocharged;
- }
- // 實際繼承邏輯
- SportsCar.prototype = Object.create(Car.prototype);
- SportsCarSportsCar.prototype.constructor = SportsCar;
- // 覆蓋啟動方法
- SportsCar.prototype.start = function() {
- console.log('VROOOOM');
- }
- // 現在測試課程 classes
- var car = new Car('Nissan', 'Sunny');
- car.start(); // vroom
- console.log(car.make); // Nissan
- var sportsCar = new SportsCar('Subaru', 'BRZ', true);
- sportsCar.start(); // VROOOOM
- console.log(car.turbocharged); // true
你可能已經猜到了，Car(第2行)和 SportsCar(第18行)函數是構造函數。使用此關鍵字定義屬性，并使用 new 創建對象本身。如果你不熟悉 prototype，則這是每個JS對象都必須委派常見行為的特殊屬性。例如，數組對象的原型具有你可能熟知的函數：map，forEach，find等。字符串原型具有功能replace，substr等。
在第33行上創建Car對象之后，可以訪問其屬性和方法。從第34行開始的調用導致以下操作：
- JS引擎要求 car 對象提供一個鍵為 start 的值。
- 對象回應說它沒有這樣的值。
- JS引擎向 car.prototype 對象詢問以鍵 start 開頭的值。
- car.prototype 返回JS引擎立即執行的 start 函數。
訪問make和model屬性的操作類似，只是它們是直接在汽車對象上定義的，而不是原型。
繼承有點棘手，它在第24-25行處理。這里最重要的函數是 Object.create 函數，它接受一個對象并返回一個全新的對象，其原型設置為作為參數傳遞的對象。現在，如果JS引擎在 sportsCar 對象或 sportsCar.prototype 上沒有找到一個值，它將查閱 sportsCar.prototype.prototype 是 Car 對象的原型。
ES6 Class關鍵字
隨著2015年ES6的發布，人們期待已久的 class 關鍵字出現在JavaScript中。這是應社區的多次要求而做的，因為人們對來自面向對象的語言感到不適應。但他們忽略了一個重要的問題。
JavaScript不知道什么是類
JavaScript不是一門面向對象的語言，它不是被設計成這樣的語言，類的概念絕對不適用于它。雖然JS中的所有內容確實都是對象，但這些對象與Java或C#中的對象不同。在JS中，對象只是具有某種復雜查找過程的Map數據結構。就是這樣。當我說一切都是對象時，我是說真的：甚至函數都是對象。你可以通過以下代碼片段進行檢查：
- function iAmAnObject() {}
- console.log(iAmAnObject.name); // iAmAnObject
- console.log(Object.keys(iAmAnObject)); // Array []
好的，這一切都很好，但是 class 關鍵字如何工作呢?很高興你問。你還記得前面的 Car 和 SportsCar 示例嗎?好吧，class 關鍵字只是最重要的語法糖。換句話說，類在概念上產生相同的代碼，并且僅用于美學和可讀性目的。正如我之前所承諾的，這是ES6中這些相同類的示例：
- class Car {
- constructor(make, model) {
- this.make = make;
- this.model = model;
- }
- start() {
- console.log('vroom');
- }
- toString() {
- console.log(`Car - ${this.make} - ${this.model}`);
- }
- }
- class SportsCar extends Car {
- constructor(make, model, turbocharged) {
- super(make, model);
- this.turbocharged = turbocharged;
- }
- start() {
- console.log('VROOOOM');
- }
- }
- // 實際用法保持不變
- var car = new Car('Nissan', 'Sunny');
- car.start(); // vroom
- console.log(car.make); // Nissan
- var sportsCar = new SportsCar('Subaru', 'BRZ', true);
- sportsCar.start(); // VROOOOM
- console.log(car.turbocharged); // true
這些示例相同，并且產生相同的結果，有趣的是，它們在后臺生成(幾乎)相同的代碼。
為什么不?
現在，你應該了解JS中的類是什么以及它們如何工作。現在，憑借所有這些知識，我可以解釋為什么在JS中使用類是一個壞主意。
- 綁定問題。由于類構造函數與這個關鍵字密切打交道，它可能會引入潛在的綁定問題，特別是當你試圖將你的類方法作為回調傳遞給外部例程時(你好，React開發人員)。
- 性能問題。由于類的實現，眾所周知，它們很難在運行時進行優化。雖然目前我們享受著高性能的機器，但摩爾定律正在逐漸消失的事實可以改變這一切。
- 私有變量。首先，私有變量的最大優點和主要原因之一就是類在JS中不存在。
- 嚴格的層次結構。類直接引入了從上到下的順序，使得更改更難實現，這在大多數JS應用程序中是不可接受的。
- 因為React團隊會告訴你不要這樣做。雖然他們還沒有明確廢棄基于類的組件，但很可能在不久的將來就會廢棄。
所有這些問題都可以通過JS對象和原型委托得到緩解。 JS提供了這么多類所能做的事情，但大多數開發者卻對此視而不見。如果你想真正掌握JS，你需要接受它的理念，擺脫教條式的類思維。
