JavaScriptのプロトタイプ宣言について

このQ&Aのポイント
  • JavaScriptのプロトタイプはオブジェクトであり、新たなメソッドやプロパティを追加するために使用されます。
  • 23行目の「Car.prototype.info」は、Carオブジェクトのインスタンスに対して共有されるメソッドinfoを定義しています。
  • プロトタイプを使用することで、同じメソッドやプロパティを複数のインスタンスで共有し、メモリの使用効率を向上させることができます。
回答を見る
  • ベストアンサー

js プロトタイプ

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 」とありますがjsにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか? 参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html

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

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

Carのprototypeプロパティにメソッドを付けると new Car()で作った全てのオブジェクトからその同じメソッドを利用できます。 コンストラクタでオブジェクトに直接代入しても良いですが、 そうすると全てのオブジェクトのために新しく関数を作ることになるので無駄です。 同じで良いものはprototypeプロパティに定義し、 違う内容でないといけないものは、コンストラクタで定義するのが流儀です。

関連するQ&A

  • js array -1

    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 />"); } document.write("<p>"); var ary = new Array("東京", "大阪", "名古屋"); for (var i = 0 ; i < ary.length ; i++){ print("array[" + i + "] = " + ary[i]); } document.write("</p>"); document.write("<p>"); try{ var ary2 = new Array(-1); }catch(e){ print(e); } document.write("</p>");</script> </body> </html> 30行目try文の中の「 var ary2 = new Array(-1); 」なのですがnewで初期化をしているという事は何となく理解できるのですが 引数で-1を指定しているのですが-1を指定する意味は何かあるのでしょうか?

  • js 引用符

    <!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> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。

  • [JS] IEでjavascriptを呼び出せない

    ページの読み込み時にリンク先をjavascriptの関数に変更しています。 IEではlocalhostなら変更後の関数を呼び出せるのですが、 IPでアクセスすると変更後の関数を呼び出せていないようです。 FF/Chrome/Operaではいずれの場合もうまくいきます。 具体的には、IEで以下のhtmlを http://localhost/ で読み込むと"change"をクリックで"changed!"に変更される http://192.168.0.1/ で読み込むと"change"をクリックしても何も変わらない。 何が問題なのでしょうか。 +++問題のindex.html++++++++++++++++++ <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <body> <a href="#" id="change">change</a> <div id="test">TEST</div> <div> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> t = new test(); function test(){ var self = this; self.change = function(arg){ document.getElementById("test").innerHTML = "changed!"; return false; } } document.getElementById("change").setAttribute("onclick", "return t.change();"); </script> </div> </body> </html> +++++++++++++++++++++++++++

  • js プログラムの意味

    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> var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']; var text = this; function and(method, text) { return function() { return method.apply(text, arguments); }; } for (var i = 0, l = methods.length; i < l; i++) { text[methods[i]] = and(text[methods[i]], text); console.dir(text); console.log(text); } </script> </body> </html> console.dirとconsole.logで中身を見てみるも何をしてるのかわからなくて... 推測でも構わないので何かあればお願いします。説明不足でスミマセンm(__)m

  • moment.js

    moment.js moment.jsで秒の部分(17:00:「00」)を削るにはどうしたら良いでしょうか? 以下ソースです。 <!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 src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> var now = moment(); console.log(now.toDate()); // Dateオブジェクトが返される // 文字列からも生成できるし var shougatsu = moment('2015-01-01'); console.log(shougatsu.toString()); // "Thu Jan 01 2015 00:00:00 GMT+0900" // もちろんDateオブジェクトからも生成できる var kodomonohi = moment(new Date('2015-05-05')); console.log(kodomonohi.toString()); // "Tue May 05 2015 09:00:00 GMT+0900" </script> </body> </html> コンソールログで表示をしているのですが何時何分何秒の「秒」の部分を非表示にしたい場合どうしたら良いでしょうか?

  • トリッキーなJSの文法(prototype.jsなど)が分かりません

    Ajaxの「prototype」( http://www.prototypejs.org/ )などで 下記のようなfunctionの記述方法をよく見かけます。 ▼Prototype.js(ver1.5.0) 20行目抜粋 ---------------------------------------- var Class = {  create: function() {   return function() {    this.initialize.apply(this, arguments);   }  } } -------------------------------------------- でも、私には高度すぎて以下の点がどうしても読み解けません。  (1)var Class = {~~~~~~} が、何をしているのか分かりません。    配列なら[ ]ですし関数か何かを省略した宣言の記述方法なのでしょうか?  (2)create: が何なのか分かりません。必死で調べたら型を宣言しているような感じでしたが、    見慣れない「:」を使ったプログラムで検討もつきません。 私が知っているfunction宣言はこの2パターンのみしか知りません。 ・一般的なfunction宣言  function test(hikisu){   //処理内容  } ・無名関数でのfunction宣言  var a = function(x) {   //処理内容  } ぜひ教えていただけませんでしょうか。 どうぞよろしくお願いします。

  • JavaScriptを使ってWebページにメッセージを表示させる

    html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。(←Firebugでエラーが検出されます) どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");

  • PHPとJavascriptの連携について

    PHP・Javascriptの初心者です。 PHPで設定された、配列のデータをJavascriptで作成した関数の渡したいのですが どうすればいいのでしょうか? 以下にサンプルを作成したのですが PHPで設定した、配列 $name が Javascriptに渡せません。 何が悪いのですか? 教えてください。 よろしくお願いします。 -sample.php- <!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" /> <!-- CSS: implied media="all" --> <link type="text/css" rel="stylesheet" href="css/websyslogin.css" /> <!-- JavaScript loading --> <script src="js/websysdebug.js"></script> <script type="text/javascript"> function sysdebug( ss ){ alert( "Login -> "+ss ); } </script> <!-- タイトル --> <title>Vware Web System(PHP) </title> </head> <body> <?php $name = array(); $name[0] = "ABC"; $name[1] = "BCA"; ?> <input type="button" value="TEST" name="debug" id="debug" onclick="sysdebug(' <?php print $name[0]; ?> ');" /> <script type="text/javascript"> for( i=0;i< 2;i++ ) { ss = ' <?php print $name['+i+']; ?> '; alert( ss ); } </script> </body> </html>

    • ベストアンサー
    • PHP
  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • prototype.jsとjquery.jsの併用がうまくいきません。

    prototype.jsとjquery.jsの併用がうまくいきません。 2つの機能をページに組み込みたいと思っています。 (1)横並びの画像が自動的にスクロールする (2)画像をクリックすると、ライトボックスで表示する 参考にしたのは下記のサイトです。 http://logicbox.net/jquery/simplyscroll/ http://www.lokeshdhakar.com/projects/lightbox2/ しかし、実際にページを作ってみるとどちらかの機能しか有効になりません。 どちらもいくつかのjsファイルを<script>タグで読み込みますが、 後から読み込んだ方しか有効に機能しないのです。 スクロールの方はjquery.jsを、ライトボックスの方はprototype.jsを使っているのですが、 それが良くないのでしょうか。 両方を機能させるにはどう直したらいいのか、ご教授下さい。 もしくは、両方がうまく機能しているサイトがあれば、URLを教えて下さい。 よろしくお願いします。

専門家に質問してみよう