es6-关于原生JS继承到class继承的实现

继承的特点

1.继承可以实现构造函数代码的复用
2.子类可以获取父类的一般方法，不用重复定义

在es6的class出现之前，原生js如何实现继承

1.通过原型进行继承
2.在子类构造函数中调用父类的构造函数
两者组合使用实现继承效果
为了清晰继承关系，先用父类，子类来表示构造函数

 // 父类 定义一个学生的构造函数
  function Student(name,age) {
    this.name = name
    this.age = age
  }
  // 给父类 学生实例对象添加一个方法
  Student.prototype.study = function () {
    console.log('学习')
  }
  
  // 子类 定义一个大学生的构造函数
  function collegeStu (name,age,school) {
    // 此时可以调用父类的构造函数减少相同代码,但要注意改变this的指向
    /* this.name = name
    this.age = age */
    Student.call(this,name,age) //若不指定this,直接调用父类的构造函数，this会指向window
    this.school = school
  }

由于子类构造函数的显式原型链上没有设置study方法,
所以要想使用父类study方法则要改变子类显式原型链的指向
collegeStu1._proto_ === collegeStu.prototype 没有study

student1._proto_ === Student.prototype 有study

要想找到study方法，就让这个{collegeStu.prototype}对象成为Student的实例对象
这样就能够让collegeStu1._proto_顺着原型链找到Student的实例对象，Student的实例的_proto_中就会有study这个方法

    let student1 = new Student('小明',10)
    student1.study() // 学习
 // 让子类 大学生的显式原型成为父类 学生的实例对象,同时将构造器(校正)指向子类构造函数本身
    collegeStu.prototype = new Student ()
    collegeStu.prototype.constructor = collegeStu
    let collegeStu1 = new collegeStu('小华',20,'xxx大学')
    collegeStu1.study() // 继承父类的方法 学习

运行结果

上述是原生JS的继承，ES6中class才实现了真正意义上的类

class定义的类

1.本质上构造函数只是函数而已，并不是真正的类
2.用class定义一个类，对象中会包含一个constructor方法，相当于一个构造函数，也称为构造器，在其中子类可以用super()函数调用父类的构造方法
4.类中也可以定义一般的方法，相当于构造函数.prototype去定义方法

class类实现原型继承，代替原生js写法

class Student{
   constructor(name,age){
        this.name = name
        this.age = age
    }
      study(){
        console.log('学习')
      }
  }

  class collegeStu extends Student{
    constructor(name,age,school){
        super(name,age)
        this.school = school
    }
  }
  
  let student1 = new Student('小明',10)
  student1.study() // 学习

  let collegeStu1 = new collegeStu('小华',20,'xxx大学')
  collegeStu1.study() // 继承父类的方法 学习

class一点补充

1.extends 是对 子构造函数.prototype = new 父构造函数 () 的进一步底层封装并加以优化
2.在类中定义供自身使用而不给实例对象使用的静态方法用static来定义
3.可在子类中重写父类的一般方法，但不会影响父类的方法使用