当前位置:首页 > 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 功能的方法 在 JavaScript 中实现特定功能通常涉及多个步骤。以下是常见的实现方法: 基础语法和变量声明 使用 let 或 const 声明变量: let co…

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaS…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 // 获取…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inp…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…