 |
|
| JavaScriptを洗練させるPrototype.js |
第１回：Prototype.jsを使う準備
著者：ガイアックス 天野 仁史 2007/2/22
|
|
|
| 前のページ 1 2
|
|
| JavaScriptの復習
|
Prototype.jsの機能の紹介をする前に、ある程度基礎的なJavaScriptの知識を紹介します。JavaScriptの基礎的な知識と言っても、「1＋1」からやる訳ではなく、Prototype.jsを使う上で特に意識をしなくてはならない、「オブジェクト」と「クラス」という2つの概念についての知識を紹介します。
|
| オブジェクト
|
JavaScriptのオブジェクトとはいったいどのようなものなのでしょうか。
|
| 空のオブジェクト
|
何事も一番シンプルな状態を知るということが重要です。JavaScriptのオブジェクトを理解するために、まず空のオブジェクトというものを理解しておきましょう。
リスト2では、空のオブジェクトを生成しています。
リスト2：空のオブジェクトを生成
var obj = {};
「たったこれだけ？」と思った人も多いと思いますが、まさにこの「{}」がJavaScriptのオブジェクトなのです。これは空のオブジェクトなので「{}」の中は空っぽですが、実際には中に「プロパティ」というものを定義します。JavaScriptのオブジェクトは、すべてこれが基本になっていて、この形式で書き表すことができます。
|
| プロパティ
|
JavaScriptのオブジェクトは、名前付きのデータ格納領域を持っています。これを「プロパティ」と呼びます。プロパティは、連想配列のキーと値のセットのようなものです。先ほど説明した空のオブジェクト「{}」の中身に、これを定義します。
リスト3の例を見てください。
リスト3：プロパティを定義
var amachang = {
name: '天野', // nameプロパティ
sayMyName: function() { // sayMyNameプロパティ
alert(this.name);
}
};
alert(amachang.name); // 天野と表示
amachang.sayMyName(); // 天野と表示
nameプロパティは'天野'というデータを、sayMyNameプロパティは関数というオブジェクトを格納しています。関数というオブジェクトを格納するというのには違和感に感じるかもしれませんが、JavaScriptでは関数はオブジェクトのように扱うことができるのです。次の「関数オブジェクト」の項で関数について詳しく解説します。
当然といえば当然ですが、プロパティにはオブジェクトを代入することも可能です。オブジェクトを格納したオブジェクトを使って階層化したデータを表現することもできます。
プロパティの値を見るときは、「.」（ドット）を使います。Javaを使っている人には、馴染みの記法ですね。
また、プロパティはオブジェクトを作ったあとでも追加や変更ができます。リスト4の例を見てください。
リスト4：プロパティを変更
// リスト3のamachangを使う
amachang.name = 'Amano';
alert(amachang.name); // Amanoと表示
amachang.sayMyName(); // Amanoと表示
amachang.hobby = 'Programming';
alert(amachang.hobby); // Programmingと表示
プロパティは、ただ単に値を代入することで変更できます。また、存在しないプロパティに値を代入すれば、新しくプロパティを生成することもできます。
まるでハッシュ（連想配列）のようだと思いませんか。そうです、JavaScriptのオブジェクトはすべてハッシュなのです。使いかたによって「ハッシュ」と言ったり「オブジェクト」と言ったりするとも言えます。また、さきほどからの例の「amachang.name」はハッシュ風に「amachang['name']」と書くこともできます。
ただ、本記事では曖昧さを解決するため、すべてオブジェクトと記述しています。
|
| 次回は
|
次回は「JavaScriptの復習」の続きとして「関数オブジェクト」「クラス」「空のクラス」「コンストラクタ」「プロトタイプ」についてみていきます。
|
前のページ 1 2
|
|
|
|
著者プロフィール
株式会社ガイアックス 天野 仁史
渋谷で働くWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い、IT戦士になることを決意。それからというもの、寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。
IT戦記
http://d.hatena.ne.jp/amachang/
|
|
|
|
|
|
