如何重构在super调用前使用this的ol-geocoder ES6类？

ES6类明确要求：构造函数中必须先调用super()，才能访问this。ol-geocoder原Base类在super前访问this甚至将其作为参数传入的写法，完全违反了这个规则，导致在无转译的ES6环境下报错。以下是具体重构方案：

1. 拆分依赖this的参数逻辑 #

原代码的核心问题是把未初始化的this传给父类构造函数，同时在super前就给this绑定属性。重构时要先剥离所有依赖this的内容，用独立变量处理后再传给super。

原错误代码（模拟）： #

class Base extends ol.Control {
  constructor(opt_options) {
    const options = opt_options || {};
    // 错误：super前访问this
    this._element = document.createElement('div');
    this._element.className = 'ol-geocoder ol-control';
    
    // 错误：将this作为super的参数传入
    super({
      element: this._element,
      target: options.target || this
    });
  }
}

重构后代码： #

class Base extends ol.Control {
  constructor(opt_options) {
    const options = opt_options || {};
    
    // 1. 先创建元素，用独立变量存储，不依赖this
    const element = document.createElement('div');
    element.className = 'ol-geocoder ol-control';

    // 2. 优先调用super，传入无this依赖的参数
    // 注意：OpenLayers Control的target选项应为DOM元素，而非实例本身，原代码的this是误用
    super({
      element: element,
      target: options.target
    });

    // 3. super调用后，安全绑定属性到this
    this._element = element;
  }
}

2. 处理super前的事件绑定或方法初始化 #

如果原代码在super前绑定事件（如this.handleClick = this.handleClick.bind(this)），要把这类逻辑移到super之后，再通过父类API补全配置：

原错误代码（模拟）： #

constructor(options) {
  // 错误：super前访问this绑定方法
  this.handleResultSelect = this.handleResultSelect.bind(this);
  super({
    selectCallback: this.handleResultSelect
  });
}

重构后代码： #

constructor(options) {
  // 先调用super，暂不传入依赖this的回调
  super({
    ...options,
    selectCallback: null
  });

  // super调用后再绑定方法并设置
  this.handleResultSelect = this.handleResultSelect.bind(this);
  // 若父类提供设置方法则用官方API，否则直接修改实例属性
  this.setSelectCallback(this.handleResultSelect);
  // 或 this.selectCallback = this.handleResultSelect;
}

3. 核心原则总结 #

• 所有需要传给super的参数，必须用不依赖this的独立变量或值生成
• 构造函数内的super()调用必须是第一个可执行语句（除了参数处理逻辑）
• 所有涉及this的属性赋值、方法绑定、逻辑操作，全部放在super()之后执行

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