1. 程式人生 > >ES6 class 技術點拾遺

ES6 class 技術點拾遺

語法

  • 方法不需要加function,方法之間不需要加分號
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

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

類的prototype

類的方法都定義在prototype上,但是是不可以列舉的。

class Point {
    constructor(x, y) {
        
this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } getX() { return this.x; } } Point.prototype.aa = function (){} console.log(Object.keys(Point.prototype)) //輸出['aa']

 

靜態方法

  • 靜態方法的this指向類,而不是示例
  • 靜態方法可以和實力方法重名
  • 父類的靜態方法可可以被子類繼承
  • class內部只有靜態方法,而沒有靜態屬性
class Foo {
  static bar () {
    this.baz();
  }
  static baz () {
    console.log('hello');
  }
  baz () {
    console.log('world');
  }
}

Foo.bar() // hello
// 以下兩種寫法都無效
class Foo {
  // 寫法一
  prop: 2

  // 寫法二
  static prop: 2
}

Foo.prop 
// undefined

繼承

  • 使用extends關鍵字實現繼承
  • 使用super呼叫父類的建構函式
  • super函式必須在子類的建構函式中呼叫,否則會報錯。
  • super函式位於子類建構函式的第一行!因為子類的this必須先通過父類的建構函式完成構造。不呼叫super方法,子類就得不到this物件。也就是說子類若是有建構函式的話,建構函式的第一行必須是super。
  • super當做函式使用時,即super(),只能用在子類的建構函式中。當做物件使用時,即super.方法(),指向父類的原型物件(在靜態方法中指向父類),此時注意是呼叫父類原型上的方法(或者父類的靜態方法),而不是例項方法;同時this指向子類的例項。
class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 呼叫父類的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 呼叫父類的toString()
  }
}