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

相关推荐
IT_陈寒几秒前
Redis 性能优化实战:5个被低估的配置项让我节省了40%内存成本
前端·人工智能·后端
chilavert3181 分钟前
技术演进中的开发沉思-261 Ajax:动画优化
前端·javascript·ajax
尘心cx5 分钟前
前端-APIs-day3
开发语言·前端·javascript
烂不烂问厨房18 分钟前
前端自适应布局之等比例缩放
开发语言·前端·javascript
kong790692828 分钟前
环境搭建-运行前端工程
前端
CodeLinghu31 分钟前
提示词链模式:一种利用LLM大语言模型处理复杂任务的强大范式
前端·人工智能·语言模型
A242073493037 分钟前
js模糊搜索
开发语言·javascript·ecmascript
J2虾虾40 分钟前
关于Ant Design Vue
前端·javascript·vue.js
程序员笨鸟1 小时前
[特殊字符] React 高频 useEffect 导致页面崩溃的真实案例:从根因排查到彻底优化
前端·javascript·学习·react.js·面试·前端框架
Shriley_X1 小时前
React
javascript·react.js·ecmascript