前端进阶攻略之ES6中的class类继承extends与super

最新推荐文章于 2023-09-04 09:56:03 发布

原创最新推荐文章于 2023-09-04 09:56:03 发布 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#es6

ES6 专栏收录该内容

15 篇文章

订阅专栏

本文深入解析ES6中的类继承与super关键字的使用，包括extends语法、super调用父类构造函数的方法，以及如何在子类中覆盖和扩展父类的功能。通过实例展示了如何利用extends关键字创建子类，并通过super关键字调用父类的构造函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6中的class类继承extends与super

在这里插入图片描述

一.extends与super的基本语法

1、类的继承 extends

类可以继承另外一个类。这是一个非常棒的语法，在技术上是它基于原型继承实现的。为了继承另外一个类，我们需要在括号 {…} 前指定 “extends” 和父类，语法如下：

         class Animal{
             constructor (type,name,sex,age){
                this.type=type;
                this.name=name;
                this.sex=sex;
                this.age=age;
             }
            print(){
                console.log(`种类:${this.type}`);
                console.log(`姓名:${this.name}`);
                console.log(`性别:${this.sex}`);
                console.log(`年龄:${this.age}`);
            }
        }
        // 类的继承 extends
        // 类可以继承另外一个类。这是一个非常棒的语法，在技术上是它基于原型继承实现的。
        // 为了继承另外一个类，我们需要在括号 {..} 前指定 "extends" 和父类

        // super，调用父类中的构造函数；
        // 1.constructor如果不写，会直接使用父类的构造器作为自己的构造器
        // 2.constructor如果写了,必须加上super,必须手动调用，必须写在第一行
       class Dog extends Animal{
            constructor(name,sex,age){
              super("犬类",name,sex,age);
              this.loves="吃肉";
            } 
            print1(){
                console.log(this.loves);
            }
       }
        var d=new Dog("犬类","旺财","男",3);
        console.log(d);
        d.print();
        d.print1();

就如你期望的那样，也正如我们之前所见，extends 关键字实际上是给 Dog.prototype 添加了一个属性 [[Prototype]]，并且它会指向 Animal.prototype。
所以现在 Dog 既可以访问它自己的方法，也可以访问 Animal 的方法。

2、extends 后可跟表达式

Class 语法的 `extends’ 后接的不限于指定一个类，更可以是表达式。
例如一个生成父类的函数：

function f(phrase) {
  return class {
    sayHi() { alert(phrase) }
  }
}
class User extends f("Hello") {}
new User().sayHi(); // Hello

例子中，class User 继承了 f(‘Hello’)返回的结果。
对于高级编程模式，当我们使用的类是根据许多条件使用函数来生成时，这就很有用。

3.super调用父类中的构造函数

3.1constructor如果不写，会直接使用父类的构造器作为自己的构造器
3.2constructor如果写了,必须加上super,必须手动调用，必须写在第一行

    //父类
    class Person{
        constructor(name){
            this.name = name
        }
        showName(){
            console.log(`父类名字：${this.name}`) //父类名字：吾爱博客
        }
    }
    //子类
    class Student extends Person{
        //如果写了constructor必须加上super,必须手动调用，必须写在第一行
        constructor(name,skill){
            super(name)
            this.skill = skill
        }
        showName(){
            super.showName();//父级的方法执行
            console.log(`子类名字：${this.name}`) //子类名字：吾爱博客
        }
        showSkill(){
            return `技能:${this.skill}` 
        }
    }
    let s = new Student("吾爱博客","逃学")
    console.log(s.skill,s.name)  //逃学 吾爱博客
    s.showName()

super关键字，它指代父类的构造函数（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this.