• ベストアンサー

下記コードのようなオブジェクトとかprototypeとかを理解するヒントを教えてください！

<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> var hoge = function(){ //▼ function testFunc(n){ } testFunc.prototype.init = function(c){ alert(c); }// end func return{ testFunc:testFunc } }(); var u = new hoge.testFunc(); u.init("あああ"); </script> </body> </html> ---------------------------------------------------- ここ数日いろいろ弄っているのですが、 いまいちピンと来ない感じです。 何か、参考になるようなスクリプトやポイントなどありましたら、 ご紹介いただけると幸いです。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

prototypeの考え方 たとえば極端だけど var Hoge = { func_0: function() { alert("a");/*コードが数千行でもいいよ*/ }, func_1: function() { alert("b"); }, //～ func_1000: function() { alert("？"); } //1000個の関数 }; var hoge_1 = new Hoge; var hoge_2 = new Hoge; //～ var hoge_1000 = new Hoge; と、大量にオブジェクトを作ったとする。 オブジェクトを作るたびに、ものすごいメモリーが必要だと思わない？ Hogeの中に1000個の関数×1000個のオブジェクト。 ここで「メモリー ＝ 風呂敷」とすると、かなり大きい風呂敷が沢山必要になる でも.prototypeを使うと、Hogeの中に目的の関数がないと .prototypeで後付けしたものを探すようになる。 これを利用して、Hogeの中に、関数なんて１個も置かない。 すると風呂敷は小さくて済む。 関数が必要になったとは、必要な部分だけ関数をコピーして、 あたかも風呂敷の中の関数のように振舞うように呼び出されている と考えてみれば？

その他の回答 (2)

回答No.2

ハードルは、たかいくらいがちょうどよいとおもってます。 やってることは、 var Hoge = function ( ) { 　; } Hoge.prototype.init = function ( c ) { 　alert( c ); }; Hoge.testFunc = function ( ) { 　return new this; }; var u = Hoge.testFunc(); u.init( "あああ" ); と、おんなじか？ じぶんでは、こっちのほうが、りかいしやすい。 というかこのていどです。すんません。

reggaepunc
質問者

お礼

うーん。。 いろんな書き方があって迷ってしまいますね。 一見同じコードに見えてしまう。。 もう少し弄って慣れてみます！ありがとうございます！

回答No.1

いきなりこんな複雑なコードを理解しようというのが間違いでは？ http://www.tohoho-web.com/js/object.htm http://www.tohoho-web.com/js/function.htm

reggaepunc
質問者

お礼

複雑なコードだったんですね。。 それすらも判断つかなかったです。 とほほさんで訓練します！ ありがとうございます！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 【javascript】prototypeを使って宣言したfunctionでthis.の値が取れない

    以下HTMLは開いた時に'aaa'がアラートされるつもりで作りました。 ※行頭は全角スペースです。 <html> <head> <script type="text/javascript"><!-- function hoge(){ 　this.val ='aaa'; }; hoge.prototype.func = function(){ 　alert(this.val); }; h = new hoge(); if(window.addEventListener){ 　window.addEventListener('load', h.func, false); }else{ 　window.attachEvent('onload', h.func); } //--></script> </head> <body> </body> </html> 結果は、undifindがアラートされました。 alert(this.val);　を　alert(h.val); とベタに記述すれば回避できますが、ちょっと違和感を感じます。 このような場合、どのような記述がベターなのでしょうか？

  • prototype.jp 動作しない

    prototype.jsをダウンロードしてきて、 index.phpと同じディレクトリに置いています。 初めてなのでバージョン情報を表示させようと思っています。 下記設定で実行しても最初のアラートaaaaaまでしか表示されません。 $("xxxx").innerHTML = Prototype.Version;の部分をコメントアウトするとbbbbbまで表示されます。 環境----------------------------- CentOS５ PHP5 prototype.js 1.6 index.php----------------------------- <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="/prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function n(){ alert("aaaaa"); $("xxxx").innerHTML = Prototype.Version; alert("bbbbb"); } // --></script> </head> <body> <input type="button" value="Click" onClick="n()"> <div id="xxxx"></div> </body> </html> ------------------------------------------ 今日始めたばかりなので、なにがなんだかさっぱりわかりません。 よろしくお願いします。

  • コンストラクタとプロトタイプについて

    ネットで検索したりして調べているのですがいまいちわからなかった箇所が あるので質問させていただきます。 コンストラクタで設定するのとプロトタイプで設定する違いがいまいちわかりません。 例えば function Test { this.prop = hoge; } Test.prototype.prop1 = hogehoge; の場合 コンストラクタのほうが優先されてhogeがでるのはわかるのですが 下記の場合はプロタイプのほうが優先されてhogehogeと出てしまうのは どうしてでしょうか？ <script language="javascript"> <!-- //コンストラクタ function Test(){alert("hoge"); } //prototypeでセット Test.prototype=alert("hogehoge"); //オブジェクト作成 var TEST = new Test(); window.onload=TEST; --> </script>

  • ｊｓ　プロトタイプ

    javascriptソースコード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } function Car(manufact, name){ this.manufact = manufact; this.name = name; } Car.prototype.info = function(){return this.manufact + " " + this.name;}; document.write("<p>"); var car1 = new Car("Toyota", "PRIUS"); print(car1.info()); var car2 = new Car("Honda", "INSIGHT"); print(car2.info()); document.write("</p>"); </script> </body> </html> 23行目なのですが「 Car.prototype.info 」とありますがｊｓにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか？ 参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html

  • コールバック関数が上手くいかないです

    こんにちは。 ブラウザ上に70と表示させるため、以下のソースを書きましたがうまくいきません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function funcA(a) { alert(a + 10); } function funcB(b, func) { var x = b + 2; func(x); } function funcC(c){ var body = document.body; body.innerHTML = c * 10; } funcB(5,funcC); //]]> </script> </head> <body> </body> </html> どなたか詳しい方、ご教示お願いいたします。

  • javascriptのconstructorプロパティについて

    constructorプロパティとは、 オブジェクトの初期化で使用されたコンストラクタ関数を参照 とのことなので、下記2パターンのPGを作成しました １．prototypeの明記なし function Hoge(){ this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 True init - Hogeで初期化 getInit - function () { return this.init; } ２．prototypeの明記あり function Hoge(){ this.initialize.apply(this,arguments); this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } Hoge.prototype ={ initialize:function(){ this.init = "Hoge.prototype.initializeで初期化"; }, getInit:function(){ return "Hoge.prototype.getInit()"; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 false init - Hogeで初期化 getInit - function () { return this.init; } initialize - function () { this.init = "Hoge.prototype.initialize\u3067\u521D\u671F\u5316"; } ・質問内容 prototypeの明記なしの場合は、Hogeのコンストラ関数を参照している（結果がTrueのため） prototypeの明記ありの場合は、falseのためコンストラ関数を参照していないのですが、 prototype明記あり、なしで結果が異なる理由が分からない状態です。 （prototype.constructorにも手を出したのですが、上記が解決しないため 　constructorプロパティに関してのみ質問した次第です） ネット、書籍等で調べたのですが、検討がつかない状態です。 お手数ですが、ご教授お願い致します。

  • javascriptからframeへの出力方法

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function init(){ $("f1").innerHTML = "hoge"; $("f2").innerHTML = "piyo"; } </script> </head> <frameset cols="50%,*" onload="init()" > <frame id="f1"> <frame id="f2"> </frameset> </body> </html> 上記、二つに分けたフレームにそれぞれ"hoge"と"piyo"と表示したいのですが出来ません。フレームにjavascriptからアクセスするにはどうしたらよいですか？

  • prototype.jsのコード

    の中に分からないものがあります。 var Prototype = { Version: '1.4.0', ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)', emptyFunction: function() {}, K: function(x) {return x} } ・・・・・・・・・ のなかの '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)' 特に (?:<script.*?>)と(?:<\/script>) の部分です。 これらは正規表現だと思うのですが (?: の意味を教えてください。

  • prototype の使い方

    prototype プロパティについて勉強しているのですが、次のような使い方で正しいのでしょうか。 var Dog = function() { this.sit = "I am sitting."; } var myDog = new Dog(); alert(myDog.sit); //“I am sitting.”と表示される。 var Dog2 = function() {} Dog2.prototype.sit = new Dog().sit; var myDog2 = new Dog2(); alert(myDog2.sit); //“I am sitting.”と表示される。 prototype の行で new Dog() を作るとゴミが出る気がするのですが、勝手に解放されるのでしょうか。

  • prototype.js で $ is not defined になってしまう！

    JSバージョン：prototype1.6 ブラウザ：Firefox2.0、IE7.0 OS：WinXPpro でシンプルに <html> <head> <title>$ - 指定idのエレメントを取得</title> </head> <script type="text/javascript" src="/js/prototype.js?aaads"></script> <script type="text/javascript"> function test1() { var element = $('div1'); alert(element.innerHTML); } </script> <body> <div id="div1">DIV1の中身</div> </body> </html> を実行したところ、$ is not defined と エラーになってしまいます。 あるレンタルサーバにUPして動かすと問題なく、 ローカルPCで実行するとエラーになってしまうようです。 どなたか教えて下さい！！！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する