職案人

ユーザ定義オブジェクトの作成方法

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

■オリジナルのコンストラクタを定義するには
今まで、オブジェクトのインスタンスを生成するときは、コンストラクタを使ってきた。
注意）
Javascriptのコンストラクタは、オブジェクト名と同じ名前の関数。ただし、普通の関数とは異なり、return文で値を戻す事はしない。

コンストラクタの主な役割は、自分自身を表すthisを使って、「this.プパティ名＝引数」という形式でプパティを設定する。
また、プパティに関数を代入すれば、メソッドを定義することも出来る。
new演算子とコントラクトを利用してインスタンスを生成すると、プロパティにアクセスしたり、メソッドを実行したりできます。


1）コンストラクタを用意する
リテラル形式の用意されてないオブジェクトの場合→インスタンスの生成は、new演算子とコンストラクタを使用して行う。

例文
var now = new Date();

2)コンストラクタ用の関数の仕組み
ユーザ定義オブジェクトを定義する場合→インスタンスを生成して初期化を行う為のオリジナルのコンストラクタを用意する必要があります。

コンストラクタの内部では、必要に応じてプロパティ（インスタンス変数）を設定する。初期化が必要なプロパティをコンストラクタの引数に渡し、内部で、次のようにプロパティに代入します。

書式
this.プロパティ名 = 引数；

■Customerコンストラクタを定義してみる。
＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
＜/head＞

＜body＞

＜script＞
// コンストラクタ
function Customer(num, name){
// プロパティ
this.number = num;
this.name = name;
}
//インスタンスc1の生成
var c1 = new Customer(1, "桜田一郎");
//コンソール表示
console.log(c1.number + ": ", c1.name);
//インスタンスc2の生成
var c2 = new Customer(2, "山田花子");
//numberプロパティを変更
c2["number"] = 3;
//コンソール表示
console.log(c2["number"] + ": ", c2["name"]);
＜/script＞

＜/body＞
＜/html＞
※プロパティのアクセスには二通りある。
c2["number"] = 3;or c2.number = 3;
■表示結果


コンストラクタを使ってメソッドを追加する
・プログラムリスト
＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
＜/head＞

＜body＞
＜script＞
　function Customer(num, name) {
　// プロパティ
　this.number = num;
　this.name = name;

　// メソッド関数
　this.showInfo = function(){
　console.log("番号:", this.number,
　　"　名前:", this.name);
　};
}

　var c1 = new Customer(1, "桜田一郎");←インスタンス
　c1.showInfo();←メソッド

　var c2 = new Customer(2, "山田花子");←インスタンス
　c2.showInfo();←メソッド
＜/script＞
＜/body＞

＜/html＞
実行


・弱点
インスタンスごとにプロパティやメソッドが用意されるため、メソッド関数のサイズが大きかったり、多数のインスタンスを生成したりする場合は、無駄が多くなる。

■プロパティやメソッドを動的に追加する
・プログラムリスト
＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
＜/head＞

＜body＞
＜script＞
function Customer(num, name) {
// プロパティ
this.number = num;
this.name = name;

// メソッド
this.showInfo = function () {
　console.log("番号:", this.number,
　"　名前:", this.name);
　};
}

var c1 = new Customer(1, "桜田一郎");
　// プロパティを追加
　c1.age = 25;
　// メソッドを追加
　c1.showAge = function () {
console.log(this.name + "は" + this.age + "才です");
　　};

　// 追加したメソッドを呼び出す
　c1.showAge();

　var c2 = new Customer(2, "山田花子");
　// c2.showAge();//を外すとエラーに成る
＜/script＞
＜/body＞

＜/html＞
・実行