为何扩展Date类仅在部分浏览器生效？Chrome环境异常排查

问题背景 #

我在TypeScript项目中扩展了Date类（以下是简化后的基础版本）：

class ExtendedDate extends Date {
    get fullYear() {
        return this.getFullYear();
    }
}
export class DateTest extends Scene {
    constructor() {
        super();
        let tDate = new ExtendedDate();
        console.log(tDate);
        console.log(tDate.fullYear);
        console.log('Is extended date: ' + (tDate instanceof ExtendedDate));
    }
}

本地环境下，控制台可正常输出当前日期、年份及Is extended date: true。但在部分Chrome设备上，虽能显示日期，却出现tDate.fullYear返回undefined、tDate instanceof ExtendedDate结果为false的情况，看起来创建的是普通Date对象。

该问题为近期新增：两天前代码在所有浏览器均正常运行，目前Edge仍可正常工作。两台测试设备（本地电脑与出现问题的设备）均运行Windows 10 + Chrome 114.0.5735.134版本，且网页运行的是完全一致的静态JS代码（webpack打包后代码与原TS代码基本一致）：

class ExtendedDate extends Date {
  get fullYear() {
    return this.getFullYear();
  }
}
class DateTest extends _Scene__WEBPACK_IMPORTED_MODULE_0__.Scene {
  constructor() {
    super();
    let tDate = new ExtendedDate();
    console.log(tDate);
    console.log(tDate.fullYear);
    console.log("Is extended date: " + (tDate instanceof ExtendedDate));
  }
}

问题分析与解决方案 #

核心原因 #

1. 内置原生对象继承的兼容性问题：Date属于JS内置原生对象，其构造函数行为与普通自定义类不同。在特定环境下，继承Date时若未正确处理原型链，原生Date构造函数返回的实例可能覆盖子类实例的原型指向，导致instanceof判断失效、子类属性/方法无法访问。
2. Chrome缓存或版本差异：虽显示同一版本号，但设备可能存在缓存未清除、自动更新未完成的情况，导致运行的是旧版代码或存在版本内部的兼容性BUG。

可行解决方案 #

方案1：修复子类原型链绑定

在子类构造函数中显式调用super后，通过Object.setPrototypeOf确保实例原型指向子类原型：

class ExtendedDate extends Date {
  constructor(...args: ConstructorParameters<typeof Date>) {
    super(...args);
    Object.setPrototypeOf(this, ExtendedDate.prototype);
  }

  get fullYear() {
    return this.getFullYear();
  }
}

该操作可强制修正原型链，让实例正确继承子类的属性与方法。

方案2：采用组合模式替代继承（更推荐）

避免直接继承内置对象，将Date实例作为子类内部属性封装，彻底规避兼容性问题：

class ExtendedDate {
  private date: Date;

  constructor(...args: ConstructorParameters<typeof Date>) {
    this.date = new Date(...args);
  }

  get fullYear() {
    return this.date.getFullYear();
  }

  // 按需封装Date的其他方法，例如：
  getMonth() {
    return this.date.getMonth();
  }
}

验证步骤 #

• 清除问题设备的Chrome缓存，强制刷新页面加载最新代码；
• 在问题设备上运行简化的独立测试代码，排除webpack打包过程的影响。

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