かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

JavaScriptでのクラスの定義

いやはや、慣れないことをするのは疲れます。TypeScriptを使う前にJavaScriptの挙動は押さえておかないとねっ。

例えば

クラスを表すクラス

var Class = function () {
    var klass = function () {
        this.init.apply(this, arguments);
    };
    klass.prototype.init = function () { };
    klass.fn = klass.prototype;
    return klass;
};

JavaでいうClassや.NETでいうTypeにあたるのかなぁ?そんなノリのクラス。Classをnewで呼び出した結果は、すべてのクラスが持つべき振る舞いを持っただけのクラスのインスタンスみたいなイメージにあたるのかな?
コンストラクタでinit関数が呼び出されるということと、JavaScriptのprototypeへのアクセスのショートカットに使われるというfnを定義してる。

使ってみると

こんな風にクラスを定義できる。

// Personクラス
var Person = new Class();
// コンストラクタはnameを受け取りnameというプロパティに設定する
Person.fn.init = function(name) {
    this.name = name;
};
// printNameというメソッド
Person.fn.printName = function() {
    // ドキュメントに文字列を出力する
    document.write("私の名前は" + this.name + "です");
};

んで、これらのスクリプトを書いたJavaScriptのファイルをklass.jsとした場合以下のようなHTMLを書いて動作確認できる。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="klass.js"></script>
</head>
<body>
    <script type="text/javascript">
        var p = new Person("tanaka");
        p.printName();
    </script>
</body>
</html>

ブラウザで表示すると「私の名前はtanakaです」という文字列が表示されるはず。

感想

まだ、めんどくさい。

因みに

オライリーさんのステートフルJavaScriptを買って読み始めました。