【ES6】js 中class的extends、super关键字用法和避坑点

在JavaScript中,使用class关键字可以实现面向对象编程。其中,extends和super是两个非常重要的关键字,它们分别用于实现类的继承和调用父类的方法。

一、extends关键字

extends关键字用于实现类的继承,它可以让一个子类继承父类的属性和方法。使用extends关键字时,需要指定要继承的父类,语法如下:

javascript 复制代码
class 子类 extends 父类 {
  // 子类的属性和方法
}

例如,定义一个Person类和一个Student类,Student类继承自Person类:

javascript 复制代码
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类的构造函数,这一行必须在this之前,否则报错。因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。
    this.grade = grade;
  }
  study() {
    console.log(`I'm studying...`);
  }
}

在上面的例子中,Student类继承了Person类的构造函数和方法,并且定义了自己的属性和方法。在构造函数中,使用super关键字来调用父类的构造函数,以便初始化父类的属性和方法。
注意:

上面的super(name, age)必须在this之前。因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。

二、super关键字

super关键字用于调用父类的方法。在子类的方法中,可以使用super关键字来调用父类的方法。使用super关键字时,需要指定要调用的父类方法,语法如下:

javascript 复制代码
super(); // 调用父类的构造函数
super.父类方法(); // 调用父类的方法
super.属性; // 访问父类的属性

例如,在上面的例子中,在Student类的构造函数中使用了super关键字来调用父类的构造函数:

java 复制代码
constructor(name, age, grade) {
  super(name, age); // 调用父类的构造函数
  this.grade = grade;
}

另外,在子类的方法中,也可以使用super关键字来调用父类的方法。例如:

javascript 复制代码
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name); // 调用父类的构造函数
    this.grade = grade;
  }
  sayHello() {
    super.sayHello(); // 调用父类的方法
    console.log(`I'm a student in grade ${this.grade}`);
  }
}

在上面的例子中,Student类继承了Person类,并重写了sayHello方法。在重写的sayHello方法中,使用super关键字来调用父类的sayHello方法。

相关推荐
用户6120414922134 分钟前
使用JSP+Servlet+JavaBean做的课程后台管理系统
java·javascript·mysql
青椒a8 分钟前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo8 分钟前
react 中的useContext和Provider实践
前端·react.js
AnalogElectronic8 分钟前
vue3 实现贪吃蛇手机版01
开发语言·javascript·ecmascript
asdfsdgss9 分钟前
Angular CDK 自适应布局技巧:响应式工具实操手册
前端·javascript·angular.js
袁煦丞27 分钟前
【私人导航员+内网穿透神器】Sun-Panel × cpolar让NAS变身你的数字管家:cpolar内网穿透实验室第564个成功挑战
前端·程序员·远程工作
爱吃的强哥27 分钟前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
袁煦丞34 分钟前
开启SSH后,你的NAS竟成私有云“变形金刚”:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作
IT_陈寒34 分钟前
SpringBoot 3.2新特性实战:这5个隐藏功能让我开发效率提升50%
前端·人工智能·后端
申阳1 小时前
2小时个人公司:一个全栈开发的精益创业之路
前端·后端·程序员