とりあえず遅延ロード

スクリプト内から動的にスクリプトをロードするinclude()関数の例です。

    include = function (file) {
        var s = document.createElement('script');
        s.src = file;
        s.type = 'text/javascript';
        s.defer = 'defer';
        document.head.appendChild(s);
    }

このコード自体はなんでも無いですね。scriptタグをheadタグに追加しているだけです。

ロード完了を待つ

そして読み込み完了を待って、任意のコードを実行するlazyLoad()を実装します。

    lazyLoad = function(url, ctl, fn) {
        function _check(ctl) { //オブジェクトの有無でロード完了を判定
            return !!(eval(ctl));
        }
        if (_check(ctl)) {
            fn && fn(); //ロード済みなら指定の関数をすぐ実行
        } else {
            include(url);
            setTimeout(function () {
                if (!_check(ctl)) {
                    setTimeout(arguments.callee, 15.625);
                } else {
                    fn && fn();//読み込みが終わったら関数を実行
                }
            }, 15.625);
        }
    }

今でもそうだと思うのですが、scriptタグの読み込み完了イベントは拾えないので代わりに遅延ロードしたスクリプトを実行した結果として作成されるオブジェクトの有無を判定に利用します。
後は既に読み込み済みなら遅延ロードを実行しないようにチェックを挟んでおきます。

複数箇所からの呼び出し

先のコードではとりあえず読み込み済みのチェックは実施していますが、遅延ロードが完了する前に複数回同じスクリプトが呼び出されると無駄があったり面倒くさいことが発生するかもしれません。
そこで同じスクリプトに対しては一度しかinclude()が呼び出されないようにします。

    _urls = [];
    lazyLoad = function (url, ctl, fn) {
        function _check(ctl) {
            return !!(eval(ctl));
        }
        if (_check(ctl)) {
            fn && fn();
            _remove$lazyLoad();
        } else {
            if (_urls[url]) { //リクエスト済みならfnのみ登録して終了。
                _urls[url].push(fn);
                return;
            }
            _urls[url] = [];
            include(url);
            _urls[url].push(fn);
            setTimeout(function () {
                if (!_check(ctl)) {
                    setTimeout(arguments.callee, 15.625);
                } else {
                    for (var i = 0; i < DQ._urls[url].length; i++) {
                        _urls[url][i] && DQ._urls[url][i].call();
                    }
                    delete _urls[url];
                }
            }, 15.625);
        }
    }

読み込み中のスクリプトと読み込み完了時に実行される関数を_urlsに追加しています。
`

複数のスクリプトを遅延ロードする

複数のスクリプトを遅延ロードしてから自身のコードを実行したい場合どうなるのでしょうか。

lazyLoad("first.js", "Window.FIRST", function() {
  layzLoad("second.js", "Window.SECOND", function() {
      ... //自分のコード
  });
});

もしくは

lazyLoad("first.js", "Window.FIRST");
layzLoad("second.js", "Window.SECOND", function() {
    ... //自分のコード
});

まあ、どちらもいまいちですね。
そこで、全ての遅延ロードが完了したら呼び出される、afterLoad()という関数を用意します。

    lazyLoad = function (url, ctl, fn) {
        function _check(ctl) {
            return !!(eval(ctl));
        }
        if (_check(ctl)) {
            fn && fn();
            __remove$lazyLoad();
        } else {
            if (_urls[url]) {
                _urls[url].push(fn);
                return;
            }
            _urls[url] = [];
            include(url);
            _urls[url].push(fn);

            setTimeout(function () {
                if (!_check(ctl)) {
                    setTimeout(arguments.callee, 15.625);
                } else {
                    for (var i = 0; i < _urls[url].length; i++) {
                        _urls[url][i] && _urls[url][i].call();
                    }
                    delete _urls[url];
                    _remove$lazyLoad();
                }

            }, 15.625);
        }
_
        function _remove$lazyLoad() {
            var cnt = 0;
            for (var nm in DQ._urls) {
                cnt += _urls.hasOwnProperty(nm) ? 1 : 0;
            }
            if (cnt == 0) {
                __trigger && setTimeout(DQ.__trigger, 0);
            }
        }
    }

__trigger = function () {
    for (var i = 0; i < _onLoad.length; i++) {
        _onLoad[i].call();
    }
    _onLoad.length = 0;
    delete __trigger;
}
_onLoad = [];
afterLoad = function (callback) {
    _onLoad.push(callback);
}

使い方は以下の通りです。

lazyLoad("first.js", "Window.FIRST");
layzLoad("second.js", "Window.SECOND");
afterLoad(function() {
    ... //自分のコード
});

より複雑なケースでは問題が出る可能性もありますが、そこは宿題ということで。

非同期の完了待ち

一定の条件が成立するまでタイマーで待機するパターンです。例えばJavascript等の遅延読み込みの完了待ち等です。

setTimeout(function() {
    if (完了条件) {
        完了時の処理
    }
    arguments.callee();
}, 15.625);

これなら汎用の関数がかけますね

function wait(condition, callback) {
    var _condition = (typeof condition == "string") ?
                     function() { return eval(condition); } : condition;
    if (_condition()) {
        callback && callback();
    }
    setTimeout(function() {
        if (_condtion()) {
            callback && callback();
        }
        arguments.callee();
    }, 15.625);
}

使い方はこんな感じ

foo.js

FOO = {}
FOO.bar = function() {
    alert("Hellow");
}

JavaScriptの遅延ロード

var s = document.createElement('script');
s.src = "foo.js";
s.type = 'text/javascript';
s.defer = 'defer';
document.getElementsByTagName('head').item(0).appendChild(s);
wailt("FOO", function() {
   FOO.bar();
});

再帰呼び出し

どうもこれが最も典型的な使い方みたいですね。

function Factorials(x) {
    if (x <= 1) {
        return 1;
    }
    return x * arguments.callee(x - 1);
}

ただし、もっと本質的には無名関数である必要がありますが･･･

• calle – MDC

まずは正しく変更出来ない（ieのみ）パターンです。

function(id, url) {
  var o = document.getElementById(id);
  o.setAttribute('data', url);
}

data属性は変わっているようですが、ieだと変更されたurlを表示してくれません。
これを、object要素のクローンを作成指定リプレースするとちゃんと新しい要素を反映してくれます。

function(id, url) {
    var obj = document.getElementById(id);
    obj.setAttribute('data', url);
    var clone = obj.cloneNode(true);
    obj.parentNode.replaceChild(clone, obj);
}

jQueryを使用した場合も示しておきます。

function(id, url) {
    var obj = $('#' + id).attr('data', url);
    obj.replaceWith(obj.clone(true));
}

Context = function() { this.foo = ConcreateA.foo; }
Context.prototype.foo = function() {}
ConcreateA.foo = function() {
//実態
}

function extend(s, c) {
  function f() {};
  f.prototype = s.prototype; //sはインスタンスでは無く、型でなければだめ
  c.prototype = new f();
  c.prototype.__super = s.prototype; //オーバーライド用に保持
  c.prototype.constructor = c;
  ...
}
Collection = extend(Array, function() {
  if (arguments.length == 1 && typeof n == "number") {
     return;
  }
  for (var i = 0; i < arguments.length; i++) {
    this.push(arguments[i]);
  }
  Collection.prototype.join = function(separator) { //オーバーライド
      return this.__super.join.apply(this, arguments);
  }
});

foo = new Collection (1,2,3);
foo.push(4);
foo.push(5);

実際の実行結果は以下のとおり

本文の最初で「ほぼ」旨くいくとお茶を濁している原因がコンストラクターの部分でプリミティブなオブジェクトの
コンストラクターを継承先から呼び出しても期待通りの振る舞いをしてくれません。自作のクラスを継承した場合は
this.__super.constructor.aply(this, arguments);とすれば旨くいくのですが・・・

そこで今回は強引に渡された引数を自前でpushしています。

それからもう一つ、直接要素を指定した場合にlengthが正しく反映されません。

var c = new Collection(1,2,3);
c[3] = 4;
alert(c.length); //期待値は4

最後にie7でも上記２点以外を対応される方法（力業）を示します。

function extend(s, c) {
  function f() {};
  if (s == Array) {
      var a = new s;
      f.prototype.constrctor = s;
      f.prototype.concat = a.concat;
      f.prototype.join = a.join;
      f.prototype.length = a.concat;
      f.prototype.pop = a.pop;
      f.prototype.push = a.push;
      f.prototype.reverse = a.reverse;
      f.prototype.shift = a.shift;
      f.prototype.slice = a.slice;
      f.prototype.sort = a.sort;
      f.prototype.splice = a.splice;
      f.prototype.unshift = a.unshift;
  } else {
      f.prototype = s.prototype;
  }
  c.prototype = new f();
  c.prototype.__super = s.prototype; //オーバーライド用に保持
  c.prototype.constructor = c;
  ...
}

で、getterやsetterの実装を考えると高級言語によくあるpropertyは良くできた仕様です。
内部的にsetterを定義しないかreadonlyを宣言すれば参照のみ出来るメンバー変数のできあがりです。

[C#]
{
 private int foo_;
 property int foo {
     get { return foo_; }
 };

getter,setterの実装をどうするか考えた結果、採用(別に私のオリジナルではありません）したのが以下の方法です。

Class = function() { this._foo = 0; } //privateメンバーは'_'で始める
Class.prototype.foo = function (value) {
    if(!arguments.length) {
        return this._foo;
    } else {
        this._foo = value;
    }
}

実用上これで問題ないですが、.Net Framework のPropertyGridやXmlSerializerを実装しようとすると機械的にgetter,setterの
有無を確認できる方が都合が良いです。かといって getFoo() 等にするのは嫌・・・。

で、あいだととってgetter,setterをプライベート相当で定義することにします。

Class.prototype.__foo = {}
Class.prototype.__foo.get = function() {
   return this._foo;
}
Class.prototype.foo = function (value) {
    if(!arguments.length) {
        return this.__foo.get();
    } else {
        this.__foo.set(value);  //エラー処理は割愛
    }
}

まあ、これを一つ一つ書くのは面倒なので関数を用意します。

function __property__(object, name, get, set, def) {
    var _nm = "_" + name;
    var __nm = "__" + name;
    object.prototype[_nm] = def || false;
    object.prototype[__nm] = { 'get': get, 'set': set };
    return function (value) {
        if (!arguments.length) {
            !this[__nm].get && throw new Error('has not getter');
            return this[__nm].get.apply(this);
        } else {
            !this[__nm].set && throw new Error('has not setter');
            this[__nm].set.apply(this, arguments);
        }
    };
}
Class.prototype.foo = __property__(
    Class,
    "foo", 
    function() { return this._foo; }, 
    null , 
    "hoge");

前提はこれくらいでしょうか

1. オーバーライド時に継承元の関数が呼び出せる
2. 多階層の継承が出来る
3. C++でのvirtualな呼び出しが出来る

C++やC#をずっと使ってきた自分にとってはプロトタイプチェーンだけではVB6のClassのような残念感があります。
やはりポリモーフィズムやオーバーライドが出来ないと逆に不便です。
色々な継承パターンを調べてみましたが、extendパターンが自分向きのようです。

まずは単純なextend関数

function extend(s, c)
{
    function f(){};
    f.prototype = s.prototype;
    c.prototype = new f();
    c.prototype.__super = s.prototype;
    c.prototype.__super.constructor = s;
    c.prototype.constructor = c;
    return c;
};

いきなり余談ですが、JavaScriptではインスタンスも拡張できるので以下のような書き方が出来れば、メタクラスの概念も導入できそうですが、
私は使わないので考慮しないことにします。

MetaClass = function() {}
Class = new MetaClass() {}  //クラスはメタクラスのインスタンス
SubClass = extend(Class, function() {
});

閑話休題。
次にコンストラクターをC#やVB.Netの雰囲気で呼び出せるようにbaseメソッドを追加します。

function extend(s, c)
{
    function f(){};
    f.prototype = s.prototype;
    c.prototype = new f();
    c.prototype.__super = s.prototype;
    c.prototype.__super.constructor = s;
    c.prototype.constructor = c;
    c.prototype.base = s;
    return c;
};

と、これをやると多層継承で嵌ります。

a = function() {}
b = extend(a, function() {
  this.base(); //ここのthisがクラスbを指し続けてしまう。
});
c = extend(b, function() {
  this.base();
});
var foo = new c();

なのでbaseを関数で実装する

function extend(s, c)
{
    function f(){};
    f.prototype = s.prototype;
    c.prototype = new f();
    c.prototype.__super = s.prototype;
    c.prototype.__super.constructor = s;
    c.prototype.constructor = c;
    c.prototype.base = function() {
      var ob = this.base;
      this.base = s.prototype.base;
      s.apply(this, arguments);
      if( this.constructor == c) {//baseを一回しか呼べないように削除しておく
          delete this.base;
      } else {
          this.base = ob;
      }
    }
    return c;
};

次はメソッドのオーバーライドです。以下のやり方では、bでオーバーライドしたbarが期待通り呼び出されません。

a = function() {};
a.prototype.foo = function() { 
  this.bar();　//bのbarを読んでくれません。
}
a.prototype.bar = function() {
  this._bar = "bar";
}

b = extend(a, function() {
  this.base();
});
b.prototype.foo = function() {
  this.__super.foo();
}
b.prototype.bar = function() {
　this.__super.bar();
  this._bar += "b";
}

var hoge = new b();
hoge.foo();

これは、this.__super.foo();をthis.__super.foo.apply(this,arguments);とすることで解決します。

ところが、この記述はbaseと同様に多層継承での問題をはらんでいます。

結局、ここについては専用の関数を提供することにしました。

__super__ = function(me, m, a) {
    a = a || [];
    var b = me.__super;
    var r,s;
    if (b && b[f] == me[f]) {
        for (s = me.__super.__super; s && s[f] == me[f]; s = s.__super) {
            ;
        }
    } else {
        s = b;
    }
    if (s == null) {
        throw new Error("__dqsuper__: 循環呼び出しか、継承されていないオブジェクトから呼び出されました。");
    }
    me.__super = s.__super;
    r = (typeof f == "string") ? s[f].apply(me, a) : f.apply(me, a);
    me.__super = b;

    return r;
}

一応完成形

function extend(s, c, m) {
    function f(){};
    f.prototype = s.prototype;
    c.prototype = new f();
    c.prototype.__super = s.prototype;
    c.prototype.__super.constructor = s;
    c.prototype.constructor = c;
    c.prototype.base = function() {
      var ob = this.base;
      this.base = s.prototype.base;
      s.apply(this, arguments);
      if( this.constructor == c) { 
          delete this.base;
      } else {
          this.base = ob;
      }
    }
    //属性を拡張
    for (var n in m) {
        c.prototype[n] = m[n];
    }
    return c;
}

デモ
JavaScript Arrayの継承について

実験:

var names = srt.sort(function (a, b, x, y) {
    x = a.charAt(0) == "_" ? a.substring(1) : a;
    y = b.charAt(0) == "_" ? b.substring(1) : b;

    return x - y;
});

string型は引き算できないので比較した結果を返してやる必要があります。

    return (x == y) ? 0 : (x < y ? -1 : 1);