Question

即使我知道不鼓励继承并且组合应该更好，我想知道如何使用mobx状态类处理继承并调用已经用@action.bound修饰的超类方法。

我有这个代码示例（可以在舒适的jsfiddle中轻松执行）：

const { observable, action } = mobx;

class Store {
    @observable list = []
  @observable num = 0

  constructor() {
    console.log('Store ctor')
  }

  @action.bound
  reset() {
    this.list.clear()
    this.num = 0
  }
}

class StorePlus extends Store {
    @observable num2 = 0

  constructor() {
    super()
   }

   @action.bound
   reset() {
    super.reset()
    this.num2 = 0
   }
}

const storePlus = new StorePlus()
storePlus.reset()

由于此错误而被破坏：

未捕获RangeError：超出最大调用堆栈大小

我理解问题在于调用super.reset，其中reset是已经装饰的超类方法。但我不了解内部，我不知道使用组合优于继承的最佳方法是避免编写一些适配器方法来公开父类observables和actions方法。

希望我的问题很明确！

Answer 1

我不确定原因，但问题是action.bound。

如果你在构造函数中绑定this并将结果包装在行动中（比如这个...... this.reset = action(this.reset.bind(this)），那么它似乎工作正常。

https://jsfiddle.net/cr82ktdd/

const { observable, action } = mobx;
console.clear()

class Store {
  @observable list = []
  @observable num = 0

  constructor() {
    console.log('Store ctor')

    this.reset = action(this.reset.bind(this))
  }

  reset() {
    console.log('Store reset')
    this.list.clear()
    this.num = 0
  }
}

class StorePlus extends Store {
    @observable num2 = 0

  constructor() {
    super()

    this.reset = action(this.reset.bind(this))
   }

   reset() {
    console.log('StorePlus reset')
    super.reset()
    this.num2 = 0
   }
}

const storePlus = new StorePlus()
storePlus.reset()

Answer 2

问题是您无法重新分配已受限制的动作 JavaScript不支持将多个上下文绑定到同一函数。删除绑定并单独进行绑定

const storePlus = new StorePlus() storePlus.reset = storePlus.reset.bind(storePlus) storePlus.reset()

如何处理已经在mobx中装饰的超类方法的调用

2 个答案: