当前位置:首页 > JavaScript

js 多态的实现

2026-01-30 11:34:57JavaScript

JavaScript 多态的实现方式

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

基于原型链的多态

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

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 实现方法重写:

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 方法)

通过策略模式实现多态

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

js 多态的实现

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实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…

js实现吸色

js实现吸色

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

js实现复制功能实现

js实现复制功能实现

使用document.execCommand方法(传统方式,已逐渐被弃用) 传统方式通过document.execCommand('copy')实现复制功能,需先选中文本。以下是一个完整示例: fu…