JavaScriptプロトタイプでのエラーと解決方法

このQ&Aのポイント
  • JavaScriptのプロトタイプに関するエラーについて解説します。
  • エラーメッセージ「TypeError: Cannot set property 'totalPrice' of undefined」が返される原因とは?
  • プロトタイプでメソッドを定義する際のポイントについて詳しく説明します。
回答を見る
  • ベストアンサー

JavaScript プロトタイプについて

●質問の主旨 下記のコードを書くとエラーとして、 TypeError: Cannot set property 'totalPrice' of undefined が返されます。なぜでしょうか?原因が分かりません。 個人的には、このコードで、totalPriceメソッドを定義しているつもりなのですが…。 お詳しい方がいらっしゃいましたら、ご教示願います。 ●コード function Menu(name, price) { this.name = name; this.price = price; } var hamburger = new Menu("ハンバーガー", 100); hamburger.prototype.totalPrice = function(quantity) { return this.price * quantity; } var cheeseburger = new Menu("チーズバーガー", 120); cheeseburger.prototype.totalPrice = function(quantity) { return this.price * quantity; } output("太郎は、" + hamburger.name + "を" + hamburger.totalPrice(5) + "円分買いました。"); output("二郎は、" + cheeseburger.name + "を" + cheeseburger.totalPrice(3) + "円分買いました。"); ●元ネタ CodeStudy Javascript 4.プロトタイプ その3 http://jeek.jp/study/section21/4

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

  • ベストアンサー
  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.1

prototypeの意味を誤解していますね。 >TypeError: Cannot set property 'totalPrice' of undefined hamburgerには、prototypeというプロパティが無いのでundefinedが返り、そのundefinedのプロパティに代入しようとしているので失敗します。 案1: hamburger.totalPrice = function(quantity) { return this.price * quantity; } 案2: Menu.prototype.totalPrice = function(quantity) { return this.price * quantity; }

dradra33
質問者

お礼

notnotさま コメントありがとうございます。 「案2」の方を使わせていただきました。 ●コード function Menu(name, price) { this.name = name; this.price = price; } var hamburger = new Menu("ハンバーガー", 100); hamburger.totalPrice = function(quantity) { return this.price * quantity; } var cheeseburger = new Menu("チーズバーガー", 120); Menu.prototype.totalPrice = function(quantity) { return this.price*quantity; } output("太郎は、" + hamburger.name + "を" + hamburger.totalPrice(5) + "円分買いました。"); output("二郎は、" + cheeseburger.name + "を" + cheeseburger.totalPrice(3) + "円分買いました。");

関連するQ&A

  • 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() を作るとゴミが出る気がするのですが、勝手に解放されるのでしょうか。

  • 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

  • javascriptについて

    現在HPを作成していてjavaのプルダウンメニューを設置していますが 最初からメニューが開いた状態になります。ちなみにsdmenu.jsを使用しています。 最初開いた時にメニューが閉じるようにできますでしょうか? function SDMenu(id) { if (!document.getElementById || !document.getElementsByTagName) return false; this.menu = document.getElementById(id); this.submenus = this.menu.getElementsByTagName("div"); this.remember = true; this.speed = 4; this.markCurrent = true; this.oneSmOnly = false; } SDMenu.prototype.init = function() { var mainInstance = this; for (var i = 0; i < this.submenus.length; i++) this.submenus[i].getElementsByTagName("span")[0].onclick = function() { mainInstance.toggleMenu(this.parentNode); }; if (this.markCurrent) { var links = this.menu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) if (links[i].href == document.location.href) { links[i].className = "current"; break; } } if (this.remember) { var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); var match = regex.exec(document.cookie); if (match) { var states = match[1].split(""); for (var i = 0; i < states.length; i++) this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); } } }; SDMenu.prototype.toggleMenu = function(submenu) { if (submenu.className == "collapsed") this.expandMenu(submenu); else this.collapseMenu(submenu); }; SDMenu.prototype.expandMenu = function(submenu) { var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var links = submenu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) fullHeight += links[i].offsetHeight; var moveBy = Math.round(this.speed * links.length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight + moveBy; if (newHeight < fullHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = ""; mainInstance.memorize(); } }, 30); this.collapseOthers(submenu); }; SDMenu.prototype.collapseMenu = function(submenu) { var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight - moveBy; if (newHeight > minHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = "collapsed"; mainInstance.memorize(); } }, 30); }; SDMenu.prototype.collapseOthers = function(submenu) { if (this.oneSmOnly) { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); } }; SDMenu.prototype.expandAll = function() { var oldOneSmOnly = this.oneSmOnly; this.oneSmOnly = false; for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className == "collapsed") this.expandMenu(this.submenus[i]); this.oneSmOnly = oldOneSmOnly; }; SDMenu.prototype.collapseAll = function() { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); }; SDMenu.prototype.memorize = function() { if (this.remember) { var states = new Array(); for (var i = 0; i < this.submenus.length; i++) states.push(this.submenus[i].className == "collapsed" ? 0 : 1); var d = new Date(); d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); } };

  • javascript new演算子について質問があります。

    javascript new演算子について質問があります。 只今javascript勉強中なのですが、どこかのサイトでnew演算子は悪いパーツとの 記事を読みました。 そこでnew演算子を使用せずにオブジェクト生成の方法を試行錯誤考えてみたのですが (IE用に__proto__もなしで)例えば以下コードはアリなコードでしょうか?? あるいはありえない感じでしょうか?? またnewが悪なのはインスタンスを作る時にnewを付け忘れると、 グローバルな汚染をしてしまうということだけなのでしょうか?? オブジェクトとプロトタイプの理解に苦しんでいるところなので 色々と曖昧なのですが、どなたかどうぞご教授お願い致します。 var obj = {}; obj.method = function(){ this.prop1 = "hoge" return this; }; obj.method.prototype = obj.method(); obj.method.prototype.prop2 = "fuga"; var obj2 = obj.method(); console.log(obj2)

  • prototypeに二つ以上の暗黙の参照を持たせることはできない?

    var NAMESS = {   org:{ } } NAMESS.org = {   clsFoo : function( ){     this.foo = function( ){       alert("foo");     }   }   ,clsBar : function( ){     this.bar = function( ){       alert("bar");     }   }   ,clsHoge : function( ){ } } NAMESS.org.clsHoge.prototype = new NAMESS.org.clsFoo( ); NAMESS.org.clsHoge.prototype = new NAMESS.org.clsBar( ); 上記コードではclsHogeはclsBarのみ継承し、clsFooを継承できません。(代入しているので当たり前かもですが‥) これを NAMESS.org.clsHoge.prototype.foo = new NAMESS.org.clsFoo( ); NAMESS.org.clsHoge.prototype.bar = new NAMESS.org.clsBar( ); というようにする方法は知ってはいますが、 できればfooとbar両方を暗黙の参照にしたいと考えています。 JavaScriptでは二つ以上の継承はできないのでしょうか? よろしくお願いします。

  • thisとvar ?

    javascript初心者です。 コンストラクタ(プロトタイプ)とクロージャを学んでいますが、 コンストラクタ(プロトタイプ)では、関数内にthisで変数宣言、クロージャはvarで宣言しています。 この違いの理由は何でしょうか?漠然とした質問ですみません。 thisとvarでの変数宣言の違いなど教えていただけないでしょうか? コンストラクタ-------------------- function Person(n){ this.name = n; } Person.prototype.city = 'Tokyo'; Person.prototype.moveTo = function(c){ document.write(this.name + ': Moving to... ' + c + '<br>'); Person.prototype.city = c; } クロージャ------------------- function Person(n, a){ var name = n; var age = a; return { getName: function() { return name; }, setAge: function(i){ if( 0<= i ){ age = i; } }, getAge: function(){ return age; } } }

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

    constructorプロパティとは、 オブジェクトの初期化で使用されたコンストラクタ関数を参照 とのことなので、下記2パターンのPGを作成しました 1.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; } 2.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プロパティに関してのみ質問した次第です) ネット、書籍等で調べたのですが、検討がつかない状態です。 お手数ですが、ご教授お願い致します。

  • prototypeで前の値を潰さない方法は?

    function obj() { this.name = "名前です"; } var obj01 = new obj(); alert(obj.name); というコードの場合、obj.nameでobj関数に設定されたnameプロパティの値「名前です」をアラートすることができます。このobj関数を変更せず、あとからプロパティと値を追加したい場合、prototypeメソッド(って言って間違いありませんか?)を用いて以下のように実現することができます。 function obj() { this.name = "名前です"; } obj.prototype.age = "年齢です"; var obj01 = new obj(); alert(obj.name+" / "+obj.age); newする前に記述するのがポイントなんですよね。これにより、obj関数(オブジェクト)にageというプロパティと値「年齢です」が追加され、アラートできるようになりました。また最近、連想配列を使うことで複数のプロパティと値を一気にセットできる便利な方法を発見しました。 function obj() { this.name = "名前です"; } obj.prototype.age = "年齢です"; obj.prototype = { "country":"日本出身です", "city":"東京出身です", "hobby":"音楽鑑賞です" }; var obj01 = new obj(); alert(obj.country+" / "+obj.city+" / "+obj.hobby); //alert(obj.age); //alert(obj.name); と、このように複数のプロパティと値をセットし、後で利用することができます。 前置きが長くてすみません、ここからが質問です。 最後の例の場合、連想配列によってセットされたプロパティの値は存在しますが、それ以前にprototypeで設定したageプロパティは存在しなくなっています。alert(obj.age)の行をコメントアウトしていますが、実行するとundefinedと表示されます。そして2つ目のコメントアウト行alert(obj.name);は問題なくnameプロパティの値をアラートできています。 つまり、prototypeメソッドを使って先に追加したプロパティと値は、「obj.prototype=連想配列」で実行した時点で潰されてしまっているようでした。 この連想配列を使ったプロパティ追加を行う際、先に「obj.prototype.プロパティ名」で追加していたプロパティと値を残しておく方法はありませんでしょうか?

  • JavaScriptのthisの挙動について

    JavaScriptで次のCodeのようなコードを書いて実行したところ、Outputのようになります。 原因は、thisが保持できていなかったからです。 ※先頭に#が付いているのが問題の箇所です。 Code: Array.prototype.rs = function() // rs = random sort { var ret = { list: new Array(), length: new Number() }; # var obj = { # list: this # }; var tmp = { index: new Number(), length: obj.list.length }; while((ret.length = ret.list.length) < tmp.length) { tmp.index = Math.floor(Math.random() * (tmp.length - ret.length)); ret.list[ret.length] = obj.list[tmp.index]; obj.list.splice(tmp.index, 1); } return ret.list; } var list = new Array(1,2,3,4,5,6,7,8,9); alert(list.rs()); alert(list.rs()); Output: アラートウィンドウで 2,4,6,9,3,5,1,8,7 (一例) アラートウィンドウで 出力無し 要するに、thisをobj.listに入れて、thisには触っていないのに、obj.listと同期してthisが消えているのです。 Code中で先頭に#を付けた部分を次のように変更すると期待通りに動作しましたが、腑に落ちません。 # var obj = { # num: this.join('') # }; # obj.list = obj.num.split(''); もっと簡潔な書き方や、迅速に動く書き方があればご教授頂きたいです。

  • JavaScript 保守性の高めたい 2

    マジックナンバーを排除して、保守性の高いコードを書きたいです。前回も保守性を高めたいと質問させていただきお世話になりました。 例えば、 <table border="1">  <tr>   <td onclick="users['NkxyZ'].show();">User</td>  </tr>  <tr>   <td onclick="users['BkcSk'].show();">User</td>  </tr>  <tr>   <td onclick="users['HnViOj'].show();">User</td>  </tr> </table> 上記のHTMLを生成する、以下のコードがあります <script> // メイン  var users = {'NkxyZ': new User("Taro", 41),          'BkcSk': new User("Hanako", 17),          'HnViOj': new User("Harushige", 8)};  var usersTable = new UsersTableBuilder();  document.write(usersTable.getTable(users)); </script> <script> // 以下のコードは外部ファイルで、読み込み済みです  // ユーザを管理するクラス  var User = function(name, age){   this.name = name;   this.age = age;  }  User.prototype.show = function(){   alert(this.name +" ("+ this.age+")");  }    // ユーザテーブルを返すクラス  var UsersTableBuilder = function(){   this.tagId = 'users_table';  }  UsersTableBuilder.prototype.getTable = function(users){   var out = "<table border='1'>";   for(var id in users){    out += "<tr><td onclick=\"users['"+ id +"'].show();\">User</td></tr>"   }   out += "</table>";   return out;  } </script> このコードで私が一番気に入らないのは、UsersTableBuilderのgetTable()メソッドです。このメソッドのfor文内の  "<tr><td onclick=\"users['"+ id +"'].show();\">User</td></tr>" では User#show()メソッドが文字列で表現されてしまっています。show()がマジックナンバーぽくなってしまっています。このままでは、Userクラスでshow()メソッドの名前を変えた時などに、変更し忘れになるかもしれません。 JavaのEclipseには変数名を変更できるリファクタリング機能がありますが、そのような機能が使えるJavaScriptの開発環境の時、文字列の状態のコードだと検出できなさそうなので、どうにかして、プログラムの文字列表現から抜け出したいです。 よろしくお願いします。

専門家に質問してみよう