Classes

ECMAScript 6 で導入されたクラス構文は、既存のプロトタイプによるオブジェクト指向の糖衣構文です。 新しいオブジェクト指向を JavaScript に導入するものではありません。クラス構文を用いることで、クラス定義をより簡潔、明瞭に記述できるようになります。

クラス定義

実際のところ、クラスは関数であり、関数式や関数宣言を用いて定義できます。クラス構文には、2つの選択肢があります:

• クラス式
• クラス宣言

クラス宣言

クラスを定義する一つの方法は、クラス宣言を行うことです。そのためには, "class"キーワードとクラス名を決めなければいけません。 (この例では"Polygon").

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

ホスティング(巻き上げ)

関数宣言では hoisted が行われるのに対し、クラス宣言では行われません。そのためクラスを使用する前に、そのクラスが宣言する必要があります。宣言されていない場合、ReferenceError が送出されます：

var p = new Polygon(); // ReferenceError

class Polygon {}

クラス式

クラス式はクラスを定義するもう 1 つの方法です。これを利用することで、名前つきクラス以外に、無名クラスも定義できます。名前つきの場合、その名前はクラス本体内でのみ有効となります。

// 無名
var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// 名前つき
var Polygon = class Porygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

クラス本体とメソッド定義

中括弧 {} 内にクラス本体を記述します。クラス本体には、メソッドやコンストラクタといったクラスメンバを記述します。

strict モード

クラス宣言、もしくはクラス式で定義されたクラス本体は、strict モード で実行されます。

コンストラクタ

コンストラクタ は、そのクラスによって定義されるオブジェクトの生成時に、初期化を行う特別なメソッドです。"constructor" という名前のメソッドは、クラスに1つしか定義できません。2 回 以上定義されている場合は、SyntaxError が送出されます。

親クラスのコンストラクタは super というキーワードで呼び出せます。

プロトタイプメソッド

メソッド定義 を参照してください。

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

静的メソッド

static キーワードを利用すると、クラスへ静的メソッドを定義できます。静的メソッドは、呼び出しに、そのクラスのインスタンスを作成する必要はありません。そのクラスが生成されていれば呼び出せます。静的メソッドは、アプリケーションのユーテリティメソッドの実装によく利用されます。

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

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

継承によるクラスの拡張

 extends キーワードをクラス宣言、もしくはクラス式内に記述することで、他のクラスの子クラスを定義できます。

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

組み込みオブジェクトのサブクラス定義

TBD

super による親クラスへの参照

super キーワードを利用することで、親クラスのメソッドを呼び出せます。

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

ES5との比較

TBD

使用例

TBD

Mix-ins

抽象クラスやmix-inはクラスのためのテンプレートです。

Abstract subclasses or mix-ins are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

var CalculatorMixin = Base => class extends Base {
  calc() { }
};

var RandomizerMixin = Base => class extends Base {
  randomize() { }
};

A class that uses these mix-ins can then be written like this:

class Foo { }
class Bar extends CalculatorMixin(RandomizerMixin(Foo)) { }

仕様

ブラウザ実装状況

関連項目

• 関数
• class declaration
• class expression
• super