Class类的继承——子类继承父类的语法-class 子类 extends 父类 & super代表-原型对象Person.prototype、前面不能有this操作_class extends

Class类的继承——子类继承父类的语法-class 子类 extends 父类 & super代表-原型对象Person.prototype、前面不能有this操作

1、继承的语法

1、子类继承父类——语法：class 子类 extends 父类，在子类的构造方法中调用父类的构造方法。

2、同名覆盖：子类中声明的方法名和父类中的方法名相同时，子类中的方法将覆盖继承于父类的方法，采用自己的。

3、super前面不能有this操作。

  <script>
    //父类Person
    class Person {
      constructor(name, sex) {
        this.name = name;
        this.sex = sex;
        this.say = function () {
          console.log('say');
        };
      }
      speak() { console.log("speak") }

      static speak() {  // static 定义数据
        console.log("static speak")
      }
    }
    Person.version = '1.0';

    // 一：子类继承父类——语法：class 子类 extends 父类
    class Programmer extends Person {
      //在子类的构造方法中调用父类的构造方法
      constructor(name, sex, feature) {
        //  this.feature = feature; 三：×错误写法，super前面不能有this操作
        super(name, sex);
        this.feature = feature;
      }

      //二：同名覆盖：子类中声明的方法名和父类中的方法名相同时，子类中的方法将覆盖继承于父类的方法，采用自己的。
      speak() {
        console.log("Programmer speak");
      }
    }
    const zs = new Programmer("楚留香", "male", "很帅");
    console.log(zs.name, zs.sex, zs.feature); //楚留香 male 很帅
    zs.say(); //say
    //子类使用了自己的speak方法：
    zs.speak();//Programmer speak
    Programmer.speak();//static speak
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

2、super()的特殊性

2.1、super作为函数调用

代表父类的构造方法，只能用在子类的构造函数中，用在其他地方就会报错；

super虽然代表了父类的构造方法，但是内部的this指向调用这个函数的类的实例

  <script>
    //1.super作为函数调用
    //代表父类的构造方法，只能用在子类的构造函数中，用在其他地方就会报错
    //super虽然代表了父类的构造方法，但是内部的this指向调用这个函数的类的实例
    class Person {
      constructor(name) {
        this.name = name;
        console.log(this);
      }
    }
    class Programmer extends Person {
      constructor(name) {
        super(name);
      }
      fn() {
        //  super(name);报错：Uncaught SyntaxError: 'super' keyword unexpected here
      }
    }
    const xh = new Programmer("小红", "female");
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.2、super作为对象使用

(1) 在子类的构造方法或一般方法中，super代表的是原型对象Person.prototype

  <script>
    //2.作为对象使用：
    //(1).在子类的构造方法或一般方法中，super代表的是原型对象Person.prototype
    class Person {
      constructor(name) {
        this.name = name;
      }
      speak() {
        console.log('speak');
        console.log(this);
      }
    }
    class Programmer extends Person {
      constructor(name) {
        super(name);
        //在子类的构造方法中调用父类的原型的speak方法
        super.speak(); //speak this指向子类的实例
      }
      //在子类的一般方法中调用调用父类的原型的speak方法，再补充子类的其他功能：
      speak() {
        super.speak();//speak this指向子类的实例
        console.log("Programmer speak") //Programmer speak
      }
    }
    const xh = new Programmer("小红");
    xh.speak();
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

(2) 在子类的静态方法中使用，super指向的是父类，而不是父类的原型对象，this指向子类

<script>
    //(2)在子类的静态方法中使用，super指向的是父类，而不是父类的原型对象
    class Person {
      constructor(name) {
        this.name = name;
      }
      speak() {
        console.log('speak');
        console.log(this);
      }
      static speak() {
        console.log("Person static speak")
      }
    }
    class Programmer extends Person {
      constructor(name) {
        super(name);
      }
      static speak() {
        super.speak();
        console.log("Programmer static speak")
      }
    }
    Programmer.speak(); 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3、注意事项

使用super的时候，必须显示指定是作为函数使用还是作为对象使用（要么加括号，要么打点调属性方法），否则浏览器会报错。

当子类继承父类时，如果不需要通过constructor设置属性和继承父类constructor中的属性，那么可以不写constructor和super,否则，就必须写上constructor和super。