ES6類和ES5函式建構函式有什麼區別？

banq發表於2019-01-04
函式

我們先來看看每個例子：

// ES5 Function Constructor
function Person(name) {
  this.name = name;
}

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

對於簡單的建構函式，它們看起來非常相似。
使用繼承時，建構函式的主要區別在於。如果我們想建立一個Student子類Person並新增studentId欄位的類，那麼除了上述內容之外，我們還必須這樣做：

// ES5 Function Constructor
function Student(name, studentId) {
  // Call constructor of superclass to initialize superclass-derived members.
  Person.call(this, name);

  // Initialize subclass's own members.
  this.studentId = studentId;
}

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

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

在ES5中使用繼承更加冗長，ES6版本更易於理解和記憶。

 

相關文章