是時候談談JavaScript面向對象了！(咱們何時更須要它)

前端技術尤爲是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/…

———————————————————————————————————————————————————

放學別走！長按二維碼關注 【技術人生路】，無償免費獲取前端學習進階資料，培訓實戰視頻，就業指導等衆多福利哦。我相信咱們都是愛學習愛進步的呀！