ES6的两个特性：Class类和类的继承extens

Class类

• ES6引入Class(类)的概念，让类的写法更接近传统语言的写法，ES6的类可以看作是语法糖，它的绝大部分功能，ES5都可以做得到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

• 对比ES5和ES6创建class的写法

  // ================= ES5 start =================
  // ES5 -> 构造函数、原型方法、静态属性
  // 构造函数
  function Person(name, age) {
    this.name = name;
    this.age = age;
  }
  // 原型方法
  Person.prototype.getName = function() {
    return this.name;
  }
  // 静态属性
  Person.info = "Person的静态属性";
  const person = new Person("Damao", 18);
  console.log(person.getName()); // Damao
  console.log(Person.info); // Person的静态属性
  // ================= ES5 end =================

  // ================= ES6 start =================
  // ES6 -> 构造函数、原型方法、静态属性
  class Person {
    constructor(name, age) { // 构造函数
      this.name = name;
      this.age = age;
    }
    getName() { // 原型方法（无需加function）
      return this.name;
    }
  }
  // 静态属性
  Person.info = "Person的静态属性";
  const person = new Person("Damao", 18);
  console.log(person.getName()); // Damao
  console.log(Person.info); // Person的静态属性
  // ================= ES6 end =================

• ES6 class中，用static修饰即为类的静态方法（可以直接用类名访问），即在这个类（构造函数）对象本身上的方法，加上static表示该方法不会被实例继承

  class Person {
  static classMethod() {
      return "this is static method";
    }
  }
  console.log(Person.classMethod()); // this is static method
  //
  // 静态方法不可以通过实例来即成，即不能通过实例调用，如
  let person = new Person();
  console.log(person.classMethod()); // TypeError: person.classMethod is not a function

  类的继承extends

• Class可以通过extends关键字来实现继承，而ES5则需要通过修改原型链来实现继承

• 对比ES5和ES6继承的写法

  // ================= ES5 start =================
  // ES5 -> 利用原型让一个引用类型继承另一个引用类型的属性和方法，即让原型对象等于另一个类型的实例
  // 原型继承缺点：父类公有和私有属性方法都为子类公有
  // 
  function Person() {
    this.name = "Damao";
  }
  Person.prototype.getName = function() {
    return this.name;
  }
  function SuperPerson() {
    this.superName = "Damao2250";
  }
  // 继承 Person
  SuperPerson.prototype = new Person();
  SuperPerson.prototype.constructor = SuperPerson;
  SuperPerson.prototype.getSuperName = function() {
    return this.superName;
  }
  const superPerson = new SuperPerson();
  console.log(superPerson.getName()); // Damao
  console.log(superPerson.getSuperName()); // Damao2250
  // ================= ES5 end =================

  // ================= ES6 start =================
  class Person {
  constructor(name, age) { // 构造函数
    this.name = name;
    this.age = age;
  }
  getName() { // 原型方法（无需加function）
    return this.name;
  }
  }
  class SuperPerson extends Person {
  constructor(name, age, superName) {
    // 在继承的构造函数中，必须调用一次super方法，它表示构造函数的继承；必须在this前调用
    // super()是将父类中的this对象继承给子类
    super(name,age);
    this.superName = superName;
  }
  superGetName() {
    // super 直接调用父级的原型方法
    console.log(super.getName());
    console.log(this.superName);
  }
  }
  const person = new SuperPerson("Damao", 18, "Damao2250");
  console.log(person.getName()); // Damao
  console.log(person.superGetName()); // Damao  Damao2250
  // ================= ES6 end =================