Quais são as diferenças entre a classe ES2015 e os construtores de função ES5?

Vamos primeiro olhar o exemplo de cada um deles:

// Constructor de função ES5
function Person(name) {
  this.name = name;
}

// ES2015 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

Para construtores simples, eles parecem bem semelhantes.

A principal diferença no construtor vem quando se usa herança. Se quisermos criar uma classe Student que seja uma subclasse de Person e adicionar um campo studentId, é isso que devemos fazer além do que foi mostrado acima.

// Construtor de função ES5
function Student(name, studentId) {
  // Chamar o construtor da superclasse para inicializar membros derivados da superclasse.
  Person.call(this, name);

  // Inicializar os próprios membros da subclasse.
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// Classe ES2015
class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

É muito mais verboso usar a herança na ES5 e a versão ES2015 é mais fácil de entender e lembrar.

Quais são as diferenças entre a classe ES2015 e os construtores de função ES5?

Guias

Planos de estudo

Empresa