JavaScript如何基于原型实现WeatherData对Event、DataType的多继承

核心问题说明 #

JavaScript 的对象原型链是单链结构，每个对象只能有一个直接原型对象，所以直接多次调用setPrototypeOf会覆盖前一次的设置，这是你遇到问题的根本原因。要实现多继承的效果，常用**构造函数组合+原型混入（Mixin）**的方案实现。

你代码中已有的错误 #

• 父类构造函数调用错误：Function.prototype.call的第一个参数是函数运行时的 this 指向，你原来的写法没有传入当前实例，会导致父类的属性无法挂载到 WeatherData 的实例上。
• setPrototypeOf调用错误：该方法是Object的静态方法，不是构造函数自身的方法，你原来的写法本身就会抛出语法错误。
• 重复设置原型会覆盖前一次的结果，这是 JS 单原型链的特性决定的。

正确实现代码 #

import { DataType, Event } from "./../common/EventData.mjs"

export function WeatherData(value, { time, place }, { type, unit, isInternational }) {
    // 调用两个父类构造函数，给当前实例挂载父类属性
    Event.call(this, time, place)
    DataType.call(this, type, unit, isInternational)
    this.value = value
}

// 原型混入：把两个父类原型的方法都拷贝到 WeatherData 的原型上
Object.assign(WeatherData.prototype, Event.prototype, DataType.prototype)

// 挂载自身原型方法，要放在 assign 之后，避免被父类的同名方法覆盖
WeatherData.prototype.getValue = function () { return this.value }

方案说明 #

• 这种方式下，WeatherData 的实例可以正常访问 Event、DataType 原型上的所有方法，也能拿到两个父类构造函数挂载的实例属性，完全满足需求。
• 如果需要支持instanceof判断，比如让new WeatherData() instanceof Event返回 true，可以额外添加如下配置：

// 让 instanceof 判断支持两个父类
WeatherData[Symbol.hasInstance] = function(instance) {
  return Event[Symbol.hasInstance](instance) || DataType[Symbol.hasInstance](instance) || instance.__proto__ === this.prototype
}

可选的严格原型链方案 #

如果要求严格保留原型链结构，可以创建一个中间原型对象实现继承逻辑：

// 中间原型先继承 Event.prototype
const mixinProto = Object.create(Event.prototype)
// 再混入 DataType 的原型方法
Object.assign(mixinProto, DataType.prototype)
// 设置为 WeatherData 的原型
WeatherData.prototype = Object.create(mixinProto)
// 修正 constructor 指向
WeatherData.prototype.constructor = WeatherData

内容的提问来源于stack exchange，提问作者kakakakakakakk