JavaScript【 オブジェクト 】 ~ すべてがオブジェクト

colmun_main6474

JavaScriptは、JavaやC++などと同様、オブジェクト指向のプログラミング言語です。
オブジェクトは、モノを意味する言葉です。
今回は、オブジェクト指向という概念については触れませんが、そのキーワードとなるオブジェクトについて紹介したいと思います。

目次

 1.オブジェクトとは
 2.オブジェクトの使い方
 3.オブジェクトの定義を取得する方法

1.オブジェクトとは

JavaScript のオブジェクトとは、変数や関数に止まらず、数値や文字列などに至るまで様々なモノを指し、「すべてはオブジェクトである」とまで言われています。

次のような処理を考えてみて下さい。

document.fomr1.txt1.focus();

これは、form1 という名前のフォームの txt1 という名前のフォーム要素にフォーカスを当てる、という処理です。
document と form1 と txt1 と focus() がドット(.)で結ばれています。

focus() は、メソッド(JavaScript の定義済み関数)の1つですが、document と form1 と txt1 はオブジェクトです。

document は、JavaScript で予め定義されているオブジェクト名ですが、form1 と txt1 はユーザーがタグの name 属性で付けた名前です。

<form name="form1">
    <input type="text" name="txt1">
</form>

 
このように、オブジェクトには自由に名前を付けることが出来ます。

タグの name 属性で名前を付ける方法や id 属性で名前を付ける方法の他、変数にオブジェクトを代入して名前を付ける場合もあります。

var pText = document.form1.txt1;
pText.focus();

 
また、次の例を見て下さい。

var val1 = document.form1.txt1.value;

これは、form1 という名前のフォームの txt1 という名前のフォーム要素の値を 変数 val1 に代入する、という意味です。

この value は、JavaScript の定義済みプロパティの1つです。

メソッドやプロパティがオブジェクトから派生している、というのがイメージできたでしょうか。

メソッドは、ある処理を実行するための定義済み関数で、プロパティは、データの値が入る入れ物のようなものです。
メソッドは、最後に ( ) が付くので、区別しやすいと思います。
そして、ドット(.)をはさむ毎に、左から右へと派生していきます。

alert() メソッドや status プロパティのように、単独で使われる事が多いメソッドやプロパティも、実際は、その上にオブジェクトがあって、そのオブジェクト名が省略されています。
(window オブジェクトが省略されることが多いです。)

また、document.form1.txt1.value のように、オブジェクトが他のオブジェクトの下にある(派生関係にある)こともわかります。
まず文書(document)があって、その中にフォームがあり、更にその中にフォーム要素があり、フォーム要素が更にメソッドやプロパティを持っている、という派生関係になっています。

このように、JavaScript では、大元のオブジェクトから従属的なオブジェクトが派生し、 そこから別のオブジェクトが派生し、それがメソッドやプロパティを持つ、という階層構造を持っています。
といっても、最下位のオブジェクトだけがメソッドやプロパティを持っているわけではなく、大元のオブジェクトも含めて、各階層のオブジェクトが、それぞれにメソッドやプロパティを持っています。

オブジェクトが人、メソッドやプロパティが所有物、とイメージするとわかりやすいです。
この場合、オブジェクトの派生関係は親子関係に置き換えてイメージします。
親の下に子、子の下に孫...と、下に行くほど数が多くなり、それぞれの人が所有物を持っている、というイメージです。

colmun_image6474_01

▲目次へ戻る

2.オブジェクトの使い方

JavaScript には沢山のオブジェクトがあり、各々メソッドやプロパティを持っていますが、オブジェクトによって、使用方法に違いがあります。

●そのままで使用する(document、 window、文字列オブジェクトなど)
●オブジェクトの生成を宣言した上で使用する(日付オブジェクト、イメージオブジェクトなど)
●イベントとの関連付けを定義した上で使用する(event オブジェクトなど)

そして、関数と同じように、オブジェクトもユーザーが自由に作ることが出来ます。

オブジェクトは、次の手順で作成します。

(1)ユーザー定義関数を作り、その中でプロパティやメソッドを定義する

function Hello() {
    // プロパティを定義
    this.str1 = "Hello ";
    this.str2 = "Everyone!";

    // メソッドを定義する
    this.func = function() {
        alert(this.str1 + this.str2);
    }
}

 
(2)作成した関数を、オブジェクトとして生成する

hello = new Hello();

 
(3)作成したオブジェクトを使用する

<form>
    <input type="button" value="あいさつ" onClick="hello.func( )">
</form>

▲目次へ戻る

3.オブジェクトの定義を取得する方法

 
あるオブジェクトの定義内容を知りたい場合、次の方法で一覧表示させることが出来ます。

for ( i in オブジェクト名 ) document.write ( i + “= ” + オブジェクト名[ i ] );

例えば、documentオブジェクトの定義内容を取得したい場合は、次のような記述をします。

for (i in document) document.write (i + "= " + document[ i ]);

オブジェクトの定義内容は、ブラウザやそのバージョンによって多少異なります。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です