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>