javascript - 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

类的成员方法尽量不要用箭头函数,如果用了箭头函数,那么成员是直接挂在实例上而不是原型属性上,这样函数就不能共用了。要访问父类的 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() {}}

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

class Parent {  constructor() {}  fetch = (data) => {    console.log(1, data);  };}class Child extends Parent {  constructor(props) {    super(props);    this.parent = new Parent();  }  // 改写  fetch = ((superfetch) => (data) => {    if (data) {      data.name = "test";    }    console.log(2, data);    superfetch(data);  })(this.fetch);}

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

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

Answer 4

在JavaScript中，当子类（Child）需要重写父类（Parent）的方法时，仍然想要调用父类的方法，通常可以通过super关键字来实现。你的代码中出现错误的原因是在箭头函数中无法正确地调用super。在类的构造函数中，你可以使用常规函数来定义fetch方法，这样就可以正确地调用super.fetch了。

以下是修改后的代码：

class Parent {    constructor() {    }    fetch() {        console.log(1, this.data)    }            }class Child extends Parent {    constructor(props) {        super(props)    }    fetch(data) {        if (data) {            data.name = 'test'        }        console.log(2, data)        return super.fetch(data)    }}

在这段代码中，fetch方法被定义为常规函数，并且可以正确地调用super.fetch(data)。注意，这里需要将fetch方法的参数传递给父类的fetch方法。另外，由于在子类中对fetch方法进行了修改，因此需要将data参数传递给父类的fetch方法。这样就可以在重写父类方法的同时，仍然能够调用父类的方法。