JavaScript面向对象三大特征之多态实例详解

在JavaScript中，面向对象编程的三大特征分别是：封装、继承、多态。其中多态是比较难以理解的一个概念，但它却是面向对象编程中非常重要的特性之一。多态可以使代码更加灵活、可扩展性更强。

多态定义

多态是指对象根据所处的上下文环境而表现出不同的行为。形象地说，就是同一个事物在不同场合下有着不同的表现形式。

JavaScript中的多态实现

在JavaScript中，实现多态的关键在于使用多态接口和多态函数。同一个多态接口有多个实现方式，不同的实现方式可以用同样的接口名进行调用。

示例一：

class Animal {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(`I am a ${this.name}`);
  }
}

class Cat extends Animal {
  constructor() {
    super("cat");
  }
  say() {
    console.log("I am a cute cat");
  }
}

class Dog extends Animal {
  constructor() {
    super("dog");
  }
  say() {
    console.log("I am a loyal dog");
  }
}

function play(animal) {
  animal.say();
}

const cat = new Cat();
const dog = new Dog();
play(cat); // 输出：I am a cute cat
play(dog); // 输出：I am a loyal dog

示例二：

class Customer {
  constructor(name) {
    this.name = name;
  }
  pay() {
    console.log(`${this.name} pays by cash`);
  }
}

class Member extends Customer {
  constructor(name) {
    super(name);
  }
  pay() {
    console.log(`${this.name} uses member card to pay`);
  }
}

function checkout(customer) {
  customer.pay();
}

const customerA = new Customer("Eric");
const customerB = new Member("Bob");
checkout(customerA); // 输出：Eric pays by cash
checkout(customerB); // 输出：Bob uses member card to pay

在这两个示例中，我们都使用了多态接口和多态函数的方式来实现多态。不同实现方式的函数都具有同样的接口，可以在调用时使用相同的函数名实现多态调用。