3日目 => デザインパターン（コンストラクタパターン）

はじめに

今日はデザインパターン。

コンストラクタパターン

オブジェクトコンストラクタ

特定の型のオブジェクトを作成するために使用

var obj = {};

var obj = new Object();

オブジェクトにキーと値を割り当て

var obj = {};

// ドット構文
obj.name = "SAMPLE";


// 角括弧構文
obj["age"] = 16;


// definePropertyの利用
var obj2 = {};
Object.defineProperty(obj2, "mother", {
  value: "お母さん",
  writable: true, // 値が変更可能かどうか
  enumerable: true, // 指定されたプロパティが列挙可能かどうか
  configurable: true // falseだとdeleteできない・再定義不可
});

for(var key in obj2){
  console.log(key);
}
// enumrableがtrueだと'mother'が出力される


// definePropertiesの利用
var obj4 = {};
Object.defineProperties(obj4, {
  sister: {
    value: "妹",
    writable: true
  },
  brother: {
    value: "兄",
    writable: true
  }
});

JavaScriptには基本的にクラスというものがないけど、
コンストラクタ関数を用いることで似たようなことができる、と。

// コンストラクタ関数
function CreateHuman(name, age){
  this.name = name;
  this.age = age;
  this.introduction = function(){
    console.log("私は" + this.name + "。年齢は" + this.age + "歳です。");
  }
}

var hanako = new CreateHuman("花子", 16);
hanako.introduction();

// プロトタイプを利用
CreateHuman.prototype.toString = function(){
  return console.log("私は" + this.name + "。年齢は" + this.age + "歳です。");
}

var taro = new CreateHuman("太郎", 18);
var jiro = new CreateHuman("次郎", 15);

taro.toString();
jiro.toString();
/*
私は太郎。年齢は18歳です。
私は次郎。年齢は15歳です。
*/

おわりに

definePropertyは知らなかった。こんなのもあるのかー。

参考

• Object.defineProperty()
• JavaScriptデザインパターン