如何理解es6中的class,以及class中的constructor函式

Little heaven發表於2018-12-21

首先,“語法糖”的意思是現有技術本可以實現,但是採用某種寫法會更加簡潔優雅。最常見的就是宣告物件採用的就是語法糖 var a={b:111}。 ES6的class可以看作只是一個語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓物件原型的寫法更加清晰、更像物件導向程式設計的語法而已。

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

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
複製程式碼

等同於

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

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
複製程式碼

在constructor中必須呼叫 super方法,子類沒有自己的this物件,而是繼承父類的this物件,然後對其進行加工。super代表了父類建構函式。對於你的例項相當於執行Component(props)。但是注意,此處this指向 子類。更嚴謹的是相當於

Component.prototype.constructor.call(this,props)。
複製程式碼

相關文章