はじめに

[JavaScript]経験がまだまだ未熟者ですが、頑張ります！
さて、今回はオブジェクトについて触れていきたいと思います。

そもそもオブジェクトって？

＊知っている方は読み飛ばしてしまって構いません。
現実のもので表すならば、学校のロッカーのようなものです。
小学校の時のロッカーを思い出してください。
１つ１つのロッカーには別々の人の物が入っていますよね。
その、色々(教科書とかリコーダーとか)入るロッカーこそがオブジェクトです。
それらをまとめると、
1つの変数（ロッカー）の中に複数（教科書やリコーダー）の値を代入することができるもの
という事になります。
ロッカーが無かったって？ググってください。

オブジェクトの宣言

ex1.js

// ロッカー[オブジェクト]を作る
var locker = new Object();

// ロッカーの持ち主の名前を格納
locker.name = "たかし君";

// たかし君のロッカーにさゆみちゃんのリコーダーを入れる
locker.recorder = "さゆみちゃんのリコーダー";

// 中身を確認
console.log(locker.name + "のロッカーの中には" + locker.recorder + "が入っていた。");

/* 「出力結果」
たかし君のロッカーの中にはさゆみちゃんのリコーダーが入っていた。
/**/

この様にロッカーみたいに扱う事が出来ます。とても便利です。

ここで[this]を覚えよう

[JavaScript]には[this]というものが使えます。
早速、コードを書いてみます。

ex2.js

// ロッカー[オブジェクト]を作る
var locker = new Object();

// ロッカーの持ち主の名前を格納
locker.name = "たかし君";

// たかし君のロッカーにさゆみちゃんのリコーダーを入れる
locker.recorder = "さゆみちゃんのリコーダー";

// 中身を確認
locker.check = function(){
   console.log(this.name + "のロッカーの中には" + this.recorder + "が入っていた。");
}

// 中身を出力
locker.check();

[this.name]?、[this.recorder]?、なんだそれ？ってなってると思います。いわば、


this.name = たかし君
this.recorder = さゆみちゃんのリコーダー

を表しています。つまり、this = ロッカー ということがわかりますね。

オブジェクト指向について

（これは初心者がいきなり覚えるものでもありません・・・。）
オブジェクト指向ってなんですか？という方もいると思いますが、説明したいと思います。
先程、書きました[たかし君のロッカーのソースコード]ですが、あまりよろしくありません。
例えば、他の人のロッカーも作るとしましょう。

ex3.js


var locker = new Object();
var locker2 = new Object(); // ２つ目のロッカーを作る

locker.name = "たかし君";
locker2.name = "さゆみちゃん";

locker.recorder = "さゆみちゃんのリコーダー";
locker2.note = "日記";

// 出力
console.log(locker.name + "のロッカーの中には" + locker.recorder + "が入っていた。");
console.log(locker2.name + "のロッカーの中には" + locker2.note + "が入っていた。");

これを見てなんだか思った事はありませんか？
同じ事に近い事をまた作っていると思いませんか・・・？
この様に、新しいロッカーを作ると汎用性がなく、同じ変数をまた作らなくてはなりません。
これは効率が悪い上、面倒ですね。
それを効率よく、且つ汎用性のあるプログラムにしなくてはいけない。要するに、
汎用性のある小さいプログラムを組み合わせて作り上げていく。
これこそがオブジェクト指向なんです！

お試しオブジェクト指向

まずは先程のソースコードを同じ種類のオブジェクトをまとめて１つに統一したいと思います。
まずは、ロッカーの関数を作ります。
（今からやることは他言語で言う、「クラス」みたいなものです）


// ロッカー
function Locker(){}

これでロッカーが作れる状態にはなりました。
これをどう使っていくかと言いますと、[new演算子]という物を使っていきます。

// たかし君のロッカーを生成
var takashiLocker = new Locker();

こうするとロッカーを生成できますが、これではまだまだ機能が足りません。
では、もっとクラスを利用した作りにしていこうと思います。
まず最初に、コンストラクタという物を利用していきたいと思います。

コンストラクタって？

コンストラクタとは、型となる関数のことです。つまり、このプログラムにあたるロッカーの事です。
実は、[new演算子]を使って生成した時、関数は呼ばれています。

function Locker(){
    console.log("コンストラクタ");
}

という形にするとわかりやすくなると思います。
しかしこれをどうやって使うの？っていう人もいるかと思いますが・・・。
ここで、先程書いた[this]を使って機能を追加していきます。

ex5.js

// ロッカークラス
function Locker(){
    // 誰のロッカーか出力
    this.whoseLocker(){
        console.log(this.name + "のロッカーです。");
    }
}

// それぞれのロッカーを生成
var takashiLocker = new Locker(); // たかし君
var sayumiLocker = new Locker();  // さゆみちゃん

// それぞれのロッカーに名前をつける
takashiLocker.name = "たかし君";
sayumiLocker.name = "さゆみちゃん";

// 誰のロッカーか出力
takashiLocker.whoseLocker(); 
sayumiLocker.whoseLocker(); 

/* [出力結果]
たかし君のロッカーです。
さゆみちゃんのロッカーです。
/**/

コンストラクタはロッカーを作る際に毎回呼ばれるので、
２人のロッカーは[whoseLocker]メソッドを持っている事になります。
（コンストラクタから作られた個々のオブジェクトをインスタンスと言います）

しかし、まだ[name]の部分が後付けみたいになっていますね。
ここをちゃちゃっと修正してみましょう。
コンストラクタの引数を使う事で、すっきりさせる事が出来ます。

ex6.js

// ロッカークラス
function Locker(name){
    // 名前を入れる
    this.name = name;

    // 誰のロッカーか出力
    this.whoseLocker(){
        console.log(this.name + "のロッカーです。");
    }
}

// それぞれのロッカーを生成
var takashiLocker = new Locker("たかし君");     // たかし君
var sayumiLocker = new Locker("さゆみちゃん");  // さゆみちゃん

// 誰のロッカーか出力
takashiLocker.whoseLocker(); 
sayumiLocker.whoseLocker(); 

/* [出力結果]
たかし君のロッカーです。
さゆみちゃんのロッカーです。
/**/

これで少しはよくなりました。
コンストラクタの１行目で、引数に渡した名前をそのまま[name]に代入しています。
これで、個々のロッカーを作るのは[new演算子]1行だけになります。

終わりに

オブジェクト指向を熟知しようと思うととても先が長そうですが、気長にやっていけたらと思います。
しかし、これはまだまだオブジェクト指向とは言い切れないので、これの続きをまた書きます。
私と同じ初心者の方々の力になれればと思います。

JavaScript 入門メモ [オブジェクト編]