这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

缘由

上一篇我们学习了es6新增的class类，今天趁热打铁，继续学习下class类的继承。

语法

// 父类
class Person {
   constructor (name) {
      this.name = name
   }
   getName () {
     return this.name
   }
   static staticFn() {
      console.log('我是静态方法~')
   }
}
// 继承的子类
class Man extends Person {
  constructor (info) {
    super(info.name)
    this.age = info.age
  }
}
const instance = new Man({name: '答案cp3',age:18}) // {name: '答案cp3', age: 18}
console.log(instance.getName()) // 答案cp3
Man.staticFn() // 我是静态方法~

可以看到新建的实例继承了Person类的name，还有getName方法。新建的类也继承了父类的静态方法。

上面我们先创建了一个Person类，然后再用Man来继承Person类。

继承使用的是extends关键字，然后还得在constructor构造方法里面使用调用super方法，这个方法是等于调用父类的constructor构造方法。

通过super方法给子类加上父类的方法和属性。

如果子类没写constructor构造方法，子类新建实例会自动默认调用constructor构造方法和super方法。

// 父类
class Person {
   constructor (args) {
      console.log(args) // {name: '答案cp3',age:18}
   }
}
// 继承的子类
class Man extends Person {
}
new Man({name: '答案cp3',age:18})

知识点

1.子类在constructor构造方法里必须要调用super方法的，不然无法继承父类的方法和属性，会报错。同时，不能在调用super方法之前使用this。

```js
class Person {
   constructor (args) {
      console.log(args) // {name: '答案cp3',age:18}
   }
}
// 继承的子类
class Man extends Person {
  constructor () {
   this.name = '答案cp3'
  }
}
new Man({name: '答案cp3',age:18})  // error： Must call super constructor in derived class before accessing 'this' or returning from derived constructor
```

2.super作为函数调用只能在子类的constructor方法中调用，但是它作为对象，可以在子类的其它地方中使用，如果是在实例方法中调用，指向的是父类的原型对象，如果是在静态方法中调用，则指向的是父类。

```js
class Person {
   static staticParentFn () {
      console.log('我是父类的静态方法')
   }
   parentFn () {
    console.log('我是父类原型上的方法')
   }
}
// 继承的子类
class Man extends Person {
   static staticChildFn () {
     super.staticParentFn()
   }
   childFn () {
     super.parentFn()
   }
}  
const instance = new Man()
Man.staticChildFn() // 打印我是父类的静态方法
instance.childFn() // 打印我是父类原型上的方法
```

3. 也可以继承原生的构造函数

class Arr extends Array {
  constructor (...args) {
     super(...args)
  }
}
const arr = new Arr(1,2,3)
arr.push(4)
console.log(arr) // Arr(4) [1, 2, 3, 4]

学习下es6新增的`class`类-继承篇

缘由

语法

知识点