javascriptのミックスインについてまとめて見た

JavaScriptの多重継承、インターフェース？

何かしらのオブジェクト指向言語を触ったことがある方はご存知かもしれませんが、オブジェクト指向言語には「多重継承」と呼ばれる複数のスーパークラスを継承したサブクラスを作る機能を備えた言語が存在します。

では、クラスベースではないオブジェクトベースのオブジェクト指向言語であるJavaScriptはどうなっているでしょうか？

結論から言うとJavaScriptは単一継承しか出来ません。
しかし、多重継承やインターフェースのような役割に近い、ミックスインと呼ばれる機能が存在しています。

では、例を元に見ていきましょう

ミックスイン

class Human {
  constructor() {
  }
}

class Team {
}

function belong(m) {
  m.addMember = (p) => { this.member = p; }
  m.getMemberData = () => { return this.member; }
  m.isMember = () => { return !!this.member; }
}

belong(Human);

const member = new Human();
member.addMember(new Team()); //==> error

ここではクラスHumanとTeam,関数belongが定義してあります。
しかし、このコードはmember.addMemberの部分でエラーを引き起こしてしまいます。
belong(Human)の部分で私たち人間の感覚であれば、人間が所属するんだなと解るかもしれませんがJavaScriptはそう識別してくれないのです。

では、belongの部分を変えていきましょう

const member = new Human();
belong(member);
member.addMember(new Team());
console.log(member.isMember()); //==> true

このように個々のオブジェクト（member）に対して適用してあげればうまく動作するようになります。

しかし、このままでは毎回belongを呼び出さなければなりません。
これを解決してくれるテクニックが一つあります。

belong(Human.prototype);

const member = new Human();
member.addMember(new Team());
console.log(member.isMember()); // ==> true

こうすることによってbelongをクラスHumanの一部にすることが出来ます。
これがミックスインです。
これでうまく二つのクラスを保守できるようになるでしょう。

まとめ

• JavaScriptは多重継承が出来ない。
• JavaScriptにはミックスインと言う機能がある。
• ミックスインの方法の例