JavaScript クラスのサンプル

JavaScriptのクラスのサンプルです。

クラス
クラスのサンプル
ゲッターとセッター
コンストラクタ
静的メソッド

クラス

ECMAScript 2015 (ES 6)で追加されました。
すでにあるプロトタイプベースのシンタックスシュガー(わかりやすく書き換えた)です。
以下はMDNのクラスのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

クラスからオブジェクト(インスタンス)を生成するイメージ

クラスからオブジェクト(インスタンス)を生成するイメージです。
例えると、クラスは型枠でオブジェクトは実体です。
new演算子を使用してオブジェクト(インスタンス)を生成します。インスタンス化といいます。

クラスのサンプル

クラスのサンプルです。

<script>

class Color{
	setName(n){
		this.name = n;
	}
	getName(){
		return this.name;
	}
}

let a = new Color();
let b = new Color();
let c = new Color();

a.setName("赤");
b.setName("黄");
c.setName("青");

console.log(a.getName()); //赤
console.log(b.getName()); //黄
console.log(c.getName()); //青
</script>

3～10行目までがColorというクラスです。
4,7行目は、クラスのメソッドです。
8行目のreturnは、値を返します。返される値を返り値または戻り値と呼びます。
12～14行目は、インスタンスを生成しています。
16～18行目は、メソッドを実行して値をセットしています。
20～22行目は、メソッドを実行して値を取得しています。

クラスの定義の前にnewすることはできません。例えば12行目を2行目に持ってくるとエラーになります。

ゲッターとセッター

ゲッターとセッターのサンプルです。

<script>

class Color{
	set name(n){
		this._name = n;
	}
	get name(){
		return this._name;
	}
}

let a = new Color();

a.name = "赤";

console.log(a.name); //赤
</script>

4行目は、セッターです。setという語があります。
7行目は、ゲッターです。getという語があります。
14行目は、値をイコール(=)で代入しています。
16行目は、値を取得しています。

コンストラクタ

コンストラクタのサンプルです。

<script>

class Color{
	constructor(m,n){
		this.moji = m;
		this.name = n;
	}
}

let a = new Color("色は","赤");

console.log(a.moji); //色は
console.log(a.name); //赤
</script>

4行目は、コンストラクタ(constructor)です。クラス内に1つのみ定義できます。
10行目は、インスタンス生成時に値をセットしています。

静的メソッド

静的メソッドのサンプルです。

<script>

class Color{
	static getName(){
		return "赤です";
	}
}

console.log(Color.getName()); //赤です
</script>

4行目は、staticがついています。静的メソッドです。クラスメソッドとも呼びます。
9行目は、インスタンスを生成していませんが、クラスのメソッドを実行しています。