![]()
Javaスクリプトのオブジェクトモデル
オブジェクトとプロパティ
Javaスクリプトは非常にシンプルなオブジェクト・オリエンテッド・パラダイムをベースとした言語です。オブジェクトはJavaスクリプト変数であるプロパティから組み立てられており、プロパティがオブジェクトであっても構いません。
もし、プロパティを使用する場合は次のようにアクセスします。
オブジェクト名、プロパティ名ともに大文字、小文字の区別があり、プロパティを定義するのに宣言のようなものは必要なく、値を与えることで定義されます。たとえば、myCarというオブジェクト名で、プロパティへmake、model、yearを定義する場合は以下のとおりです。objectName.propertyName
![]()
プロパティは配列と密接な関係があります。myCar.make="Jeep"; myCar.model="Wrangler"; myCar.year=1988;
![]()
myCar.make=myCar["make"]=myCar[0]; myCar.model=myCar["model"]=myCar[1]; myCar.year=myCar["year"]=myCar[2];
![]()
関数とメソッド
Javaスクリプトの関数は、function文で次のように定義します。関数の中で別の関数を含むことは当然可能であり、再帰的に自身の関数も使用できます。function 関数名(引数1, 引数2, ... , 引数n) // 引数の文字列や数に制限はありません。
![]()
次に簡単な関数を定義してみましょう。
関数は定義しただけでは実行されませんから呼ぶ必要があります。たとえば、先程の関数「pretty_print」を呼び出すには、次のように記述します。function pretty_print(string) { document.write("<hr><p>" + string); }
メソッドはオブジェクトの中の関数で、プロパティのように定義できます。pretty_print("This is some text to diplay")
オブジェクトはすでに存在していなければならず、メソッドを関数のように呼び出して使用します。以下がその記述例です。object.methodname=function_name;
Javaスクリプトでは、現オブジェクトを参照するために使用する特別なキーワードthisがあります。たとえば、以下のような引数にオブジェクトの値を持つvalidateという関数が定義されているとします。object.methodname(引数);
![]()
これをフォーム形式のonChangeイベントハンドラによりvalidateを呼び出すように設定するとき、formオブジェクトをthisと表すことができます。function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) alert("Invalid Value!"); }
![]()
<input type="text" name="age" size=3 onChange="validate(this, 18, 99)">
![]()
オブジェクトの作成
Javaスクリプトには、あらかじめ用意されたオブジェクトがあります。新しくオブジェクトを作成するには、まず、オブジェクタイプを定義するために、名前、プロパティ、メソッドなどを指定した関数を作成して下さい。
- 関数を記述して、オブジェクトタイプを定義します。
- newでオブジェクトのインスタンスを作成します。
たとえば、carというオブジェクトタイプを作る場合、次のように「メーカ(make)」、「モデル(model)」、「製造年(year)」といったプロパティを持つ関数を定義します。
そして、次のようにmycarと呼ばれるオブジェクトを作成します。function car(make, model, year) { this.make=make; this.model=model; this.year=year; }
すると、mycar.makeは"Jeep"に、mycar.yearは1988となります。mycar=new car("Jeep", "Wrangler", 1988);
![]()
ここで、人(person)に関するオブジェクトを作り、先程のオブジェクト"car"へ所有者(owner)というプロパティを埋め込んでみます。それには、まずオブジェクト"person"の作成です。
オブジェクト"car"を再定義します。function person (name, age, sex) { this.name=name; this.age=age; this.sex=sex; } yok=new person ("Yasukazu Yokoi", 45, "Male"); hana=new person ("Hanako Yamada", 21, "Female");
![]()
これで次のように新しいオブジェクトを作成します。function car(make, model, year, owner) { this.make=make; this.model=model; this.year=year; this.owner=owner; }
![]()
オブジェクト"person"で定義した値へアクセスするには、次のように指定します。car1=new car ("Jeep", "Wrangler", 1988, yok); car2=new car ("Porsche", "Carrera", 1996, hana);
じつはオブジェクトのプロパティは上記のような再定義を行なう必要がなく、いつでも追加できます。たとえば、オブジェクト"car"へ車の色である"color"というプロパティを加えたい場合、car1.owner.name
こう定義することでプロパティが加えられます。しかし、このオブジェクトだけに加えられたものであり、car2では使用できません。同じ定義のオブジェクトへプロパティを加える場合、オブジェクトの定義が必要です(この場合、オブジェクトcarの定義にプロパティ"color"を加えます)。car1.color="black";
![]()
メソッドの定義
メソッドもプロパティ同様、オブジェクトの中に定義できます。たとえば関数を定義し、オブジェクトを定義するなら、これで、以下のとおり新しいメソッドを呼ぶことができます。function displayCar() { var result="美しい" + this.year + "年型「" + this.make + " " + this.model + "」"; pretty_print(result); // 前に定義した関数です。 } function car(make, model, year, owner) { this.make=make; this.model=model; this.year=year; this.owner=owner; this.displayCar=displayCar; }
![]()
その結果は、こうなります。car1.displayCar(); car2.displayCar();
![]()
美しい1988年型「Jeep Wrangler」 美しい1996年型「Porsche Carrera」
![]()