JavaScript父类调用子类同名方法未生效的技术问题

哈哈，这问题我一眼就看穿了——你子类的方法名拼写错误！父类里定义的是init_fields，但你子类里写成了init_fileds（少了个字母e），这哪是重写父类方法啊，分明是给子类新增了个完全不相关的方法，钩子触发时当然还是调用父类的原方法咯。

具体修正步骤 #

1. 先把方法名改对 #

把子类里的init_fileds改成init_fields，确保和父类的方法名完全一致，这样才能真正覆盖父类的方法。

2. 确认this绑定没问题（关键细节） #

另外要保证父类绑定钩子时，this的指向是实例本身。比如父类的构造函数应该这样写：

class WPOnion_Field_API2 {
  constructor() {
    // 用bind绑定this，确保钩子触发时指向当前实例
    wp.hooks.addAction('your_hook_action', this.init_fields.bind(this));
    // 或者用箭头函数更稳妥，自动保留this指向
    // wp.hooks.addAction('your_hook_action', () => this.init_fields());
  }

  init_fields() {
    // 父类默认逻辑
    console.log('父类init_fields执行');
  }
}

子类修正后的代码应该是这样：

class WPOnion_Field_inputmas extends WPOnion_Field_API2 {
  // 正确重写父类的init_fields方法
  init_fields() {
    // 子类自定义逻辑
    console.log('子类init_fields执行');
    // 如果需要复用父类逻辑，可以加这句：super.init_fields();
  }
}

原理说明 #

当子类正确覆盖init_fields后，子类实例的this.init_fields就指向子类的方法了。父类构造函数里绑定的钩子，实际关联的是实例的方法，所以钩子触发时自然会执行子类的逻辑，而不是父类的。

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