Serendip

Web Studio

オブジェクトっぽい話が分かるかもしれないJavaScript講座　その1 | Takazudo Clipping* で JavaScript の prototype を使ってメソッドをつけるとメモリを食わなくていいとの話が出ていた。
さらに、そのサイトの参考先の Kristoffer’s tidbits : Javascript prototype versus closure execution speed では prototype を使った場合と Closure を使った場合とでの実行速度の違いについて述べられていた（prototype を使った方が速く実行できるらしい）。

そこで、上記サイトの "まんじゅう" オブジェクトを Closure を使って実装して、prototype のものとどれぐらい実行速度に差が出るか試してみた。
結果は、実行速度では思ったほど差が出なかった。むしろメモリ消費量に差が出るのだろうか?

JavaScript "まんじゅう" オブジェクト prototype 版と Closure 版の比較 （注意! ブラウザによってはかなり重い処理を行います）

Closure を使って "まんじゅう" オブジェクトを作る。

var manju = function() {
    var that = {};
    var elem;
    var visibility = true;
    var setVisibility = function(flag) {
        visibility = flag;
    };
    var setBgColor = function(color) {
        elem.css('background', color);
    };
    that.setup = function() {
        elem = $('<div class="manju">MANJU!</div>');
        $(document.body).append(elem);
        elem.click(function() {
            if (visibility) {
                setBgColor('#cccccc');
                setVisibility(false);
            } else {
                setBgColor('#000000');
                setVisibility(true);
            }
        });
    };
    return that;
};

prototype 版と Closure 版との "まんじゅう" オブジェクトの比較をしてみる。
prototype 版は上記サイトのコードをそのまま利用した。

$(function() {
    var NUMBERS = 2000;

    // use closure
    var m = [];
    var closureStartTime = new Date();
    for (var i=0; i<NUMBERS; i++) {
        m[i] = manju();
        m[i].setup();
    }
    var closureEndTime = new Date();
    var closureTime = closureEndTime.getTime() - closureStartTime.getTime();
    console.log('closure: ' + closureTime);

    // use prototype
    var n = [];
    var prototypeStartTime = new Date();
    for (var j=0; j<NUMBERS; j++) {
        n[j] = new Manju();
    }
    var prototypeEndTime = new Date();
    var prototypeTime = prototypeEndTime.getTime() - prototypeStartTime.getTime();
    console.log('prototype: ' + prototypeTime);

    // result on Firefox 3.0.10, closure: 1638, prototype: 1608
    // result on Safari 3.2.3, closure: 489, prototype: 465
});