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关键字来访问子类的属性和方法。

相关推荐
汪汪队长1 小时前
谷歌浏览器自定义油猴插件
前端
ZFSS2 小时前
SeeDance Tasks API 的对接和使用
前端·人工智能
睿智的仓鼠2 小时前
🦞OpenClaw 快速部署及使用指南
前端·人工智能
前端付豪2 小时前
Nest 项目小实践之图书增删改查
前端·node.js·nestjs
比特鹰2 小时前
手把手带你用Flutter手搓人生K线
前端·javascript·flutter
奔跑路上的Me2 小时前
前端导出 Word/Excel/PDF 文件
前端·javascript
bluceli2 小时前
JavaScript异步编程深度解析:从回调到Async Await的演进之路
前端·javascript
青青家的小灰灰2 小时前
Vue 3 新标准:<script setup> 核心特性、宏命令与避坑指南
前端·vue.js·面试
SuperEugene2 小时前
路由与布局骨架篇:布局系统 | 头部、侧边栏、内容区、面包屑的拆分与复用
前端·javascript·vue.js
大金乄2 小时前
用canvans画一个流程图
前端