重回ES6：第五部分 - 类、方法和继承

2024-02-22 08:58:24

在JavaScript的世界里，ES6的到来就像一场春雨，滋润了原本略显干涸的代码土壤。其中，类（Class）的引入无疑是这场春雨中最耀眼的一滴。它为前端开发者带来了面向对象编程（OOP）的强大力量，让我们可以用更优雅、更易理解的方式构建复杂的应用。今天，就让我们一起踏上这段探索之旅，深入了解ES6中类、方法和继承这些OOP的核心概念，看看它们如何为我们的代码注入活力。

从蓝图到实例：类的奥秘

想象一下，你要建造一栋房子，首先需要一份详细的图纸，上面标注了房屋的结构、尺寸、材料等等。在编程世界里，类就扮演着这份图纸的角色。它定义了一种数据类型，就像房子的蓝图一样，规定了对象应该具备哪些属性和方法。

class House {
  constructor(rooms, color) {
    this.rooms = rooms;
    this.color = color;
  }

  describe() {
    console.log(`This house has ${this.rooms} rooms and is painted ${this.color}.`);
  }
}

在这个例子中，House就是一个类，它了房屋的基本特征：房间数量（rooms）和颜色（color）。constructor就像房子的地基，在创建房屋对象时会被调用，用于初始化房屋的属性。describe()方法则像房屋的介绍手册，可以用来房屋的具体情况。

有了这份蓝图，我们就可以根据它建造出具体的房屋了。在编程中，这个过程叫做实例化，也就是根据类创建对象。

const myHouse = new House(3, 'blue'); 
myHouse.describe(); // 输出：This house has 3 rooms and is painted blue.

这里，myHouse就是根据House类创建的一个房屋对象，它拥有3个房间，颜色是蓝色。

方法：让对象动起来

如果说类是对象的蓝图，那么方法就是让对象动起来的引擎。方法是类中定义的函数，它们可以操作对象的数据，也可以执行特定的操作。

方法可以分为实例方法和静态方法两种。实例方法就像房屋的门窗，只能通过具体的房屋对象来操作；而静态方法就像小区的物业电话，可以直接通过小区名称来拨打，不需要知道具体的房屋信息。

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  start() {
    console.log(`The ${this.brand} ${this.model} is starting.`);
  }

  static honk() {
    console.log('Beep beep!');
  }
}

const myCar = new Car('Toyota', 'Camry');
myCar.start(); // 输出：The Toyota Camry is starting.
Car.honk(); // 输出：Beep beep!

在这个例子中，start()是实例方法，只能通过myCar对象来调用；而honk()是静态方法，可以直接通过Car类来调用。

继承：站在巨人的肩膀上

在现实生活中，我们经常会发现一些事物之间存在着相似之处。比如，轿车和卡车都是汽车，它们都拥有轮子、发动机等共同特征。在编程中，我们可以利用继承来表达这种相似性。

继承就像家族传承一样，子类可以继承父类的属性和方法，并且可以添加自己的独特之处。

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log('Generic animal sound');
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); 
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.makeSound(); // 输出：Generic animal sound (继承自 Animal)
myDog.bark(); // 输出：Woof!