javascriptの基本(オブジェクトの正体)

たまにはプログラムネタも書かないと。
最近やっとまじめにjavascriptを勉強しはじめました。で、javascriptの基本的な仕組みがやっと分かった。キーポイントは「連想配列」。いわゆるハッシュってやつ。

  var sampleHash = {};
  sampleHash['japan'] = '日本';
  sampleHash['america'] = 'アメリカ';

  alert(sampleHash['japan']);

「japan」というキーに「日本」という値がひもづいているので、最後のalert文を実行すれば「日本」と表示されます。
上と同様のことを、下記のような書き方も出来ます。alert文の実行結果は「中国」です。

  sampleHash.china = '中国';
  alert(sampleHash['china']);

さらにさらに、こんな風に一行で書くことも出来ます。

  var sampleHash = {'japan' : '日本', 'america' : 'アメリカ', 'china' : '中国'};

一方、関数です。

  var sayName = function(name) {
    alert(name);
  };

  sayName('mtoyoshi');

この関数にもさっきの「中国」の例のようなことが出来ます。

  sayName.aaa = 'bbb';
  alert(sayName.aaa);

これが「プロパティ」ってやつ。

で、このプロパティを使うと、オブジェクト指向っぽくできるぞ、と。

  var MTOYOSHI = {
    name : 'mtoyoshi',
    weight : 60,
    sayMyself : function () {
      alert('私の名前は' + this.name + 'です。体重は ' + this.weight + 'kgです。');
    }
  };

  MTOYOSHI.sayMyself();

「name」と「weight」は最初のsampleHashと同じ。「sayMyself」もキーと値をひも付けているだけ。で、その値が関数だった、というだけ。関数も変数に割り当てられるところから、文字や数字と同じように扱えるようだ。

極めつけはこれ、配列。正確にはjavascriptには配列っぽく見えるものはあるけれども、配列はないんだ。やっぱり連想配列なんだ。

  var array = [1,2,3,4,5];
  
  alert(array[0]);
  alert(array['1']); 

2つ目のalertを実行すると何が返るか。ちゃんと「2」が返るんです。一瞬エラーじゃないの？と思ってたんですが、ちゃんと返るんです。そのなぞを解く鍵も連想配列。通常配列の添え字と呼ばれるものはjavascriptではあくまで連想配列のキーなんだな。

つまり、

  alert(1 == '1');

この結果が「true」であるから「array[1]」でも「array['1']」でも「2」が返るんですねぇ。

javascriptって連想配列のお化けだったのねー。関数の取り扱いには慣れがいるかもしれないけど、大分分かってきたぞ♪

おまけ

さきほどのMTOYOSHIの例をいわゆるクラスとインスタンスの関係のようにしようとすると、次のようにします。有名な「prototype」ですね。

  var Human = function(name, weight) {
    this.name = name;
    this.weight = weight;
  };

  Human.prototype.sayMyself = function() {
    alert('私の名前は' + this.name + 'です。体重は ' + this.weight + 'kgです。');
  };

  var mtoyoshi = new Human('mtoyoshi', 60);
  mtoyoshi.sayMyself();

こうすれば、newした後のオブジェクトでsayMyselfを上書きしても、別のnewされたオブジェクトは影響を受けない。

なお、勉強に使っているのはこの本です。分かりやすくていいですねぇ。

まるごとJavaScript & Ajax ! Vol.1