Changes between Version 10 and Version 11 of HowTo/JavaScriptLanguageIntroduction

Timestamp:

Aug 1, 2010, 1:12:35 PM (14 years ago)

Author:

村山 俊之

Comment:

--

HowTo/JavaScriptLanguageIntroduction

@@ -281 +281 @@
 }}}
 
-以上が、 Java や C++ などで言うところのクラス定義に相当する、といって良いでしょう。継承を行いたい場合は、新たに定義するコンストラクタの関数名に、プロトタイプの複製をコピーしてあげれば ok です。以下のような記述になります。
-
-{{{
-// ダイアログオブジェクトの基本クラス
-function Dialog() {}
-Dialog.prototype = {
-    "doModal": function(callback) {
-        this.modal_callback = callback;
-        this.createDialog();
+以上が、 Java や C++ などで言うところのクラス定義に相当する、といって良いでしょう。継承を行いたい場合は、新たに定義するコンストラクタの関数名に、プロトタイプの複製をコピーしてあげれば ok です。以下は、人を表す基本クラス Human からコンストラクタとメソッドを継承し、働く人を表す派生クラス Worker を実装するサンプルです。
+
+{{{
+function Human(name, birth, sex) {
+    if (name == null)  // プロトタイプの複製をコピーする際には、このコンストラクタは何もしない
+        return;
+    this.name = name;
+    this.birth = birth instanceof Date ? birth : new Date(birth);
+    this.sex = /^m/i.test(sex) ? "male" : "female";
+}
+
+Human.prototype = {
+    "introduce": function() {
+        var message = "私の名前は" + this.name + "。" +
+            this.birth.getFullYear() + "年" + (this.birth.getMonth() + 1) + "月" +
+            this.birth.getDay() + "日生まれの" + (this.sex == "male" ? "男性" : "女性") + "です。";
+        var message += this.makeAdditionalIntroduction();
+        alert(message);
     },
-    "createDialog": function() {
-        this.window = document.createElement("div");
-        this.window.className = "dialog";
-        var dialog_title = document.createElement("h2");
-        dialog_title.appendChild(document.createTextNode(this.title || "名称未定義"));
-        document.body.appendChild(this.window);
-        this.drawForm();  // 継承クラスにて実装する
-        this.show();
-    },
-    "show": function(is_show) {
-        is_show = typeof is_show == "boolean" ? is_show : true;
-        this.window.style.display = is_show ? "block" : "none";
-    },
-    "destroyDialog": function() {
-        if (!this.window) return;
-        if (this.modal_callback && this.preEndModal) {
-            var result = this.preEndModal();
-            if (result == null)
-                return;
-            if (result)
-                this.modal_callback();
-        }
-        if (this.preDestroyDialog) {
-            if (!this.preDestroyDialog())
-                return;
-        }
-        document.body.removeChild(this.window);
-        this.window = undefined;
+    "makeAdditionalIntroduction": function() {
+        // 基本クラスでは何もせず、空文字列を返す
+        return "";
     }
 };
 
-function AhoDialog() {
-    this.title = "あほダイアログ";
-}
-
-AhoDialog.prototype = new Dialog();  // メンバメソッドを継承 (プロトタイプの複製をコピー)
-
-// 継承クラスの独自メソッドを記述
-AhoDialog.prototype.drawForm = function() {
-    this.dom_elems = {};
-    var p = document.createElement("p");
-    p.appendChild(document.createTextNode("あほあほ"));
-    this.window.appendChild(p);
-    p = document.createElement("p");
-    p.appendChild(document.createTextNode("どう思いますか? → "));
-    var input = document.createElement("input");
-    input.type = "text";
-    input.style.width = "20em";
-    p.appendChild(input);
-    this.dom_elems.answer_input = input;
-    this.window.appendChild(p);
-    p = document.createElement("p");
-    p.style.textAlign = "center";
-    input = document.createElement("input");
-    input.type = "button";
-    input.value = "OK";
-    var that = this;
-    input.onclick = function() {
-        that.is_ok = true;
-        that.destroyDialog();
-    };
-    p.appendChild(input);
-    p.appendChild(document.createTextNode(" "));
-    input = document.createElement("input");
-    input.type = "button";
-    input.value = "キャンセル";
-    input.onclick = function() {
-        that.is_ok = false;
-        that.destroyDialog();
-    };
-    p.appendChild(input);
-    this.window.appendChild(p);
-};
-
-AhoDialog.prototype.preEndModal = function() {
-    if (!this.is_ok)  // キャンセルボタン
-        return false;
-    var answer = this.dom_elems.answer_input.value;
-    if (answer == "") {
-        alert("何か入力して下さい…。");
-        this.dom_elems.answer_input.focus();
-        return;
-    }
-    this.data = {
-        "answer": answer
-    };
-    return true;
-};
-
-// 実際にダイアログを使用するコード例
-var dlg = new AhoDialog();
-dlg.doModal(function() {
-    var div = document.getElementById("result_container");
-    while (div.childNodes.length > 0)
-        div.removeChild(div.lastChild);
-    var text = "";
-    for (int i = 0; i < 1000; i++)
-        text += this.data.answer + " ";
-    div.appendChild(document.createTextNode(text));
-});
-}}}
+function Worker(name, birth, sex, company, roll, post) {
+    Human.call(this, name, birth, sex);  // 親クラスのコンストラクタを呼び出す
+    this.company = company;
+    this.roll = roll;
+    this.post = post;
+}
+
+Worker.prototype = new Human();  // クラスメソッドの継承 (プロトタイプの複製をコピー)
+
+// Worker 独自のメソッドを実装
+Worker.prototype.makeAdditionalIntroduction = function() {
+    // 自己紹介に追加する内容を返す
+    return "\n" + this.company + (typeof this.post == "string" ? "の" + this.post : "") +
+        "にて、" + this.roll + "をやっています。";
+};
+
+var murachi = new Human("村山 俊之", new Date(1978, 1, 7), "male");
+murachi.introduce();
+
+murachi = new Worker("村山 俊之", new Date(1978, 1, 7), "male", "株式会社はらぺこ", "代表取締役社長");
+murachi.introduce();
+}}}
+