- ベストアンサー
静的メソッドとインスタンスメソッドを定義する方法
簡単な、カウンタクラスからのインスタンス作成とその利用のテストを行いました。 テストとして作成した以下の内容のファイルをブラウザ(IEやFireFox)で開くと、期待した結果は返りますが、(Windowsで処理待ちを示す)砂時計マークがいつまで経っても消えません。 どこかで永続ループでもしているのでしょうか。 どこに問題があるのか、また、こういった問題のデバッグのコツを教えて下さい。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>教えて!goo</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META HTTP-EQUIV="Content-Script-Type" CONTENT="javascript"> <SCRIPT TYPE="text/javascript"> function Counter(initialCount) { this.count = initialCount; } Counter.prototype = { count : 0, increment : function() { this.count += 1; }, decrement : function() { this.count -= 1; } } Counter.newInstance = function(initialCount) { return new Counter(initialCount); } var counter; function testCounter() { counter = Counter.newInstance(100); counter.increment(); document.write(counter.count); } </SCRIPT> </HEAD> <BODY ONLOAD="testCounter()"> </BODY> </HTML>
- ggaogg
- お礼率86% (209/243)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ai10
- ベストアンサー率27% (3/11)
ロード後にdocument.writeを使用されていますが、それは適切ではありません。(ロード中にdocument.writeをするのであればいい。) ちなみに、document.writeを使う際には、 document.open() document.write() document.close() という流れが基本です。 openとcloseはロード中に必要だったかどうかはよく知らないが。 (個人的にwriteは使わないので…) あなたのソースではロード後なので、document.closeがないために砂時計が表示されたままとなってしまいます。(IEでは砂時計は出ません。) もし、ロード後にページ内にテキストを表示させたいのであれば * = document.getElementById() *.appendChild( document.createTextNode( ** ) ) を使うべきです。( *.innerHTML でも可 ) ちなみに、newInstanceメソッドは必要なんでしょうか？ 素直に counter = new Counter( 100 ); でいいように思えます。 さらに、increment, decrement を用意しているってことは、なるべく変数countはprivateで扱いたいってことですよね。 (publicなら、すなおに counter.count ++; でいいはず。) もしprivate扱いなら、countを取得するようなメソッドを用意するべきでしょう。 また、counterはグローバルで使う予定ですか？ グローバルでなければ関数冒頭にvar宣言させましょう。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang='ja'> <head> <title>教えて!goo</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> ( function ( Counter ) { // onload //@cc_on window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function () { var counter = new Counter( 100 ); // インスタンス作成 counter.increment(); // 表示 var objDiv = document.getElementById( 'id-div' ); objDiv.appendChild( document.createTextNode( ''+counter.get() ) ); // destroy counter = objDiv = null; }, false ); } )( ( function () { function Counter ( initialCount ) { this.count = initialCount; // destroy initialCount = null; } Counter.prototype = { count : 0, increment : function() { return ++ this.count; }, decrement : function() { return -- this.count; }, get : function() { return this.count; } } return Counter; } )() ); </script> </head> <body> <div id='id-div'></div> </body> </html> ---------------------------------------------------------------- 注: [1]全角スペース使用 [2]特殊な書き方をしているのは、私自身の勉強のためでもあります。 こんな書き方もあるよーっていうだけで他意はないです。
お礼
なるほど、ページのロード前にopen処理を行い、ロードしたページを実際にブラウザに出力するときにwrite、そしてロードが終わったらcloseと、1つのロードでopenとcloseが1セットのみというのが理想なんですね。 document.close(); document.write("なんたら"); この記述でも動いてしまうので、どうしても甘えが出てきてしまいます。 あと、ページ中に何かを挿入する際には、ai10さんのようにDOM操作を行って入れたり、あとはinnerHTML等で入れたりするほうが、挿入位置等も明確で、スマートだと思います。参考にさせて頂きます。 一番の発見が、マクロみたいな書き方です。 /*@if (@_jscript) これは、もしもjscript(IE)ならということですね。 attachEventは、通常複数の条件式を付けなければいけないと思っていましたが、こんな書き方で短くできたんですね。 あと、newInstanceというメソッドを作成したりしていたのは、私は普段Javaを使っているので、そのデザインを使えるかなと模索していたためです。 模索中に今回の不具合が出たので、デザインに問題があるのかと思って、そのまま載せました(結果はclose忘れでしたが・・)。 javascript始めて短いので、今後の参考になりました。 ありがとうございました。
お礼
あ、そんな単純な事だったんですね。。 flushメソッドがないものだから、てっきりそういう概念がjavascriptに存在しないのかと思っていました。 失礼しました。 そしてありがとうございました。