JavaScriptのオブジェクトに関するメモ（基礎）

JavaScriptの復習のアウトプットとして、メモ書きしていきます。
最下部に勉強に使用した書籍の紹介も行っています。

そもそも、オブジェクトとは

名前付きのプロパティ（値）の集合体を格納するためのコンテナ（入れ物）のことです。

自然言語の場合

自然言語でテーブルデータとして扱う場合で考えます。

Yamada

プロパティ名*	プロパティ値*
name	Yamada Taro
email	yamada@xxxxx.xxx
password	yamada_password

直感的ですよね。Yamadaという人のフルネームがYamada Taroで、メールアドレスは・・・ということがわかると思います。

ただ、このままの自然言語ではJavaScriptでは扱えないので、上記のテーブルをJavaScriptのオブジェクトに変換します。

JavaScriptの場合

// Yamada オブジェクトを生成
var yamada = new Object();

// yamadaオブジェクトにプロパティを格納
yamada.name = 'Yamada Taro';
yamada.email = 'yamada@xxxxx.xxx';
yamada.password = 'yamada_password';

いかがでしょうか。テーブルの状態と対比すると分かりやすいのではないでしょうか。
yamadaオブジェクトは、メソッド（操作）を使わなければただのデータベースですので、次はオブジェクトを使用するための「メソッド」について記述していきます。

なお、開眼!JavaScriptに書いてある下記の言葉がとてもためになりました。

オブジェクトとは、名前と値を持つプロパティを格納するコンテナにすぎない。

メソッドについて

早速、先ほどの自然言語で作成したテーブルにメソッドに相当する部分を追加してみます。
Yamada

プロパティ名	プロパティ値
name	Yamada Taro
email	yamada@xxxxx.xxx
password	yamada_password
getName	nameの値を返す

次に、JavaScriptの場合

// Yamada オブジェクトを生成
var yamada = new Object();

// yamadaオブジェクトにプロパティを格納
yamada.name = 'Yamada Taro';
yamada.email = 'yamada@xxxxx.xxx';
yamada.password = 'yamada_password';
yamada.getName = function() {
  return yamada.name;
};

yamadaオブジェクトのプロパティとして設定したgetNameメソッドは、yamada.nameというプロパティの値を返します。こういったメソッドがないと、オブジェクトは静的なデータを格納するに留まってしまいます。

本来は関数として定義して、yamadaオブジェクトをインスタンス化して使うのですが、この記事ではそこまでは踏み込みません。上記だと、yamada以外の人を追加する場合、毎回xxxx.name = ....といった記述をしなければなりません。
参考までに、ソースを下記に記述します。

var Person = function(name, email, password) {
  this.name = name;
  this.email = email;
  this.password = password;
  this.getName = function() {
    return this.name;
  }
};

var yamada = new Person('Yamada Taro', 'yamada@xxxxx.xxx, 'yamada_password');

このようにすることで、新しい人を追加する場合は

var yamada = new Person('Yamada Taro', 'yamada@xxxxx.xxx, 'yamada_password');

このコードのみコピペしてきます。

メソッドについて、もう少し分かりやすく書いてみます。

プロパティ	メソッド
(状態や特性)	(操作する道具)
姓、名	姓名をくっつける
性別	性別を出力

こちらの方がより直感的に理解出来るかもしれません。
余力があれば、上記のオブジェクトをJavaScriptで書いてみてください。

var Userinfo = function(name1, name2, sex) {
  this.name1 = name1;
  this.name2 = name2;
  this.sex= sex;

  this.name = function() {
    return this.name1 + this.name2;
  }
  this.sex = function() {
    return this.sex;
  }
}

今回はここまでにします。
次回はコンストラクタやインスタンスに関することを書いてみようと思います。

参考書籍（一部文言を引用させていただいております。）

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質