当前位置:首页 > JavaScript

js 多态的实现

2026-03-01 02:41:22JavaScript

多态的概念

多态是面向对象编程的三大特性之一,指同一操作作用于不同对象时产生不同的行为。JavaScript通过原型链和动态绑定实现多态。

基于原型链的多态实现

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

js 多态的实现

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

基于class语法的多态实现

ES6的class语法糖同样支持方法重写:

js 多态的实现

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

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

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

鸭子类型多态

JavaScript作为动态类型语言,不强制类型检查,只需对象具有相同接口:

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

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

const duck = {
  sound: () => console.log("Quack")
};

makeSound(cat);  // 输出: Meow
makeSound(duck); // 输出: Quack

多态的应用场景

表单验证场景中,不同表单字段可能有不同的验证逻辑:

class Validator {
  validate() {
    throw new Error("validate() must be implemented");
  }
}

class EmailValidator extends Validator {
  validate(value) {
    return /@/.test(value);
  }
}

class NumberValidator extends Validator {
  validate(value) {
    return !isNaN(value);
  }
}

const validators = {
  email: new EmailValidator(),
  age: new NumberValidator()
};

function validateField(type, value) {
  return validators[type].validate(value);
}

多态的优势

代码扩展性强,新增类型只需添加新类而不修改现有逻辑。维护性好,相关行为集中在各自类中。可读性高,通过方法名即可理解行为意图。

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

相关文章

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现防洪

js实现防洪

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

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: fun…

js分页实现

js分页实现

分页的基本原理 分页的核心是通过计算当前页码和数据偏移量,从服务器或本地数据中截取对应范围的数据进行展示。通常需要以下参数:当前页码(currentPage)、每页条数(pageSize)、总数据量(…

js 实现递归

js 实现递归

递归的基本概念 递归是指函数直接或间接调用自身的过程。在JavaScript中,递归通常用于解决可以分解为相似子问题的问题,如阶乘、斐波那契数列、树形结构遍历等。 递归的实现要点 基线条件(Base…