js中的class继承怎么使用？

Question

js中的class继承怎么使用？

父类Parent中有个fetch函数，我想再次包装下，只对入参做些修改，其他的全部继承父类，但是一直失败

class Parent {
            constructor() {

            }
            fetch = (data) => {
                console.log(1, data)
            }            
        }

class Child extends Parent {
            constructor(props) {
                super(props)
            }

            fetch = (data) => {
                if (data) {
                    data.name = 'test'
                }
                console.log(2, data)
                return super.fetch(data)
            }
        }

Parent是个组件fetch是箭头函数尽量不做修改，上面这种写法会报错super.fetch is not afunction，原因是super不支持在箭头函数中使用，但是改成常规写法

fetch() {

}

这种方式又没法重写Parent中的fetch函数，请问这种情况该怎么处理？

class Child extends Parent {
            constructor(props) {
                super(props)
            }

            fetch = (data) => {
                if (data) {
                    data.name = 'test'
                }
                const item = new Parent()
                return item.fetch(data)
            }
        }

这样写可以么？

Answer 1

class Parent {
  constructor() {}

  fetch = (data) => {
    console.log(1, data);
  };
}

class Child extends Parent {
  constructor(props) {
    super(props);
  }

  // 改写
  fetch = ((superfetch) => (data) => {
    if (data) {
      data.name = "test";
    }
    console.log(2, data);
    superfetch(data);
  })(this.fetch);
}

做了修改，应该可以满足你的方式。

参考的 => https://stackoverflow.com/a/52823577/10378232

Answer 2

如果超类的 fetch 方法内部没有引用 this，那么你的方法就可行。

不过，即便 fetch 方法内部引用了 this，你也可以观察其引用了 this 的哪些属性，然后把 this 的这些属性同步给作为工具人的 new Parent。
只不过这可能给项目埋雷，因为如果上游有变化，下游也得跟进改动，不然可能出 Bug 。

我提供一种比较野的思路，在实例化完成之后，再覆盖对应属性：

class Sub extends Parent {

  constructor(...args){
    super(...args)
  
    // 获取由超类初始化的 fetch
    const { fetch } = this;
    // 覆盖此属性
    this.fetch = (data) => {
      data.name = "hacked";
      return fetch.call(this, data)
    }
  }
}

Answer 3

类的成员方法尽量不要用箭头函数,如果用了箭头函数,那么成员是直接挂在实例上而不是原型属性上,这样函数就不能共用了。要访问父类的 fetch,自然需要先获取到父类的实例才能访问。

class People {
  name = 'people'
}

class Child extends People {
  say() {}
  say2 = () => {
  }
}

class People {
  constructor() {
    _defineProperty(this, "name", 'people');
  }
}
class Child extends People {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "say2", () => {});
  }
  say() {}
}