ES6 Class语法介绍

版权声明：本文为博主原创文章，如有错误欢迎指正，如需转载请注明出处，谢谢配合。 https://blog.csdn.net/xiaxiangyun/article/details/84585229

参考文章：ECMAScript 6 入门

概述

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功/能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

举个栗子：

// ES5
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

// ES6
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

// 即ES5的构造函数Point，对应ES6的Point类的构造方法。

基本语法

• 在类的实例上面调用方法，其实就是调用原型上的方法。

  class B {}
  let b = new B();
  
  b.constructor === B.prototype.constructor // true
  

• 由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

  class Point {
    constructor(){
      // ...
    }
  }
  
  Object.assign(Point.prototype, {
    toString(){},
    toValue(){}
  });
  

• prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。

  Point.prototype.constructor === Point // true
  

• 不同的是，类的内部所有定义的方法，都是不可枚举的；而ES5的写法中，函数原型上的方法是可枚举的。

  // ES6
  class Point {
    constructor(x, y) {
      // ...
    }
  
    toString() {
      // ...
    }
  }
  
  Object.keys(Point.prototype)
  // []
  Object.getOwnPropertyNames(Point.prototype)
  // ["constructor","toString"]
  
  //ES5
  var Point = function (x, y) {
    // ...
  };
  
  Point.prototype.toString = function() {
    // ...
  };
  
  Object.keys(Point.prototype)
  // ["toString"]
  Object.getOwnPropertyNames(Point.prototype)
  // ["constructor","toString"]
  

• 类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

  class Foo {
    constructor() {
      return Object.create(null);
    }
  }
  
  Foo()
  // TypeError: Class constructor Foo cannot be invoked without 'new'
  

• 与函数一样，类也可以使用表达式的形式定义。

• 类不存在变量提升（hoist），这一点与 ES5 完全不同。

Class的继承

• Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

  class Point {
  }
  
  class ColorPoint extends Point {
  }
  

• 在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。

  class Point {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
  }
  
  class ColorPoint extends Point {
    constructor(x, y, color) {
      this.color = color; // ReferenceError
      super(x, y);
      this.color = color; // 正确
    }
  }
  

• 父类的静态方法，也会被子类继承。

  class A {
    static hello() {
      console.log('hello world');
    }
  }
  
  class B extends A {
  }
  
  B.hello()  // hello world