多年來(lái)，OOP(面向?qū)ο缶幊?是軟件工程中的事實(shí)上的標(biāo)準(zhǔn)。類(lèi)，多態(tài)性，繼承和封裝的概念主導(dǎo)了開(kāi)發(fā)過(guò)程，并對(duì)其產(chǎn)生了革命性的影響。但是所有內(nèi)容都有有效期限，其中包括編程范例。在本文中，我將討論為什么首先引入類(lèi)，為什么在JavaScript中使用類(lèi)是一個(gè)壞主意，以及一些替代方法。

ES6之前的classes

即使自ES6(ECMAScript 2015)起將class關(guān)鍵字添加到JavaScript中，人們?nèi)栽谑褂妙?lèi)。實(shí)現(xiàn)的方法是構(gòu)造函數(shù)和原型委托。為了確切地說(shuō)明我的意思，我將在ES5和ES6環(huán)境中實(shí)現(xiàn)相同的類(lèi)?？紤]一個(gè)繼承自 Car 的 Car 和 SportsCar 類(lèi)。兩者都有品牌( make )、型號(hào)( model )屬性和啟動(dòng)方式( start )，但SportsCar還有渦輪增壓( turbocharged )屬性，并覆蓋啟動(dòng)方式(start)。

 
 
 
  
  
  
// "class" 聲明 
  
  
  
function Car(make, model) { 
  
  
  
  this.make = make; 
  
  
  
  this.model = model; 
  
  
  
} 
  
  
  
 
  
  
  
// 啟動(dòng)方法 
  
  
  
Car.prototype.start = function() { 
  
  
  
  console.log('vroom'); 
  
  
  
} 
  
  
  
 
  
  
  
// 覆蓋toString方法 
  
  
  
Car.prototype.toString = function() { 
  
  
  
  console.log('Car - ' + this.make + ' - ' + this.model); 
  
  
  
} 
  
  
  
 
  
  
  
// 繼承實(shí)例 
  
  
  
function SportsCar(make, model, turbocharged) { 
  
  
  
  Car.call(this, make, model); 
  
  
  
  this.turbocharged = turbocharged; 
  
  
  
} 
  
  
  
 
  
  
  
// 實(shí)際繼承邏輯 
  
  
  
SportsCar.prototype = Object.create(Car.prototype); 
  
  
  
SportsCarSportsCar.prototype.constructor = SportsCar; 
  
  
  
 
  
  
  
// 覆蓋啟動(dòng)方法 
  
  
  
SportsCar.prototype.start = function() { 
  
  
  
  console.log('VROOOOM'); 
  
  
  
} 
  
  
  
 
  
  
  
// 現(xiàn)在測(cè)試課程 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 
 
 

你可能已經(jīng)猜到了，Car(第2行)和 SportsCar(第18行)函數(shù)是構(gòu)造函數(shù)。使用此關(guān)鍵字定義屬性，并使用 new 創(chuàng)建對(duì)象本身。如果你不熟悉 prototype，則這是每個(gè)JS對(duì)象都必須委派常見(jiàn)行為的特殊屬性。例如，數(shù)組對(duì)象的原型具有你可能熟知的函數(shù)：map，forEach，find等。字符串原型具有功能replace，substr等。

在第33行上創(chuàng)建Car對(duì)象之后，可以訪問(wèn)其屬性和方法。從第34行開(kāi)始的調(diào)用導(dǎo)致以下操作：

• JS引擎要求 car 對(duì)象提供一個(gè)鍵為 start 的值。
• 對(duì)象回應(yīng)說(shuō)它沒(méi)有這樣的值。
• JS引擎向 car.prototype 對(duì)象詢問(wèn)以鍵 start 開(kāi)頭的值。
• car.prototype 返回JS引擎立即執(zhí)行的 start 函數(shù)。

訪問(wèn)make和model屬性的操作類(lèi)似，只是它們是直接在汽車(chē)對(duì)象上定義的，而不是原型。

繼承有點(diǎn)棘手，它在第24-25行處理。這里最重要的函數(shù)是 Object.create 函數(shù)，它接受一個(gè)對(duì)象并返回一個(gè)全新的對(duì)象，其原型設(shè)置為作為參數(shù)傳遞的對(duì)象?，F(xiàn)在，如果JS引擎在 sportsCar 對(duì)象或 sportsCar.prototype 上沒(méi)有找到一個(gè)值，它將查閱 sportsCar.prototype.prototype 是 Car 對(duì)象的原型。

ES6 Class關(guān)鍵字

隨著2015年ES6的發(fā)布，人們期待已久的 class 關(guān)鍵字出現(xiàn)在JavaScript中。這是應(yīng)社區(qū)的多次要求而做的，因?yàn)槿藗儗?duì)來(lái)自面向?qū)ο蟮恼Z(yǔ)言感到不適應(yīng)。但他們忽略了一個(gè)重要的問(wèn)題。

JavaScript不知道什么是類(lèi)

JavaScript不是一門(mén)面向?qū)ο蟮恼Z(yǔ)言，它不是被設(shè)計(jì)成這樣的語(yǔ)言，類(lèi)的概念絕對(duì)不適用于它。雖然JS中的所有內(nèi)容確實(shí)都是對(duì)象，但這些對(duì)象與Java或C#中的對(duì)象不同。在JS中，對(duì)象只是具有某種復(fù)雜查找過(guò)程的Map數(shù)據(jù)結(jié)構(gòu)。就是這樣。當(dāng)我說(shuō)一切都是對(duì)象時(shí)，我是說(shuō)真的：甚至函數(shù)都是對(duì)象。你可以通過(guò)以下代碼片段進(jìn)行檢查：

 
 
 
  
  
  
function iAmAnObject() {} 
  
  
  
 
  
  
  
console.log(iAmAnObject.name); // iAmAnObject 
  
  
  
console.log(Object.keys(iAmAnObject)); // Array [] 
 
 

好的，這一切都很好，但是 class 關(guān)鍵字如何工作呢?很高興你問(wèn)。你還記得前面的 Car 和 SportsCar 示例嗎?好吧，class 關(guān)鍵字只是最重要的語(yǔ)法糖。換句話說(shuō)，類(lèi)在概念上產(chǎn)生相同的代碼，并且僅用于美學(xué)和可讀性目的。正如我之前所承諾的，這是ES6中這些相同類(lèi)的示例：

 
 
 
  
  
  
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'); 
  
  
  
  } 
  
  
  
} 
  
  
  
 
  
  
  
 
  
  
  
// 實(shí)際用法保持不變 
  
  
  
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 
 
 

這些示例相同，并且產(chǎn)生相同的結(jié)果，有趣的是，它們?cè)诤笈_(tái)生成(幾乎)相同的代碼。

為什么不?

現(xiàn)在，你應(yīng)該了解JS中的類(lèi)是什么以及它們?nèi)绾喂ぷ鳌，F(xiàn)在，憑借所有這些知識(shí)，我可以解釋為什么在JS中使用類(lèi)是一個(gè)壞主意。

• 綁定問(wèn)題。由于類(lèi)構(gòu)造函數(shù)與這個(gè)關(guān)鍵字密切打交道，它可能會(huì)引入潛在的綁定問(wèn)題，特別是當(dāng)你試圖將你的類(lèi)方法作為回調(diào)傳遞給外部例程時(shí)(你好，React開(kāi)發(fā)人員)。
• 性能問(wèn)題。由于類(lèi)的實(shí)現(xiàn)，眾所周知，它們很難在運(yùn)行時(shí)進(jìn)行優(yōu)化。雖然目前我們享受著高性能的機(jī)器，但摩爾定律正在逐漸消失的事實(shí)可以改變這一切。
• 私有變量。首先，私有變量的最大優(yōu)點(diǎn)和主要原因之一就是類(lèi)在JS中不存在。
• 嚴(yán)格的層次結(jié)構(gòu)。類(lèi)直接引入了從上到下的順序，使得更改更難實(shí)現(xiàn)，這在大多數(shù)JS應(yīng)用程序中是不可接受的。
• 因?yàn)镽eact團(tuán)隊(duì)會(huì)告訴你不要這樣做。雖然他們還沒(méi)有明確廢棄基于類(lèi)的組件，但很可能在不久的將來(lái)就會(huì)廢棄。

所有這些問(wèn)題都可以通過(guò)JS對(duì)象和原型委托得到緩解。 JS提供了這么多類(lèi)所能做的事情，但大多數(shù)開(kāi)發(fā)者卻對(duì)此視而不見(jiàn)。如果你想真正掌握J(rèn)S，你需要接受它的理念，擺脫教條式的類(lèi)思維。

標(biāo)題名稱(chēng)：請(qǐng)停止在JavaScript中使用類(lèi)，你將成為一名更好的開(kāi)發(fā)人員
網(wǎng)站地址：http://uogjgqi.cn/article/dhcjiii.html