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

相关推荐
LCG元33 分钟前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian35 分钟前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼40 分钟前
【前端知识】常用CSS样式举例
前端·css
wl85111 小时前
vue入门到实战 三
前端·javascript·vue.js
ljz20161 小时前
本地搭建deepseek-r1
前端·javascript·vue.js
爱是小小的癌1 小时前
Java-数据结构-优先级队列(堆)
java·前端·数据结构
傻小胖2 小时前
vue3中Teleport的用法以及使用场景
前端·javascript·vue.js
wl85112 小时前
Vue 入门到实战 七
前端·javascript·vue.js
Enti7c3 小时前
用 HTML、CSS 和 JavaScript 实现抽奖转盘效果
前端·css
LCG元3 小时前
Vue.js组件开发-使用Vue3如何实现上传word作为打印模版
前端·vue.js·word