JavaScript最佳實踐之改進類頭條網

JavaScript最佳實踐之改進類

2021-04-05 13:34:46 佚名

使用默認參數和屬性縮寫，清理我們的JavaScript代碼很容易。

在本文中，我們將探討創建類的最佳做法以及何時創建類。

構造函數

為了讓我們的構造函數更好地發揮作用，我們應該做一些事情。它們是：

如果可能的話，初始化所有構造函數中的所有成員數據

我們應該將它們全部放入構造函數中，以便在實例化對象時將它們全部初始化。

所以我們可以這樣寫：

<code>
class
 Person
 {
  constructor(name) {
    if
 (this.instance) {
      this.instance = {
        name
      }
    }
    return
 this.instance;
  }
}/<code>

現在我們確保所有的東西都用一個值初始化了。

在構造函數中創建一個單例

如果我們只需要一個構造函數的一個實例，那麼我們可以創建一個實例。

例如，我們可以編寫以下代碼：

<code>
class
 Person
 {
  constructor(name) {
    if
 (this.instance) {
      this.instance = {
        name
      }
    }
    return
 this.instance;
  }
}/<code>

在上面的代碼中，如果 this.instance 還沒有定義，我們返回我們創建的對象。

否則，我們將返回設置為 this.instance 的任何內容。

優先使用深度拷貝而不是淺拷貝

深度拷貝會複製所有內容，因此比淺層複製要好得多，淺拷貝會留下一些引用原始對象的東西。

如果我們想要真正的副本，那就不好了。

因此，我們必須編寫代碼來製作深層副本，如下所示：

<code>const
 copy = 
obj
 => {
  const copied = {
    ...obj
  };
  for
 (const
 k of
 Object.keys(obj)) {
    if
 (typeof
 obj[k] === 'object') {
      copied[k] = {
        ...copied[k]
      };
      copy(copied[k]);
    }
  }
  return copied;
}/<code>

如果發現嵌套對象，我們只使用擴展運算符來複制嵌套對象，並遞歸執行相同的操作。

然後，我們返回我們複製的對象。

我們什麼時候應該創建一個類？

我們不應該總是創建類。在一些場景中，創建一個類是有意義的。

模擬現實世界的對象

類非常適合建模真實世界的對象，因為它們可以建模對象的行為。

它們允許我們將實例變量和方法封裝到一個包中，分別存儲狀態和對對象執行操作。

建模抽象對象

同樣，我們可以使用類對抽象對象進行建模。

它們可以用來進行抽象，抽象是對不同類型對象的概括。

類非常適合存放子類的共享成員，子類可以繼承它們。

但是，我們應該保持繼承樹的簡單性，這樣人們就不會被代碼弄糊塗了。

降低複雜度

我們可以使用類來降低程序的複雜性。

類非常適合隱藏信息。在JavaScript中，類中還沒有私有變量，因此我們必須在方法中隱藏數據。

這樣我們就可以最小化程序不同部分之間的耦合。

隱藏實現細節

方法也適合隱藏實現細節。

我們可以把細節隱藏在方法中，只運行需要的東西。

為此，我們可以在方法內部嵌套函數和變量。

限制變化的副作用

由於我們可以隱藏事物，因此可以減少更改的影響。

與隱藏實現一樣，可以通過在方法內限制更改的影響來隔離更改的影響。

隱藏全局數據

通過將全局數據放入類的方法中，它們可以成為私有數據。

這樣，他們就不必向公眾公開。我們要做的就是使用 let 和 const 在方法中聲明它們。

簡化參數傳遞

如果我們將相同的參數傳遞給不同的函數，則可以將參數更改為實例變量，將函數更改為方法。

例如，如果我們有：

<code>const
 speak = (
name
) =>
 `
${name}
 spoke`;
const
 greet = (
name 
) =>
 `hi, 
${name}
`
;/<code>

然後，我們可以將方法放入自己的類中，如下所示：

<code>
class
 Person
 {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return
 `
${
this
.name}
 spoke`;
  }
  greet() {
    return
 `hi, 
${
this
.name}
`;
  }
}/<code>