ES6中如何使用class和extends关键字实现继承?

在ES6中,可以使用class关键字来定义类,使用extends关键字来实现继承。下面是一个示例:

js 复制代码
// 父类 
class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 子类 
class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类的构造函数 
    this.age = age;
  }

  sayHello() {
    // 调用父类的方法 
    super.sayHello();
    console.log(`I am ${this.age} years old`);
  }
}

const child = new Child('Alice', 25);
child.sayHello(); // 输出: Hello, my name is Alice 
                 //       I am 25 years old 

在这个例子中,Child类继承了Parent类的所有属性和方法,并且通过super关键字调用了父类的构造函数以及sayHello方法。这样,Child类就拥有了父类的特性,同时也能够被子类进一步扩展或重写。

需要注意的是,在子类的构造函数中,必须先通过super调用父类的构造函数,才能够使用this关键字来访问子类的属性和方法。

相关推荐
一水鉴天11 分钟前
整体设计 定稿 之 34 codybuddy项目跨机同步方案 之2 (codebuddy)
服务器·前端
朱 欢 庆11 分钟前
Jenkins任务执行完成后发送邮件
前端·经验分享·jenkins
前端无涯12 分钟前
React/Vue 消息订阅发布:实现方式、开发避坑与面试核心考点
前端·javascript·vue.js
一个没有感情的程序猿23 分钟前
前端实现交互式3D人体肌肉解剖图:基于 Three.js + React Three Fiber 的完整方案
前端·javascript·3d
武玄天宗23 分钟前
第五章、flutter怎么创建底部底部导航栏界面
前端·flutter
Goodbaibaibai25 分钟前
接口请求了两次,一次报200,一次报404
前端
全马必破三28 分钟前
React虚拟Dom
前端·javascript·react.js
FAQEW29 分钟前
若依微服务版(RuoYi-Cloud)本地启动全攻略
前端·后端·微服务·若依·二开
@菜菜_达40 分钟前
前端防范 XSS(跨站脚本攻击)
前端·xss
Rysxt_44 分钟前
Vue 3 项目核心:main.ts 文件的作用与配置详解
前端·javascript·vue.js