登录
首页 >  文章 >  前端

JSClass继承:父类方法复写及参数修改详解

时间:2025-03-04 20:15:07 455浏览 收藏

本文介绍了JavaScript中Class继承下如何正确复写父类方法并修改入参。由于箭头函数内无法使用`super`关键字调用父类方法,文章提出使用包装函数的解决方案。该方法通过将子类方法定义为普通函数,再用一个接收父类方法作为参数的包装函数来实现参数修改,最终调用父类方法,从而灵活地重写父类方法并修改其参数,避免了`super`关键字在箭头函数中失效的问题。文章并提供了详细的代码示例,帮助开发者理解和应用该技巧。

JS中Class继承:如何正确复写父类方法并修改入参?

JavaScript Class继承与方法重写

JavaScript的class语法支持继承,使用extends关键字实现。子类可以继承父类的属性和方法,并进行扩展或修改。本文重点讨论如何正确重写父类方法并修改其参数。

问题:箭头函数与super关键字

直接在子类中使用箭头函数重写父类方法会遇到问题:super关键字在箭头函数中不可用,无法调用父类方法。

解决方案:包装函数

解决方法是使用一个包装函数。步骤如下:

  1. 将子类方法定义为普通函数,而非箭头函数。
  2. 创建一个包装函数,该函数接收父类方法作为参数。
  3. 在包装函数内部,修改参数,然后调用父类方法。

代码示例

class Parent {
  constructor() {}

  fetch(data) {
    console.log("父类方法调用:", data);
  }
}

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

  fetch = ((superFetch) => (data) => {
    // 修改参数
    if (data) {
      data.name = "modified";
    }
    console.log("子类方法调用前:", data);
    superFetch(data); // 调用父类方法
  })(this.fetch);
}

const child = new Child();
child.fetch({ age: 30 });

此示例中,子类Child重写了父类Parentfetch方法。包装函数修改了传入fetch的参数data,然后调用父类的fetch方法,实现了参数修改和父类方法的调用。

通过这种包装函数的方式,可以灵活地重写父类方法,并对参数进行修改,同时保持对父类方法的访问。

本篇关于《JSClass继承:父类方法复写及参数修改详解》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>