JS封装篇 | 结构清晰，逻辑严谨

2023-11-10 22:53:24

封装，顾名思义，就是把一个零散的东西做成一个组件。打个很简单的比方，有的人用电脑不需要机箱，主板、内存条、显卡、电源都裸露在外面，他觉得这样挺好，可以散热。但是，大部分人还是会用机箱把所有的硬件都包装起来。优点嘛，第一便于到处使用。第二，当某个硬件出现问题时，更换起来也比较方便。

那么，在JS中，如何实现封装呢？答案是，通过类。类可以将数据和方法封装在一起，形成一个独立的实体。这样，我们就能够提高代码的可复用性、可维护性和可读性。

1. 类与对象

在JS中，类是用来创建对象的模板。我们可以通过class来定义一个类，例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  speak() {
    console.log(`My name is ${this.name} and I am ${this.age} years old.`);
  }
}

这个类定义了一个Person对象，该对象具有name和age两个属性，以及一个speak方法。我们可以通过new关键字来创建一个Person对象，例如：

const person = new Person('John', 30);

person.speak(); // My name is John and I am 30 years old.

2. 封装

类中的属性和方法默认都是public的，这意味着它们可以在类的任何地方访问。但是，我们也可以通过在属性或方法前加上private关键字来使其成为private的，这意味着它们只能在类内部访问。例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.#age = age; // private
  }

  speak() {
    console.log(`My name is ${this.name} and I am ${this.#age} years old.`);
  }
}

现在，age属性就成为了一个private属性，只能在类内部访问。如果我们在类的外部尝试访问它，就会报错。

3. 模块

在JS中，我们可以通过module关键字来定义一个模块。模块是JS代码的一个独立单元，它可以包含变量、函数、类等。我们可以通过export关键字来将模块中的内容暴露给外部，例如：

// person.js
export class Person {
  constructor(name, age) {
    this.name = name;
    this.#age = age; // private
  }

  speak() {
    console.log(`My name is ${this.name} and I am ${this.#age} years old.`);
  }
}

// main.js
import { Person } from './person.js';

const person = new Person('John', 30);

person.speak(); // My name is John and I am 30 years old.