当前位置：首页 > JavaScript

js 多态的实现

2026-03-01 02:41:22JavaScript

多态的概念

多态是面向对象编程的三大特性之一，指同一操作作用于不同对象时产生不同的行为。JavaScript通过原型链和动态绑定实现多态。

基于原型链的多态实现

通过原型继承实现方法的重写，子类可以覆盖父类的方法：

function Animal() {}
Animal.prototype.sound = function() {
  console.log("Animal makes sound");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.sound = function() {
  console.log("Dog barks");
};

const animal = new Animal();
const dog = new Dog();
animal.sound(); // 输出: Animal makes sound
dog.sound();    // 输出: Dog barks

基于class语法的多态实现

ES6的class语法糖同样支持方法重写：

class Animal {
  sound() {
    console.log("Animal makes sound");
  }
}

class Dog extends Animal {
  sound() {
    console.log("Dog barks");
  }
}

const animal = new Animal();
const dog = new Dog();
animal.sound(); // 输出: Animal makes sound
dog.sound();    // 输出: Dog barks

鸭子类型多态

JavaScript作为动态类型语言，不强制类型检查，只需对象具有相同接口：

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

const cat = {
  sound: () => console.log("Meow")
};

const duck = {
  sound: () => console.log("Quack")
};

makeSound(cat);  // 输出: Meow
makeSound(duck); // 输出: Quack

多态的应用场景

表单验证场景中，不同表单字段可能有不同的验证逻辑：

class Validator {
  validate() {
    throw new Error("validate() must be implemented");
  }
}

class EmailValidator extends Validator {
  validate(value) {
    return /@/.test(value);
  }
}

class NumberValidator extends Validator {
  validate(value) {
    return !isNaN(value);
  }
}

const validators = {
  email: new EmailValidator(),
  age: new NumberValidator()
};

function validateField(type, value) {
  return validators[type].validate(value);
}