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

相关推荐
Din44 分钟前
主动取消的防抖
前端·javascript·typescript
百度地图汽车版1 小时前
【AI地图 Tech说】第九期:让智能体拥有记忆——打造千人千面的小度想想
前端·后端
臣妾没空1 小时前
Elpis 全栈框架:从构建到发布的完整实践总结
前端·后端
H5开发新纪元1 小时前
Nginx 部署 Vue3 项目完整指南
前端·javascript·面试
决斗小饼干1 小时前
跨语言移植手记:把 TypeScript 的 Codex SDK 请进 .NET 世界
前端·javascript·typescript
小码哥_常1 小时前
Android Intent.setAction失效报错排查与修复全方案
前端
bluceli1 小时前
JavaScript模块化深度解析:从CommonJS到ES Modules的演进之路
前端·javascript
前端人类学1 小时前
前端输入框禁用:disabled、readonly 与.prop (‘disabled‘, true) 完全解析
前端·javascript
优秀稳妥的JiaJi2 小时前
分享一篇后台管理系统的通用skills
前端·vue.js·前端框架
程序员阿耶2 小时前
移动端适配终极指南:rem 原理与实战
前端