当前位置:首页 > JavaScript

js 多态的实现

2026-01-30 11:34:57JavaScript

JavaScript 多态的实现方式

JavaScript 的多态主要通过原型链、类继承和接口模拟实现。以下是具体实现方法:

基于原型链的多态

通过原型链实现方法的重写,子类可以覆盖父类的方法:

js 多态的实现

function Animal() {}
Animal.prototype.sound = function() { 
    console.log("Animal makes a 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 a sound
dog.sound();    // 输出: Dog barks

基于 ES6 Class 的多态

使用 classextends 实现方法重写:

js 多态的实现

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

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

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

基于鸭子类型的多态

JavaScript 是动态类型语言,通过检查对象是否实现特定方法来实现多态:

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

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

makeSound(cat);  // 输出: Meow
makeSound(car);  // 无输出(未实现 sound 方法)

通过策略模式实现多态

将行为封装为策略对象,动态切换:

const soundStrategies = {
    dog: () => console.log("Bark"),
    cat: () => console.log("Meow")
};

function Animal(strategy) {
    this.sound = soundStrategies[strategy];
}

const dog = new Animal('dog');
const cat = new Animal('cat');
dog.sound(); // 输出: Bark
cat.sound(); // 输出: Meow

关键点总结

  • 原型链:通过修改原型对象实现方法覆盖。
  • ES6 Class:语法糖,本质仍是原型继承。
  • 鸭子类型:关注对象的能力而非类型。
  • 策略模式:将行为解耦为独立对象。

多态在 JavaScript 中更倾向于“行为多态”,而非严格的类型系统多态。

标签: 多态js
分享给朋友:

相关文章

js实现验证码

js实现验证码

实现验证码的JavaScript方法 生成随机验证码 使用Math.random()生成随机字符串,结合数字和字母: function generateCaptcha() { const cha…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…