JavaScriptのプロトタイプチェーンをECMAScript6のクラス構文で書き換え

投稿日:2017年9月19日

JavaScriptでオブジェクトといえば、まずこんな感じのオブジェクトリテラルな記述です（他にもありますが説明の都合上、割愛します）。

var objA {
    name: Tom,
    scrore: 51
};

JavaScriptのプロトタイプ継承

オブジェクトリテラルを前提として、加えてプロトタイプ継承を行うと、こんな感じになるかと思います。

var objA {
    name: Tom,
    scrore: 51
};

objA.__proto__ = objB;

つい最近までは、ECMAScript(新しいタブで開く)という言葉自体も知らなくて、これが普通だと思っていました。

ECMAScript6からクラス構文の導入

ところが、JavaScriptの標準手続きであるECMAScript（エクマスクリプト）を読んでいると、ECMAScript5からECMAScript6に変わっていることが分かりました。6ではJavaScriptでもクラス構文が使えるようになったそうです。例文となるコードをGitHub(新しいタブで開く)にUPしていますので、6について詳しく解説していきましょう。

クラス定義

class Person {

}

見たまんまですね。クラス構文の宣言です。PHPを学習しているとしょっちゅう出くわします。

コンストラクタによる初期化

constructor (name) {
　　this.name = name;
}

Personクラスが呼び出されたびに、constructorメソッドでメンバ変数である、nameの初期化を行います。

プロトタイプのメソッド

get name() {
　　return this._name;
}

set name(value) {
  return this._name = value;
}

sayHello () {
  console.log("Hello! " + this.name);
}

プロトタイプのメソッドです。sayHelloメソッドの前に、アクセッサの記述を行います。メンバ変数の前にgetキーワードをつけるとゲッターになり、setキーワードをつけるとセッターとして認識されます。

インスタンスの生成

var person = new Person("Bob");
person.sayHello();

インスタンスを生成すると、”Hello! Bob”が返ってきます。同じくGitHubにUPしている5についても、実行するとやはり”Hello! Bob”が返ってきます。プロトタイプ継承を行うためには、5では”__proto__”を、6ではgetキーワードとsetキーワードを使って受け渡しをしているという感じがします。

自分の場合は、JavaScriptと並行してPHPも学習しているので、あまり違和感は感じませんでした。ただしばらくの間は、5と6のいずれの書き方も覚えておく必要があるように思います。

【参考サイト】