如何手动撤销Highcharts类原型上的wrap方法，解决Angular组件闭包残留问题

核心逻辑 #

Highcharts 提供的H.wrap方法本质是对目标原型方法做一层代理包装，原始方法会作为第一个参数传入自定义的包装函数。要撤销绑定的wrap，只需要把原型上被包装的方法还原为wrap执行前的原始方法即可。

完整代码实现 #

import * as Highcharts from 'highcharts';
import { OnDestroy } from '@angular/core';

export class ExampleComponent implements OnDestroy {
  // 存储原始的refresh方法，用于后续恢复
  private originalTooltipRefresh: typeof Highcharts.Tooltip.prototype.refresh;

  constructor() {
    const H = Highcharts;
    // 先保存原始方法
    this.originalTooltipRefresh = H.Tooltip.prototype.refresh;

    function logRefresh(H: typeof Highcharts) {
      H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, point) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        console.log(proceed, point);
      });
    }
    logRefresh(H);
  }

  ngOnDestroy(): void {
    // 恢复原型上的refresh为原始方法，清除wrap绑定
    Highcharts.Tooltip.prototype.refresh = this.originalTooltipRefresh;
    // 清空存储的引用，避免内存泄漏
    this.originalTooltipRefresh = null;
  }
}

优化建议 #

如果你的wrap逻辑只需要对当前组件内的Highcharts实例生效，建议不要直接修改全局原型，避免影响其他页面的图表：

• 初始化当前组件的图表实例后，单独wrap该实例的tooltip.refresh方法，组件销毁时直接销毁当前图表实例即可，不需要额外处理原型

注意事项 #

• 如果项目中有多个模块同时wrap同一个原型方法，直接还原原始方法会覆盖其他模块的wrap逻辑，这种场景可以给每个包装函数加上唯一标识，销毁时仅移除对应标识的包装层即可
• 确认自定义的包装函数内没有持有组件实例、DOM节点等需要销毁的引用，避免残留内存占用

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