コアJavaScript(ECMAScript)の図書室 34冊目【JavaScript】[ECMAScript] プロパティ

トップページ
特集PC技術
コアJavaScript(ECMAScript)の図書室
34冊目【JavaScript】[ECMAScript] プロパティ

コアJavaScript(ECMAScript)の図書室

34冊目【JavaScript】[ECMAScript] プロパティ

クラスにはデータという値を設定することができます。
ここではプロパティに関しての説明を行います。

[1] プロパティ

プロパティはクラスが持つデータのことです。
Javaでいうとメンバ変数に該当します。
JavaScriptは柔軟な言語なためプロパティの設定方法がいろいろあります。

[2] プロパティを使ってみよう

クラスの構成の１つであるプロパティを設定してみます。
ここでは一般的に使用される方法をまず解説をします。
プロパティはコンストラクタ内にthisキーワードを使用して定義します。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

// インスタンスを生成
var hopsii = new Human("ほぷしぃ");
document.writeln(hopsii.name);

// オブジェクトを生成
var pcsp = { name:"PC特集技術" };
document.writeln(pcsp.name);

Humanコンストラクタに引数として渡し、プロパティを初期化します。
さて、インスタンスプロパティにアクセスですが、オブジェクトに格納されているデータと同じです。
コンストラクタにthisキーワードを使用して定義するプロパティは全てのクラスで持ちたいデータを定義しましょう。

[3] クラスプロパティ(静的プロパティ)

クラスプロパティは、クラス自体が持つプロパティです。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

// クラスプロパティを設定
Human.age = 20;

// インスタンスを生成
var hopsii = new Human("ほぷしぃ");
document.writeln(hopsii.name);	// ほぷしぃ
document.writeln(hopsii.age);	// undefined
document.writeln(Human.age);	// 20

クラスプロパティはあくまでクラスが持つのでインスタンスプロパティには反映されませんので注意しましょう

[4] プロトタイププロパティ

ここがプロパティにおけるとても重要な概念の１つになります。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

// プロトタイププロパティを設定
Human.prototype.age = 20;

// インスタンスを生成
var hopsii = new Human("ほぷしぃ");
document.writeln(hopsii.name);	// ほぷしぃ
document.writeln(hopsii.age);	// 20

var pcsp = new Human("PC特集技術");
document.writeln(pcsp.name);	// PC特集技術
document.writeln(pcsp.age);		// 20

プロトタイププロパティを使うと全てのインスタンスは反映されるがわかります。
クラスにおいて定数を使いたい場合にはこのプロトタイププロパティを使うといいでしょう。
プロトタイプはJavaScriptにおいて重要な働きを持つ機能なので別の機会で詳しく説明します。

[5] プロパティの使用時の注意点

JavaScriptにおいてプロパティが１点だけ気をつけるべきことがありますので説明をします。
それはインスタンス生成後にプロパティが追加できる機能です。
こういう機能が一般的なクラスと違ういわれている理由かもしれません。
プロトタイプの例を先ほど説明しましたが、もし使わなかったときどうなるのか見てみます。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

// インスタンスを生成
var hopsii = new Human("ほぷしぃ");

// インスタンス生成後にプロパティを追加する
hopsii.age = 20;
document.writeln(hopsii.name);
document.writeln(hopsii.age);

// インスタンスを生成
var pcsp = new Human("PC特集技術");
document.writeln(pcsp.name);

// このインスタンス用にプロパティを追加しないといけない
document.writeln(pcsp.age);
pcsp.age = 30;
document.writeln(pcsp.age);

ただし、この方法をとるとインスタンスごとにプロパティを設定しなくてはなりません。
プロトタイプとの明らかな違いがわかると思います。