前端技術尤其是JavaScript瓦胎，經(jīng)常被后端覺得不是正經(jīng)編程語言芬萍，大多數(shù)是因為JavaScript是基于函數(shù)的語言，因此潛在上使得它在使用和發(fā)展上有所局限搔啊。

我記得在90年代末和21世紀初柬祠，JavaScript主要用于使html頁面更加動態(tài)。比如實現(xiàn)一些彈窗负芋，跑馬燈之類的視覺效果漫蛔。

現(xiàn)在，我們有很多框架旧蛾，庫莽龟，甚至后端系統(tǒng)都在使用JavaScript。用JavaScript開發(fā)一個移動應用和桌面應用程序-在以前是聞所未聞的锨天，但如今毯盈，這些我們經(jīng)常聽說甚至已經(jīng)投入使用了。現(xiàn)在我們還可以用JavaScript實現(xiàn)跨平臺開發(fā)病袄！

JavaScript無處不在搂赋，你可以使用JavaScript輕松完成很多有趣的東西。但隨之而來的是潛在的長期問題陪拘。許多JavaScript開發(fā)者并沒有像java開發(fā)者一樣習慣使用面向對象編程厂镇，或者說沒有面向對象編程這方面的訓練。這很正常左刽，因為我們經(jīng)常為了追趕進度完成手頭的工作，忽略了一些我們還不知道的內容

什么是面向對象編程酌媒？

面向對象的編程是一種思想欠痴，一種心態(tài)。它背后的想法是秒咨，你為你想象中的對象創(chuàng)建了一個藍圖喇辽，然后一次又一次地調用它來完成各種各樣的功能。每次你想使用一個對象時雨席，你必須先創(chuàng)建它這樣它才會存在菩咨，然后設置它的屬性，以便使用附加到它的功能。這些功能被稱為“方法”抽米。

例如特占，一個CustomerOrder對象可能附加了一個GET：Order Details功能(又名方法)。

//基于類
class CustomerOrder{
  constructor(customerId,orderId){
    this.customerId = customerId;
    this.orderId = orderId
  }
  get orderDetails(){
    return this.pullOrderDetails();
  }
  pullOrderDetails(){
    //一些操作
    return 
  }
}
const order_1 = new CustomerOrder(87873,"Cus-001")

console.log(order_1.orderDetails)

我們來看另一個基于函數(shù)的方法：

//基于函數(shù)
const customerId = 8787
const orderId = "Cus-001"
function pullOrderDetails(customerId,orderId){
  //一些操作
  return
}
console.log(pullOrderDetails(87873,"Cus-001"))

上面的問題在于云茸，函數(shù)的數(shù)量多起來時是目，很快就會變得混亂。雖然將所有內容都編寫為函數(shù)标捺，然后根據(jù)需要來調用懊纳，在一開始可能會很方便，但是日積月累亡容，函數(shù)之間的關聯(lián)關系錯綜復雜嗤疯，一旦發(fā)生變更，你可能需要修改很多函數(shù)闺兢，也會引起很多未知問題身弊。

可能有些難理解，我們看下面的圖（使用類的情況）：

image

constructor是設置變量的地方列敲，Getter和setter方法是類做事的入口阱佛。使用什么函數(shù)以及如何使用它們都是隱藏的。每次創(chuàng)建一個新對象時戴而，整個類及其方法都會被“克隆”凑术，并可訪問需要的內容。發(fā)生變更時所意，我們也只需要在類上一次修改淮逊，便可以全局生效。

我們再看下面的圖（使用函數(shù)的情況）

image

當我們用一堆松散的函數(shù)編寫代碼時扶踊，它的更改范圍通常沒有定義泄鹏。依賴項注入是使函數(shù)正常工作所必需的，而一個函數(shù)常常需要另一個函數(shù)才能正常工作秧耗。從表面上看备籽，基于函數(shù)的編程可能一開始看起來很簡單，但從長遠來看分井，維護它是一個邏輯上的噩夢车猬。

使用面向對象編程，您只需要調用getter和setter方法來訪問黑盒功能尺锚。作為類的消費者珠闰，你不需要知道它是如何工作的。你只需要知道它是有效的瘫辩。

為什么我們要在JavaScript中采用面向對象編程

上面的兩幅圖能看出來伏嗜，過度依賴基于函數(shù)的編程可能很快就能完成任務坛悉，但是長遠來看，這會存在很高的風險承绸。

隨著代碼量的增長裸影，你就需要改變組織代碼的思維方式，并考慮采用面向對象八酒。與通過一系列依賴注入串在一起的函數(shù)相比空民，對象的則更容易追蹤和掌握。

下面的代碼是基于函數(shù)：

image

你會需要知道整個調用鏈羞迷，以便弄清楚如何實現(xiàn)你的目的界轩。當然也很亂，不易理解衔瓮。

基于函數(shù)的編程的問題是浊猾，鏈的中斷可能導致整個流程的失敗。對于對象热鞍，一個被破壞的方法不會(也不應該)影響類的其他部分葫慎。

下面的代碼是基于類（面向對象）：

image

這種方法，可能代碼量不會少多少薇宠，但你可以復用它偷办，而不需要寫很長的調用鏈。

當你思考問題時澄港，是基于類椒涯，而不是一系列相互關聯(lián)的函數(shù)時，代碼自然會減少出現(xiàn)問題的風險回梧。因為每一次依賴注入都會增加一次潛在錯誤的可能废岂，而且尋找錯誤時，也會花費更多的時間和精力狱意。湖苞、

最后

面向對象編程是一種主動的行為，你可以選擇使用详囤，也可以選擇不使用财骨。隨著前端體系的日益龐大，代碼量和應用場景也遠超于從前纬纪，我們更需要思考面向對象編程的重要性蚓再。

面向對象編程的資料：

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_JS