2019.12.30 [月] JavaScriptのclassについて、書いてみた。
トライデントコンピュータ専門学校も冬休みです。
もういくつ寝ると、2020年です。この「ウェブDeBlog」も12年目となります。
長い間、ブログを書いていくと「続きを書きます」と書いては、いつかいつかと思いながら書けてない記事もたくさんあります。
その中のひとつ「そうだ、ECMAScript6（ES2015）でいこう」の続きも書いてなかったので、冬休みの期間を活かしてclassについて書きたいと思います。
さて、多くのオブジェクト指向言語では、クラスという仕組みがあります。 JavaScriptでは、ECMAScript2015から、クラス構文が使えるようになりました。
ただし、このクラスは以前からあったプロトタイプベースの継承の糖衣構文です。
ECMAScript2015で導入されたJavaScriptクラスは、JavaScriptにすでにあるプロトタイプベース継承の糖衣構文です。クラス構文は、新しいオブジェクト指向継承モデルをJavaScriptに導入しているわけではありません。
クラスとはオブジェクトを作る際のデータやメソッドを定義してあり、いわばオブジェクトの設計図です。
オブジェクトを作る時には、クラス（型）を指定することで、指定したクラスに定義されたデータとメソッドを備えたテンプレートのインスタンス（コピー）となります。
上の図でいうと、Carというクラスを基にしたobject Car1, object Car2, object Car3のそれぞれがCarのインスタンスとなります。
ちなみに、Chromeをはじめ、Firefox, Safari, Edgeなどモダンブラウザでは対応済みです。
IE11では、他のES2015の新しい仕様と同様、利用できません。
参考：ECMAScript 6 compatibility table
目次
- classの宣言
- インスタンス
- constructor（コンストラクタ）
- インスタンスメソッド
- staticメソッド（静的メソッド）
- 継承
- super
- オーバーライド
- getterとsetter
classの定義
クラスの定義には、クラス式とクラス宣言という2つの定義方法があります。
クラス宣言文
クラス宣言はclassキーワードを使って定義します。
また、クラスは関数と違い巻き上げがされないので、クラス利用する前に、そのクラスを宣言する必要があります。
class クラス名 {
変数や処理を記述する
}
クラス式
クラスを定義する別の方法はクラス式です。クラス式は、クラス名ありでもクラス名なしでもできます。
//クラス名あり
const 定数名 = class クラス名 {};
//クラス名ありの場合、クラスのnameプロパティによって取得可能
console.log(定数名.name) //⇒クラス名
//クラス名なし
const 定数名 = class {};
インスタンス
new演算子を使用してオブジェクト（インスタンス）を生成します。この事をインスタンス化といいます。
class Car{
}
//class宣言文で定義したCarをインスタンス化
const taxi = new Car();
//class Carは使い回せる
const myCar = new Car();
const dammyCar = "car";
//instanceofという演算子で、そのクラスのインスタンスかどうかを判定できます。
console.log( taxi instanceof Car );
console.log( dammyCar instanceof Car );
- true
- false
また、インスタンス同士は、同じクラスから生成されても違うオブジェクトとして扱われます。
console.log( taxi === myCar);
- false
constructor（コンストラクタ）
コンストラクター は、classによって生成される時（newの時）オブジェクトの生成・初期化を行う特別なメソッドです。
"constructor"という名前のメソッドは、クラスに1つしか定義できません。
class Car {
//コンストラクタ関数の仮引数としてmakeとmodelを定義
constructor(make, model) {
//コンストラクタ関数におけるthisはインスタンスを示すオブジェクト
//インスタンスのmakeとmodelプロパティにそれぞれ値を設定する
//クラス内の変数ということでメンバー変数と呼ばれます
this.make = make; //メーカー名
this.model = model; //モデル名
}
}
//new演算子でインスタンスを作成してコンストラクタの仮引数に引数を渡す
const myCar = new Car("Tesla", "Model S");
console.log(myCar.make);
console.log(myCar.model);
- Tesla
- Model S
