前端技術尤其是JavaScript，經常被後端覺得不是正經程式語言，大多數是因為JavaScript是基於函式的語言，因此潛在上使得它在使用和發展上有所侷限。
我記得在90年代末和21世紀初，JavaScript主要用於使html頁面更加動態。比如實現一些彈窗，跑馬燈之類的視覺效果。
現在，我們有很多框架，庫，甚至後端系統都在使用JavaScript。用JavaScript開發一個移動應用和桌面應用程式-在以前是聞所未聞的，但如今，這些我們經常聽說甚至已經投入使用了。現在我們還可以用JavaScript實現跨平臺開發！
JavaScript無處不在，你可以使用JavaScript輕鬆完成很多有趣的東西。但隨之而來的是潛在的長期問題。許多JavaScript開發者並沒有像java開發者一樣習慣使用物件導向程式設計，或者說沒有物件導向程式設計這方面的訓練。這很正常，因為我們經常為了追趕進度完成手頭的工作，忽略了一些我們還不知道的內容
什麼是物件導向程式設計？
物件導向的程式設計是一種思想，一種心態。它背後的想法是，你為你想象中的物件建立了一個藍圖，然後一次又一次地呼叫它來完成各種各樣的功能。每次你想使用一個物件時，你必須先建立它這樣它才會存在，然後設定它的屬性，以便使用附加到它的功能。這些功能被稱為“方法”。
例如，一個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)
複製程式碼我們來看另一個基於函式的方法：
//基於函式
const customerId = 8787
const orderId = "Cus-001"
function pullOrderDetails(customerId,orderId){
//一些操作
return
}
console.log(pullOrderDetails(87873,"Cus-001"))
複製程式碼上面的問題在於，函式的數量多起來時，很快就會變得混亂。雖然將所有內容都編寫為函式，然後根據需要來呼叫，在一開始可能會很方便，但是日積月累，函式之間的關聯關係錯綜複雜，一旦發生變更，你可能需要修改很多函式，也會引起很多未知問題。
可能有些難理解，我們看下面的圖（使用類的情況）：
constructor是設定變數的地方，Getter和setter方法是類做事的入口。使用什麼函式以及如何使用它們都是隱藏的。每次建立一個新物件時，整個類及其方法都會被“克隆”，並可訪問需要的內容。發生變更時，我們也只需要在類上一次修改，便可以全域性生效。
我們再看下面的圖（使用函式的情況）
當我們用一堆鬆散的函式編寫程式碼時，它的更改範圍通常沒有定義。依賴項注入是使函式正常工作所必需的，而一個函式常常需要另一個函式才能正常工作。從表面上看，基於函式的程式設計可能一開始看起來很簡單，但從長遠來看，維護它是一個邏輯上的噩夢。
使用物件導向程式設計，您只需要呼叫getter和setter方法來訪問黑盒功能。作為類的消費者，你不需要知道它是如何工作的。你只需要知道它是有效的。
為什麼我們要在JavaScript中採用物件導向程式設計
上面的兩幅圖能看出來，過度依賴基於函式的程式設計可能很快就能完成任務，但是長遠來看，這會存在很高的風險。
隨著程式碼量的增長，你就需要改變組織程式碼的思維方式，並考慮採用物件導向。與通過一系列依賴注入串在一起的函式相比，物件的則更容易追蹤和掌握。
下面的程式碼是基於函式：
基於函式的程式設計的問題是，鏈的中斷可能導致整個流程的失敗。對於物件，一個被破壞的方法不會(也不應該)影響類的其他部分。
下面的程式碼是基於類（物件導向）：
這種方法，可能程式碼量不會少多少，但你可以複用它，而不需要寫很長的呼叫鏈。
當你思考問題時，是基於類，而不是一系列相互關聯的函式時，程式碼自然會減少出現問題的風險。因為每一次依賴注入都會增加一次潛在錯誤的可能，而且尋找錯誤時，也會花費更多的時間和精力。、
最後
物件導向程式設計是一種主動的行為，你可以選擇使用，也可以選擇不使用。隨著前端體系的日益龐大，程式碼量和應用場景也遠超於從前，我們更需要思考物件導向程式設計的重要性。
物件導向程式設計的資料：
developer.mozilla.org/zh-CN/docs/…
———————————————————————————————————————————————————
放學別走！長按二維碼關注 【技術人生路】，無償免費獲取前端學習進階資料，培訓實戰視訊，就業指導等眾多福利哦。我相信我們都是愛學習愛進步的呀！