備忘録的プログラミングリファレンス

オブジェクト(クラスとインスタンス)

 JavaScriptにおけるクラス定義とそのインスタンスの生成についてです。JavaScriptではHTMLエレメントのタグエレメントがオブジェクト(DOM)と扱われています。これを理解し活用するとよいでしょう。

 オブジェクトは、それ自身固有のデータ群と関数群を持つデータという抽象(イメージ)です。
 実際のプログラムでは、まずはオブジェクトデータの型(ひな形、設計図)を定義し、その型からオブジェクトデータを宣言します。 オブジェクトデータの型を定義することをクラスの定義といい、オブジェクトデータの型、クラスからオブジェクトデータを宣言(メモリを確保する)ことをインスタンスを生成、作成するといいます。
 クラスでのデータ定義はコンストラクター(constructor)、関数はメソッド(method)と呼びます。

class Class_City {
	constructor( name, population ) {	// constructorの定義方法
		this.name = name;
		this.population = population;
	}

	get Name() {			// methodの定義方法
		return this.name;
	}

	example_Method() {			// methodの定義方法
		...
		return this.name;
	}
}
...
var city_tok = new Class_City('tokyo', 927.3); // インスタンスの生成

 インスタンスではプロパティ( property)とメソッド(method)と呼びます。クラスでのデータ群と、インスタンスでのデータ群の呼び名が違います。型としてか、メモリが確保されてデータ値を代入/取得できるかで呼び名が違うのです。

...
console.log(city_tok.name);			// cityオブジェクトのプロパティnameを出力
console.log(city_tok.population);	// cityオブジェクトのプロパティpopulationを出力

alert( city.Name() );	// インスタンスのmethodを実行しプロパティの値を表示。実行結果は'tokyo'

 プログラム上ではインスタンスを宣言することで、インスタンスが生成、作成されます。データ変数を宣言することでメモリを必要な分だけ確保されることを生成、作成するといっているようです。

...
var city_sun = new Class_City('San Francisco', 85.3); // インスタンスの生成

 HTMLのタグエレメントもオブジェクトであるので、独自にクラス定義から行わなくても、タグエレメントを利用すればよいケースが多々あります。継承を使うことや、複数のタグエレメントのハンドラーをもつ任意のクラス定義もあるでしょう。さらに、関数に関しても便利な関数が用意されている場合がありますので、それを利用するとよいでしょう。(DOMやビルトインオブジェクトなど)

var obj_p = document.getElementsByTagName('p');
alert( obj_p[0] );				// オブジェクトとして扱われている
alert( obj_p[0].innerHTML );	// タグエレメントのプロパティ

 インスタンス宣言には、var、let,constステートメントがあります。それぞれ機能が違いますので使い分けるとよいでしょう。

クラスの継承(extends)

 JavaScriptにおいてクラスの継承は、extendsステートメントを使います。

class Example_Class {
	constructor( prm01, prm02 ) {	// constructorの定義方法
		this.prm01 = prm01;
		this.prm02 = prm02;
	}

	get_prm01() {			// methodの定義方法
		return this.prm01;
	}
}

class Extends_Class extends Example_Class {
	get_CityName_Population(){
		alert( this.prm01 + "の人口は" + this.prm02 + "万人です。" );
	}
}
...
var city = new Extends_Class('tokyo', 927.3);
...
city.get_CityName_Population();		// 実行結果は'tokyoの人口は927.3万人です。'

super(コンストラクターの継承)

 extendsステートメントでクラスが継承できるのですが、コンストラクターはsuperステートメントを使って継承しないと上書きされてしまいます。
 そのために継承クラスでsuperを利用しないでコンストラクターを定義してしまうと、親クラスのパラメーターが参照できずにmethodなどが使えない場合が発生します。

class Example_Class {
	constructor( prm01, prm02 ) {	// constructorの定義方法
		this.prm01 = prm01;
		this.prm02 = prm02;
	}

	get_prm01() {			// methodの定義方法
		return this.prm01;
	}
}

class Extends_Class extends Example_Class {
	constructor(prm01, prm02, prm03) {
		super(prm01);
		super(prm02);
		this.prm03 = prm03;
	}

	get_CityName_Population(){
		alert( this.prm01 + "の人口は" + this.prm02 + "万人です。 );
	}
}
...
var city = new Extends_Class('tokyo', 927.3, 'red');
...
city.get_prm01();		// 実行結果は'tokyo'

getメソッドとsetメソッド

 JavaScriptにはあらかじめ、プロパティ値の取得と設定ができるメソッドが用意されています。
 プロパティ値を取得するgetステートメント、値を設定するsetステートメントがあります。

class Example_Class {
	constructor( prm01, prm02 ) {	
		this.prm01 = prm01;
		this.prm02 = prm02;
	}

	get Prm01() {			// getステートメント
		return this.prm01;
	}

	set Prm01( _val ){		// setステートメント
		this.prm01;
	}
}
...
var city = new Extends_Class('tokyo', 927.3);
...
city.Prm01('OSAKA');
city.Prm01();		// 実行結果は'OSAKA'

static(静的)メソッド

 staticステートメントは、メソッドをインスタンスの生成なしに利用することができます。JavaScriptでは、

class Example_Class {
	constructor( prm01, prm02 ) {	// constructorの定義方法
		this.prm01 = prm01;
		this.prm02 = prm02;
	}

	get_prm01() {			// methodの定義方法
		return this.prm01;
	}

	static get_hello(){
		return('hello! world');
	}
}
...

alert( Example_Class.get_hello() );	// 実行結果は'hello! world'