多态是面向对象编程的三大特性之一，它允许不同类的对象对同一消息做出不同的响应，核心思想是“同一接口，不同实现”。JavaScript作为基于原型的动态语言，没有传统面向对象语言中的类继承体系，但依然可以通过多种方式实现多态效果，适配不同的开发场景。
多态的核心概念
多态的本质是屏蔽不同对象的实现差异，通过统一的接口调用不同对象的具体方法。比如在图形绘制的场景中，圆形、矩形、三角形都属于图形对象，它们都有绘制方法，但绘制的具体逻辑完全不同，调用统一的绘制接口时，会自动执行对应图形的绘制逻辑，这就是多态的典型应用。
JavaScript实现多态的常见方式
基于原型链的实现方式
JavaScript的原型链是实现继承和多态的基础，子类对象可以通过原型链访问父类的方法，同时可以重写父类方法实现自己的逻辑。当调用方法时，会优先查找对象自身的属性，找不到再沿着原型链向上查找，这个特性天然支持多态。
下面的示例通过构造函数和原型链实现图形绘制场景的多态：
// 定义父类构造函数
function Shape() {}
// 父类原型上定义通用方法
Shape.prototype.draw = function() {
console.log('绘制基础图形');
};
// 定义圆形子类
function Circle() {}
// 继承Shape的原型
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
// 重写draw方法实现圆形绘制逻辑
Circle.prototype.draw = function() {
console.log('绘制圆形');
};
// 定义矩形子类
function Rectangle() {}
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.draw = function() {
console.log('绘制矩形');
};
// 统一调用draw方法，不同对象执行不同逻辑
const shape1 = new Shape();
const circle1 = new Circle();
const rect1 = new Rectangle();
shape1.draw(); // 输出：绘制基础图形
circle1.draw(); // 输出：绘制圆形
rect1.draw(); // 输出：绘制矩形
基于对象字面量的实现方式
如果不需要复杂的继承关系，只是需要实现同一接口的不同实现，也可以使用对象字面量直接定义不同对象，每个对象包含同名的方法，通过统一的调用方式触发不同逻辑，这种方式更轻量，适合简单的多态场景。
示例代码如下：
// 定义不同的图形对象
const circle = {
draw: function() {
console.log('使用对象字面量绘制圆形');
}
};
const rectangle = {
draw: function() {
console.log('使用对象字面量绘制矩形');
}
};
// 统一调用draw方法
const shapes = [circle, rectangle];
shapes.forEach(item => {
item.draw();
});
// 输出：
// 使用对象字面量绘制圆形
// 使用对象字面量绘制矩形
基于ES6 class语法的实现方式
ES6引入的class语法是原型继承的语法糖，让JavaScript的面向对象写法更接近传统语言，通过extends关键字实现继承，子类重写父类方法即可实现多态，代码可读性更高。
示例代码如下：
// 定义父类
class Shape {
draw() {
console.log('ES6 class绘制基础图形');
}
}
// 圆形子类继承Shape
class Circle extends Shape {
draw() {
console.log('ES6 class绘制圆形');
}
}
// 矩形子类继承Shape
class Rectangle extends Shape {
draw() {
console.log('ES6 class绘制矩形');
}
}
// 统一调用
const shape = new Shape();
const circle = new Circle();
const rect = new Rectangle();
shape.draw(); // 输出：ES6 class绘制基础图形
circle.draw(); // 输出：ES6 class绘制圆形
rect.draw(); // 输出：ES6 class绘制矩形
多态在设计模式中的应用
多态是很多设计模式的实现基础，比如策略模式中，不同的策略类实现同一个策略接口，调用时只需要传入不同的策略对象，就可以执行不同的策略逻辑，不需要写大量的条件判断语句。下面的示例是策略模式结合多态的简单实现：
// 定义不同的计价策略
class PriceStrategy {
calculate(price) {
return price;
}
}
class DiscountStrategy extends PriceStrategy {
calculate(price) {
return price * 0.8;
}
}
class FullReduceStrategy extends PriceStrategy {
calculate(price) {
return price >= 100 ? price - 20 : price;
}
}
// 计价函数，接收策略对象和原价
function calculatePrice(strategy, originPrice) {
return strategy.calculate(originPrice);
}
const discount = new DiscountStrategy();
const fullReduce = new FullReduceStrategy();
console.log(calculatePrice(discount, 100)); // 输出：80
console.log(calculatePrice(fullReduce, 120)); // 输出：100
实现多态的注意事项
- 方法名必须保持一致，否则无法触发多态效果，调用时会因为找不到方法报错。
- 基于原型链实现时，要注意修正子类的constructor指向，避免原型链查找出现异常。
- ES6 class中，子类重写父类方法时，不需要额外声明，直接定义同名方法即可覆盖父类逻辑。
- 避免过度设计，简单的场景不需要强行使用复杂的继承结构实现多态，对象字面量方式可能更合适。
总结
JavaScript虽然没有传统面向对象语言的类体系，但通过原型链、对象字面量、ES6 class等方式都可以实现多态。多态的核心价值是降低代码耦合度，让代码更容易扩展和维护，在开发复杂业务逻辑或者实现设计模式时，合理运用多态可以大幅提升代码质量。开发者可以根据实际场景选择合适的实现方式，平衡代码的复杂度和可维护性。
JavaScript多态面向对象设计模式修改时间：2026-07-06 00:45:26