【JavaScript】オブジェクト指向

JavaScriptにおけるのオブジェクト指向の概要の説明。
ここではJavaやPHPなど、サーバーサイド用の言語のオブジェクト指向の知識がある程度備わっている前提で話を進めます。

JavaScriptは、元々オブジェクト指向を前提に作られた言語ではありませんが、歴史とともに徐々にオブジェクト指向が取り入れられてきました。
ES5（ECCMAScript 2015）からは、他の多くの言語でも採用されているクラスを用いたオブジェクト指向の書き方ができるようになり、Javaなどの言語のオブジェクト指向に似た書き方できるようになりました。

以下はES5以降でできるJavaScriptのクラス構文です。
Userクラスを定義し、そのクラスのインスタンスを作成してメソッドを実行します。

// クラスの定義
class User {
    // コンストラク
    constructor(_name, _age) {
        this.name = _name;
        this.age = _age;
    }
    // プロパティ
    get name() {
        return this._name;
    }
    set name(value) {
        this._name = value;
    }
    get age() {
         return this._age;
    }
    set age(value) {
        this._age = value;
    }
    // メソッド
    show() {
        console.log(`名前：${this.name} 年齢：${this.age}`);
    }
}
// オブジェクトの作成
const user = new User('Alice', 20);
// メソッドの実行
user.show();

結果

名前：Alice 年齢：20

解説

• JavaScriptのクラスではいわゆるインスタンスフィールドを定義することはできません。ゲッター、セッター(get, set)によってプロパティを定義します。
• コンストラクタはconstructorにより定義します。
• JavaScriptのオブジェクト指向ではpublic, privateなどのアクセス修飾子を指定することはできません。全てがpublicとしての扱いになります。

static

メソッドにstaticをつけることで静的メソッドを定義することができます。
静的メソッドでは、オブジェクトを作成することなく、クラス名.メソッド名で呼び出すことができます。

class Calc {
    static triangle(base, height) {
       return base * height / 2;
    }
}
console.log(Calc.triangle(10, 3));

結果

15

継承

JavaScriptのオブジェクト指向では既存のクラスを継承することができます。
継承の考え方はその他のオブジェクト指向言語の継承とほとんど同じです。
既存のクラスのメソッドやプロパティを引き継ぎつつ、新たなメソッドやプロパティを追加することができます。
また、同名のメソッドを定義してメソッドを上書き（オーバーライド）することができます。

// Userクラスの継承
class Student extends User {
    constructor(_name, _age, _score) {
        super(_name, _age);
        this.score = _score;
    }
    get score() {
        return this._score;
    }
    set score(value) {
        this._score = value;
    }
    // オーバーライド
    show() {
        console.log(`名前：${this.name} 年齢：${this.age} スコア：${this.score}`);
    }
}
const student = new Student('Bob', 22, 80);
student.show();

結果

名前：Bob 年齢：22 スコア：80

解説

• 既存のクラスを継承する場合はextendsキーワードを使用します。

オブジェクト

JavaScriptでclass構文が使用できるようになったのはES5以降。
それまではクラス構文はありませんでしたが、オブジェクトという概念自体はあります。
オブジェクトは以下のように表すことができます。

const user = {
    name : "satou",
    age : 20,
    show() {
        console.log('名前：' + this.name + ' 年齢：' + this.age);
    }
};
// プロパティ参照方法1
console.log(user.name);
// プロパティ指定方法2
console.log(user['name']);
// メソッドの呼び出し
user.show();

user.score1 = 45; // プロパティ追加
user.score2 = 55;
console.log(user.score1);
console.log(user['score2']);

functionを使ってオブジェクトを作る

functionの構文を使ってオブジェクトを作成することも可能です。

function User(name, age) {
    this.name = name;
    this.age = age;
}
let alice = new User('Alice', 20);

console.log(alice.name);
console.log(alice.age);

オブジェクトのプロトタイプ

Object のプロトタイプ - ウェブ開発を学ぶ | MDN

その他

• JavaScriptのオブジェクト指向では、他の言語のオブジェクト指向で使われている抽象クラスやインターフェースといった概念はありません。
• ただし、TypeScriptなどのaltJSを使うことで、より他のオブジェクト指向言語に近い文法でクラスを定義することが可能になります。