进阶成前端大牛，掌握多态奥秘，代码更优雅

2023-12-20 23:43:31

多态，一个看似晦涩难懂的概念，却在软件工程中扮演着至关重要的角色。今天，我们来聊聊多态在JavaScript中的妙用，看看它如何让代码更加优雅和可复用。

多态：一次编写，多处运行

多态的本质是“一次编写，多处运行”，这正是面向对象编程的精髓所在。在JavaScript中，多态可以通过继承和多态方法来实现。

继承：类之间的关系

继承是面向对象编程中一种非常重要的概念，它允许一个类从另一个类继承属性和方法。在JavaScript中，继承可以通过extends来实现。

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

  speak() {
    console.log(`I am ${this.name}`);
  }
}

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

  bark() {
    console.log(`Woof! I am ${this.name} the ${this.breed}`);
  }
}

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

  meow() {
    console.log(`Meow! I am ${this.name} the ${this.breed}`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // I am Buddy
dog.bark(); // Woof! I am Buddy the Golden Retriever

const cat = new Cat('Kitty', 'Persian');
cat.speak(); // I am Kitty
cat.meow(); // Meow! I am Kitty the Persian

多态方法：同一方法，不同行为

多态方法是指在子类中重新定义父类的方法，从而实现不同的行为。在JavaScript中，多态方法可以通过重写父类的方法来实现。

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

  speak() {
    console.log(`I am ${this.name}`);
  }
}

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

  speak() {
    super.speak(); // Call the parent class's speak() method
    console.log(`Woof! I am ${this.name} the ${this.breed}`);
  }
}

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

  speak() {
    super.speak(); // Call the parent class's speak() method
    console.log(`Meow! I am ${this.name} the ${this.breed}`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // I am Buddy
               // Woof! I am Buddy the Golden Retriever

const cat = new Cat('Kitty', 'Persian');
cat.speak(); // I am Kitty
               // Meow! I am Kitty the Persian