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

相关推荐
0思必得010 分钟前
[Web自动化] Selenium浏览器复用
前端·python·selenium·自动化
之歆15 分钟前
Linux 系统安装、故障排除、sudo、加密、DNS 与 Web 服务整理
linux·运维·前端
OpenTiny社区20 分钟前
TinyEngine 2.10 版本发布:零代码 CRUD、云端协作,开发效率再升级!
前端·vue.js·低代码
哟哟-25 分钟前
Nginx配置:静态文件访问时动态添加时间戳
运维·前端·javascript·nginx
码云数智-园园34 分钟前
自助建站哪个好?三款主流自助建站对比评测
前端
肆忆_37 分钟前
C++ 汇编层面与语法语义层面总结:this指针 模板 块级作用域 引用
前端
用户40993225021240 分钟前
Vue中默认插槽、具名插槽、作用域插槽如何区分与使用?
前端·vue.js·github
zheshiyangyang1 小时前
前端面试基础知识整理【Day-3】
前端·word
用户98236107902771 小时前
Vite 项目优化分包填坑之依赖多版本冲突问题深度解析与解决方案
前端
陆枫Larry1 小时前
深入浅出:CSS 中的“隐形结界”——BFC 详解
前端·css