当前位置:首页 > JavaScript

js实现多态

2026-02-01 23:34:14JavaScript

多态的概念

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

js实现多态

基于原型继承的多态

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

js实现多态

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!"

多态的应用场景

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

实现多态的注意事项

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

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

相关文章

js实现分页

js实现分页

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

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与…

js实现拖拽

js实现拖拽

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

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Pa…