お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

共通部品なのね。

つまづき第二弾オブジェクトです。

使いまわすのって楽チンだと思いますよ。

あ、いや、オブジェクトってやったよ?(この人バカなのかしら)と思われているかもですが
前回のオブジェクトはあくまでも【データ保持】のお話でした。
データのみならず、処理までぶち込むことができるのです。

処理をブチ込む?

どういう事なんだよ。って事なんですが。


----------------------------------------------ptn1
var obj = {}; // オブジェクトとして使う魔法の言葉

obj['data1'] = 'Yes bob';
obj['view'] = function ()
{
 // ここでのthisは obj というオブジェクト内の事を示します。
 alert(this.data1);
};

// 関数実行
obj['view']();

----------------------------------------------ptn2

var obj2 = {};
obj2.data1 = 'そんな装備で大丈夫か?';
obj2.view = function ()
{
 // ここでのthisは obj というオブジェクト内の事を示します。
 alert(this.data1);
};

// 関数実行
obj2.view();

と言うわけで、簡単なものを書いてみました。
ちゃんと動きますよ。両方とも。
2パターンあって、何が違うかと言うと、【オブジェクトのキーへの参照方法】の違いです。
配列の時に、[]の書き方だけを行ったのは、ややこしくなりそうだったからなのです。
【オブジェクト名】[【キー名】]の指定方法
【オブジェクト名】.【キー名】の指定方法の2つがあるのは覚えておいて損はないです。

ではptn2を1行ずつ解説

var obj2 = {};

ここでは、変数を【オブジェクト化】しています。
これがないとただの変数として扱われるので、以後動作しません。
配列の初期化と一緒ですね。

obj2.data1 = 'そんな装備で大丈夫か?';

objの中の、data1というキーの所に、文字列を入れています。
ただの代入です。

obj2.view = function dataView() ~(略)~ };

functionという始まり方をしていますね。
こいつは関数だ!!!!
しかし、学習した内容では、functionの後に関数名が入るのよ。となっていました…
だめだ、この教材はできそこないだ。
これは【無名関数】といって、名前がない関数というものなのです。
何故名前がないかと申しますと、viewというキーの所にこの関数を入れる事によって
viewという名前で呼び出す事ができるため、名前が不要なんです。

obj2.view();

と、いうわけで呼び出しです。
しかし、最後に()とかついていますね。でもこのカッコがあることによって
『これは関数だから動かして』って事になるのです。
だから、viewの中にある関数が実行されるのですね。ステキ
ちなみに、関数に名前をつけてしまっても特に問題はありません。

----------------------------------------------関数名をつけても大丈夫
var obj2 = {};
obj2.data1 = '大丈夫だ。問題ない';
obj2.view = function hogehoge()
{
 // ここでのthisは obj というオブジェクト内の事を示します。
 alert(this.data1);
};
// 関数実行
obj2.view();

alert(this.data1);

なんか変じゃないか?これ。
【this】ってなんだよ。【this】って。コレってなんだよ!!!!
って思ってた時期がありました。
プログラムの世界において【this】は良く使われるものです。
JSに限って言っても、色々な所で【this】は使われています。
今後もたくさん出てくると思います。
簡単に言うと【自分自身を参照】みたいな感じでしょうか。

何言ってだこいつ。って感じしますね。
まぁ、【実行しようとしている関数が所属しているオブジェクトを参照する】これが今回のthisです。
難しいですね・・・ここはまた後程にしましょう。

ひとまずのまとめ

オブジェクトについての話は色々あるのですが、ここではあえて触れないようにしておきます。
現時点ではおまけ程度の知識として箸休めの所に置いておきますので、見たい人だけみればよいと思いました!

オブジェクトってのは、【複数の処理と共通変数または配列をひとつにまとめて完結できるようにしたもの】
といった所でしょうか。
何が何でもオブジェクトに入れてアレコレするのもイイとは思いますが。
簡単な処理はfunction単体でまとめてするのも良いと思います。
凄く複雑な事をする場合は、オブジェクトでまとめてやったほうが楽なときもあります。