【JavaScript】クラス【オブジェクト指向構文】

前回はプロトタイプでオブジェクトを生成するやり方を書きました。
web-seikatsu.hatenablog.jp

ES2015では新しくクラスでオブジェクトを生成することができるようになったので、前回のプロトタイプと合わせて見ていきます。

■プロトタイプ

// Carオブジェクトを生成して、nameとcolorプロパティを定義
var Car = function(name, color) {
    this.name = name;
    this.color = color;
};

// getSpecメソッドを定義
Car.prototype.getSpec = function() {
    return this.name + 'は' + this.color + '色です。';
};

var prius = new Car('プリウス', '赤');
var aqua = new Car('アクア', '青');
var fit = new Car('フィット', '白');

console.log(prius.getSpec()); // プリウスは赤色です。
console.log(aqura.getSpec()); // アクアは青色です。
console.log(fit.getSpec()); // フィットは白色です。

これは最初に元となるオブジェクト（ここではCar）を生成し、そのCarオブジェクトに対するメソッドを定義（ここではgetSpec）します。
そしてprius、aqua、fitにCarオブジェクトをインスタンス化したものを代入しています。

次に上記をクラスで書き換えてみます。

■クラス

class Car {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

    getSpec() {
        return this.name + 'は' + this.color + '色です。';
    }
}

let prius = new Car('プリウス', '赤');
let aqua = new Car('アクア', '青');
let fit = new Car('フィット', '白');

console.log(prius.getSpec()); // プリウスは赤色です。
console.log(aqua.getSpec()); // アクアは青色です。
console.log(fit.getSpec()); // フィットは白色です。