JavaScript-4 クラスオブジェクト
JavaScriptはオブジェクトモデルを理解しないとなかなか応用することが難しいものです。
JavaScriptでは配列から文字列までオブジェクトで構成されます。
文字列であればStringオブジェクト、配列であればArrayオブジェクトとして格納されます。
ここでは簡単なクラスを作成してみたいと思います。 JavaScriptのクラスへのメソッドの登録は少々変わっています。 以下サンプルコードです。
JavaScriptではオブジェクトを作成する際にnew演算子によって宣言を行います。 コンストラクタは関数オブジェクトそのものとなりますので、上記の myClass クラスでいえばコンストラクタは myClass関数そのものとなるわけです。
prototype宣言は参照されるオブジェクトすべてから参照する事が可能となります。 ですので、Object.prototype.setvalue = 13;部分の prototype部分を削除すると結果として13は返されなくなります。 これは setvalue が定義されていない状態で $s1 が定義されましたので、後から親オブジェクトであるObjectにsetvalueが追加されても$s1には反映しないためです。
prototype宣言を行うことで参照先にも反映されるかたちとなっているわけです。
ここでは簡単なクラスを作成してみたいと思います。 JavaScriptのクラスへのメソッドの登録は少々変わっています。 以下サンプルコードです。
function myClass(){
this.name = "myClass";
this.add = function($a , $b){
return $a + $b;
}
this.set = setName;
}
function setName($n){
this.name = $n;
}
var $s = new myClass();
$s.set("haro");
alert($s.add(1,4) + $s.name);
5haroクラス宣言そのものが関数になっており、関数の登録は変数のように代入することで行います。 PHP等に慣れているとこのあたりは少々戸惑うかもしれません。
JavaScriptではオブジェクトを作成する際にnew演算子によって宣言を行います。 コンストラクタは関数オブジェクトそのものとなりますので、上記の myClass クラスでいえばコンストラクタは myClass関数そのものとなるわけです。
プロトタイプ
前ページのプロトタイプオブジェクトチェーンを念頭において以下のコードを実行してみます。
function myClass(){
this.name = "myClass";
this.setvalue = 50;
}
var $s1 = new myClass();
myClass.prototype.setvalue = 10;
Object.prototype.setvalue = 13;
alert($s1.setvalue);
50myClassクラスから$s1というオブジェクトを作成しています。 実行するとオブジェクト内の50が格納されたsetvalueプロパティが表示されます。 ではまず関数内の this.setvalue = 50; という行を削除して実行してみます。
10$s1オブジェクトに割り当てられたsetvalueはありませんので、$s1の参照元である myClass.prototype.setvalue に割り当てられた10が表示されました。 更に myClass.prototype.setvalue = 10; の行を削除してみます。 すると
13が表示されます。参照元の myClass クラスにもsetvalueがないので、更に上のObjectクラスにまでさかのぼり値を検索します。 Object.prototype.setvalue = 13; が記述されているので13が表示されるというわけです。 この行もなければ最終的にundefinedをスクリプトは返してきます。
prototype宣言は参照されるオブジェクトすべてから参照する事が可能となります。 ですので、Object.prototype.setvalue = 13;部分の prototype部分を削除すると結果として13は返されなくなります。 これは setvalue が定義されていない状態で $s1 が定義されましたので、後から親オブジェクトであるObjectにsetvalueが追加されても$s1には反映しないためです。
prototype宣言を行うことで参照先にも反映されるかたちとなっているわけです。
2008年 10月 30日ドキュメント作成
2008年 10月 31日ドキュメント更新