QUALL – blog

クライアントサイドのjavascriptが最近おもしろいです。。


javascriptで独自オブジェクトを作成してみる。


オブジェクトを作成して、プロパティとメソッドを定義する。

<script type="text/javascript">
//<![CDATA[
//インスタンスの作成
obj = new Object();

//プロパティ定義
obj.name　= "次長";
obj["name2"] = "課長";

//メソッド定義
obj.showName = function() {
    document.write(this.name);
    document.write(this.name2);
    document.write(this["name"]);
    document.write(this["name2"]);
}

//メソッド呼び出し
obj.showName();
//]]>
</script>

で、上記コードの内容は、下記の書き方（オブジェクト初期化子）でも書ける。

<script type="text/javascript">
//<![CDATA[
obj = {
    //プロパティ定義
    name  : "次長",
    name2 : "課長",

//メソッド定義
    showName : function() {
        document.write(this.name);
        document.write(this.name2);
        document.write(this["name"]);
        document.write(this["name2"]);
    }
};

//メソッド呼び出し
obj.showName();
//]]>
</script>

オブジェクトのプロパティを列挙する場合はfor～in文を使う。

<script type="text/javascript">
//<![CDATA[
//プロパティ(メソッド込み）の列挙
for (output in obj) {
    document.write("プロパティ名 = " + output + ", 値 = " + obj[output] + "
");
}
//]]>
</script>

メソッドを列挙に含めない場合は以下。

<script type="text/javascript">
//<![CDATA[
//プロパティ(メソッド除外）の列挙
for (output in obj) {
    if (typeof obj[prop] != 'function') {
        document.write("プロパティ名 = " + output + ", 値 = " + obj[output] + "
");
    }
}
//]]>
</script>

終わり。

関連記事

• JSでイベントリスナーやらでバリデートの実装いろいろ
• formの複数選択のselectボックスの値をJSで取得する
• イベントハンドラを使わないでデザインとロジックを分割
• javascriptで独自オブジェクトを作成する

No related posts.