JavaScript类的封装操作示例详解

类是现代 JavaScript 开发中最常见的封装形式之一，通过类的封装可以将相关代码组织在一起，实现更好的封装和抽象。本篇攻略将介绍 JavaScript 类的封装操作，并提供两个示例供参考。

定义一个类

定义一个类的基础语法与 C++、Java 等语言类似，通过 class 关键字加上类的名称定义一个类，类的主体部分则由一对大括号组成。

class Person {
  // 类的属性
  name;
  age;

  // 类的方法
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old`);
  }
}

上述代码定义了一个 Person 类，该类有两个属性 name 和 age 以及一个方法 sayHello。其中 constructor 方法是类的构造函数，用于初始化对象的属性。

实例化对象

类是一个模板，通过该模板可以创建出多个实例对象。实例化对象时，使用 new 关键字加上类的名称即可。

const person = new Person('Tom', 18);

person 实例对象拥有类的属性和方法，可以使用 .name 和 .age 访问对象的属性，使用 .sayHello() 调用对象的方法。

类的继承

JavaScript 类也支持继承操作，通过 extends 关键字来实现。

class Student extends Person {
  id;

  constructor(name, age, id) {
    // 调用父类的构造函数
    super(name, age);
    this.id = id;
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}

上述代码定义了一个 Student 类，该类继承自 Person 类，具有类的属性 name、age 和 id，以及类的方法 constructor 和 study。在 constructor 方法中使用 super 关键字调用父类的构造函数，以初始化 name 和 age 属性。

示例一：封装队列类

下面将给出一个封装队列的示例。

class Queue {
  data = [];

  // 入队操作
  enqueue(item) {
    this.data.push(item);
  }

  // 出队操作
  dequeue() {
    return this.data.shift();
  }

  // 判断队列是否为空
  isEmpty() {
    return this.data.length === 0;
  }
}

上述代码定义了一个 Queue 类，该类有一个属性 data、三个方法 enqueue、dequeue 和 isEmpty。enqueue 方法实现入队操作，将一个元素加入队列末尾；dequeue 方法实现出队操作，将队列头部元素弹出并返回；isEmpty 方法返回队列是否为空。

使用示例：

const queue = new Queue();
queue.enqueue('A');
queue.enqueue('B');
queue.enqueue('C');

console.log(queue.isEmpty()); // 输出 false
console.log(queue.dequeue()); // 输出 A
console.log(queue.dequeue()); // 输出 B
console.log(queue.dequeue()); // 输出 C
console.log(queue.isEmpty()); // 输出 true

示例二：封装日期类

下面将给出一个封装日期类的示例。

class MyDate {
  year;
  month;
  day;

  constructor(year, month, day) {
    this.year = year;
    this.month = month;
    this.day = day;
  }

  // 将日期格式化为字符串
  toString() {
    return `${this.year}-${this.month}-${this.day}`;
  }

  // 获取该日期所在的年份
  getYear() {
    return this.year;
  }

  // 获取该日期所在的月份
  getMonth() {
    return this.month;
  }

  // 获取该日期所在的日份
  getDay() {
    return this.day;
  }

  // 判断当前日期是否是闰年
  isLeapYear() {
    return (this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0;
  }
}

上述代码定义了一个 MyDate 类，该类有三个属性 year、month 和 day，以及四个方法 constructor、toString、getYear 和 isLeapYear。其中 constructor 方法用于初始化日期的年、月、日；toString 方法用于将日期格式化为字符串；getYear、getMonth 和 getDay 三个方法分别返回日期的年、月、日；isLeapYear 方法用于判断当前日期所在的年份是否是闰年。

使用示例：

const date = new MyDate(2021, 9, 31);
console.log(date.toString()); // 输出 2021-9-31
console.log(date.getYear()); // 输出 2021
console.log(date.getMonth()); // 输出 9
console.log(date.getDay()); // 输出 31
console.log(date.isLeapYear()); // 输出 false