当前位置:首页 > JavaScript

js实现多态

2026-02-01 23:34:14JavaScript

多态的概念

多态是面向对象编程的三大特性之一(封装、继承、多态),指同一操作作用于不同对象会产生不同的行为。在JavaScript中,由于是动态类型语言,多态主要通过原型继承和接口实现来实现。

基于原型继承的多态

JavaScript通过原型链实现继承,子类可以重写父类的方法,调用时会根据实际对象类型执行对应方法。

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

function Dog() {
  this.sound = 'Woof!';
}
Dog.prototype = Object.create(Animal.prototype);

function Cat() {
  this.sound = 'Meow!';
}
Cat.prototype = Object.create(Animal.prototype);

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.makeSound()); // 输出"Woof!"和"Meow!"

基于接口的多态

JavaScript没有接口的语法,但可以通过约定和duck typing实现类似效果。只要对象具有相同的方法名,就可以被视为实现了同一接口。

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

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

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

makeSound(dog); // "Woof!"
makeSound(cat); // "Meow!"

多态的应用场景

表单验证:不同类型的表单字段可以使用相同的验证接口 游戏开发:不同角色可以响应相同的动作命令 插件系统:不同插件实现相同的接口方法

js实现多态

实现多态的注意事项

方法名要保持一致,这是多态的基础 尽量使用鸭子类型(duck typing),关注对象能做什么而不是它是什么 在大型项目中可以使用TypeScript的interface来明确接口约定

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

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…