かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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を買って読み始めました。