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

相关推荐
牧艺3 小时前
cos-design WeatherBackground:用 Canvas 做一个「会变天」的背景引擎
前端·canvas·视觉设计
OpenTiny社区3 小时前
深度解析 LSP 如何为 AI 装上“眼睛”
前端·ai编程
布列瑟农的星空3 小时前
流程类SVG画布的通用开发范式
前端
fsssb3 小时前
Chromium 源码学习笔记(七):那些跨进程的调用,底下都是同一个东西——Mojo
前端
MichaelJohn4 小时前
从零星白屏到“启发式缓存”,记录一次刚接手屎山的惊险排查
前端
程序员黑豆4 小时前
鸿蒙应用开发:6种图片加载方式详解
前端·华为·harmonyos
半个落月4 小时前
用 React 搭一个 WebGPU 模型加载页:从状态驱动到可复用进度条
前端·react.js
雪隐5 小时前
个人电脑玩AI-13让5060 Ti给你打工——我用 0.9B 小模型终结了"谁来记会议纪要"这个世纪难题
前端·人工智能·后端
橘子星5 小时前
我一个前端切图仔,凭什么能在浏览器里跑大模型?
前端·javascript·前端框架
70asunflower5 小时前
初学者理解 Web 工作原理(完全教程)
前端