ES6中如何从子类实例直接调用父类方法？

我懂你想要在子类里轻松调用父类方法的需求——确实不像有些编程语言那样能直接通过子类实例“无缝”调用对吧？先提个小问题：你给出的代码里存在属性和方法同名的问题（比如getMarketsUrl既是构造函数里的实例属性，又是类方法），这会导致方法被属性覆盖，根本没法正常调用。先把这个小bug修正了，再讲调用父类方法的实用方案。

修正后的父类代码 #

class ExchangeHandler { 
  constructor(getMarketsUrl, getMarketDataBaseUrl, interval) { 
    this.interval = interval; 
    // 属性名改为带下划线的私有风格，避免和方法名冲突
    this._getMarketsUrl = getMarketsUrl; 
    this._getMarketDataBaseUrl = getMarketDataBaseUrl; 
  } 
  getMarketsUrl() { return this._getMarketsUrl; } 
  getMarketDataBaseUrl() { return this._getMarketDataBaseUrl; }
}

接下来分享两种最常用的简便调用方式：

方式一：使用super关键字（首推） #

这是JavaScript类继承里专门设计的语法，直接在子类方法里用super.父类方法名()就能调用父类的对应方法，既简洁又符合语言规范。举个子类的例子：

class BinanceHandler extends ExchangeHandler {
  constructor(getMarketsUrl, getMarketDataBaseUrl, interval, apiKey) {
    // 子类构造函数必须先调用super()，触发父类构造逻辑
    super(getMarketsUrl, getMarketDataBaseUrl, interval);
    this.apiKey = apiKey;
  }

  // 重写父类方法时，同时调用父类逻辑
  getMarketsUrl() {
    // 调用父类的getMarketsUrl方法，拿到基础URL
    const baseUrl = super.getMarketsUrl();
    // 在此基础上扩展子类自己的逻辑
    return `${baseUrl}?apiKey=${this.apiKey}`;
  }

  // 直接调用父类未被重写的方法
  logBaseMarketEndpoint() {
    console.log("父类定义的基础URL：", super.getMarketDataBaseUrl());
  }
}

简单说：super在子类方法里指向父类的原型对象，所以能直接调用父类的实例方法；在子类构造函数里，super()就是调用父类的构造函数，这是子类构造函数的强制要求（除非你不写自己的构造函数）。

方式二：手动调用父类原型方法（特殊场景用） #

如果出于某些特殊原因不想用super，也可以直接通过父类.prototype.方法名.call(this, 参数)的方式调用——这里的call(this)是把父类方法的this绑定到当前子类实例上，不然父类方法里的this会指向错误的对象。示例：

class CoinbaseHandler extends ExchangeHandler {
  getMarketDataBaseUrl() {
    // 手动绑定this并调用父类方法
    const parentBaseUrl = ExchangeHandler.prototype.getMarketDataBaseUrl.call(this);
    // 扩展子类逻辑
    return `${parentBaseUrl}/v2`;
  }
}

这种方式比较繁琐，可读性也不如super，所以只建议在特殊场景下使用。

最后再强调一遍：一定要避免属性和方法同名的情况，不然你调用的永远是实例属性，而不是你定义的类方法，这是很容易踩的小坑。

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