当前位置：首页 > JavaScript

js实现多态

2026-04-06 16:40:22JavaScript

多态的概念

多态是面向对象编程的核心概念之一，指同一操作作用于不同对象时产生不同的行为。在JavaScript中，由于语言本身的动态特性，实现多态的方式与静态类型语言（如Java）有所不同。

基于原型链的多态实现

JavaScript通过原型链实现继承，子类可以重写父类的方法以实现多态：

function Animal() {}
Animal.prototype.speak = function() {
  console.log('Animal sound');
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
  console.log('Woof!');
};

function Cat() {}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.speak = function() {
  console.log('Meow!');
};

const animals = [new Animal(), new Dog(), new Cat()];
animals.forEach(animal => animal.speak());

基于ES6类的多态实现

ES6引入class语法糖，使多态实现更直观：

class Animal {
  speak() {
    console.log('Animal sound');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Woof!');
  }
}

class Cat extends Animal {
  speak() {
    console.log('Meow!');
  }
}

const animals = [new Animal(), new Dog(), new Cat()];
animals.forEach(animal => animal.speak());

基于鸭子类型的多态

JavaScript的弱类型特性允许不依赖继承实现多态（鸭子类型）：

function makeSound(animal) {
  if (animal && typeof animal.speak === 'function') {
    animal.speak();
  }
}

const dog = { speak: () => console.log('Woof!') };
const cat = { speak: () => console.log('Meow!') };

makeSound(dog);
makeSound(cat);

多态的高级应用

利用参数多态实现更灵活的行为：

class Calculator {
  add(a, b) {
    return a + b;
  }
}

class StringCalculator extends Calculator {
  add(a, b) {
    return `${a}${b}`;
  }
}

const numCalc = new Calculator();
const strCalc = new StringCalculator();

console.log(numCalc.add(1, 2));    // 3
console.log(strCalc.add('1', '2')); // '12'

多态的设计模式应用

策略模式是多态的典型应用：

js实现多态

class PaymentStrategy {
  pay(amount) {}
}

class CreditCardStrategy extends PaymentStrategy {
  pay(amount) {
    console.log(`Paid ${amount} via Credit Card`);
  }
}

class PayPalStrategy extends PaymentStrategy {
  pay(amount) {
    console.log(`Paid ${amount} via PayPal`);
  }
}

class ShoppingCart {
  constructor(strategy) {
    this.strategy = strategy;
  }

  checkout(amount) {
    this.strategy.pay(amount);
  }
}

const cart1 = new ShoppingCart(new CreditCardStrategy());
const cart2 = new ShoppingCart(new PayPalStrategy());

cart1.checkout(100);
cart2.checkout(200);