オブジェクトとメソッドの定義の分離
- JavaScriptでオブジェクトとメソッドを分離して定義する際に、エラーが発生します。
- コードの実行時に「this.getSize is not a function」というエラーが表示されます。
- このエラーの原因を特定し、解決する方法を知りたいです。
- ベストアンサー
オブジェクトとメソッドの、定義の分離
JavaScriptにて、最初にメソッド用の関数を定義しておいた後、それを複数のオブジェクトのメソッドとして利用するようにしたいのですがうまくいきません。 *************************** <html> <head> <title>test</title> <script type="text/javascript"> function a() {return this.size;} function b(s) {this.size = s;} function rectA() { this.size = 0; this.getSize = a; this.setSize = b; this.notice = function() {alert(this.getSize());} } function rectB() { this.size = 0; this.arg = 90; this.getSize = a; this.setSize = b; this.notice = function() {alert(this.getSize());} } </script> </head> <body> <script type="text/javascript"> var a = new rectA; var b = new rectB; a.setSize(12); b.setSize(250); a.notice(); b.notice(); </script> </body> </html> ************************* 要するに↑のコードのようなことをやりたいのですが、FireFox3.6と12.1で実行した限りでは、a.notice()は実行されるものの, b.notice()の段階では「this.getSize is not a function」というエラーが出てしまいます。 上手な解決法がありましたらお願いします。
- plot02
- お礼率84% (27/32)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ユーザー関数名が上書されていませんか？試しに var x = new rectA; var y = new rectB; x.setSize(12); y.setSize(250); x.notice(); y.notice(); としてみてください？
関連するQ&A
- JavaScriptの変数をjavaのメソッドの引数に渡す
JavaScriptの変数をjavaのメソッドの引数に渡すことはできますか？ <%@ page contentType="text/html; charset=Windows-31J" %> <%! String chek(String a){ String st = a; return st; } %> function chek(){ var a1 = "abcd"; var a2= "<%=this.chek(%>ai<%=)%>"; alert(a2); }
- 締切済み
- JavaScript
- 静的メソッドとインスタンスメソッドを定義する方法
簡単な、カウンタクラスからのインスタンス作成とその利用のテストを行いました。 テストとして作成した以下の内容のファイルをブラウザ(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>
- ベストアンサー
- JavaScript
- javascriptでのオブジェクト参照について
asp.netを使用しています。 javascriptで半角カナが入力されたら、アラートを出す処理を行いたいと思っていて、以下のようなプログラムをネットで拾ってきました。やりたいことはこれで可能なのですが、問題が...。 javascript部分とhtml部分を分けて、 <script language="JavaScript" src="kana_check.js"> </script> 汎用性が高い処理ですので、外部ファイルとして読み込んで使用したいと考えています。 ですが、script部分を外部ファイルに分けて、読み込んで使用しようとすると、「オブジェクトを指定してください」というエラーが出てしまいます。恐らく、オブジェクト参照がうまくできていないのだと思うのですが、どういう風に指定していいのかが分かりません。 （以前も、同じくオブジェクト参照について質問した事があるのですが、今回もどうしていいものか...） ご教授いただけないでしょうか？よろしくお願い致します。 <html> <head> <title></title> <script> <!-- function hkCheck(myFIELD){ baseStr=myFIELD.value; for(i=0;i<baseStr.length;i++){ var targetStr=baseStr.charAt(i); if(targetStr>="。"&&targetStr<="゜"){ alert("半角カナは使用できません"); myFIELD.focus(); return ; } } } --> </script> </head> <body> <form runat="server"> <input type="text" size="16" id="tb_a" name="tb_a" onBlur="hkCheck(this.form.tb_a)" runat="server" /><br> <input type="text" size="16" id="tb_b" name="tb_b" onBlur="hkCheck(this.form.tb_b)" runat="server" /><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- Arrayオブジェクトのsort（）メソッド
テキストに書いているArrayオブジェクのsort()メソッドを実行しました。 ソースコードは以下のとおりです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <title>Arrayオブジェクトのメソッド</title> <script type="text/javascript"> </script> </head> <body bgcolor="#FFFFFF"> <p style="font-size:200%"> <script type="text/javascript"> var ages = new Array(4, 6, 10, 24, 1, 11, 40); ages = ages.sort(); document.write(ages.join(" > ")); </script> </p> </body> </html> すると、ブラウザにこのように表示されました。 （ちなみに > は矢印記号で大小を比べるものではありません。） 1 > 10 > 11 > 24 > 4 > 40 > 6 これを見る限り数字の順番が変わっています。 テキストでは、これを「文字列として昇順に並び替えた」と書かれているのですが、私の知識の足りなさから意味がよく分かりません。 ただ、昇順の意味は分かっているつもりです。 もし、昇順に並び替えるのなら、 1 > 4 > 6 > 10 > 11 > 24 > 40 のようになるのではないでしょうか。 頭の悪い私のために是非ともアドバイスを頂ければ大変助かるのですが。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- 下記コードのようなオブジェクトとか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> ---------------------------------------------------- ここ数日いろいろ弄っているのですが、 いまいちピンと来ない感じです。 何か、参考になるようなスクリプトやポイントなどありましたら、 ご紹介いただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- コンストラクタすると同時にメソッドをオーバーロードするには？
コンストラクタすると同時にメソッドをオーバーロードするには？ リスナー関数でthisの参照先が変わってしまう問題に悩んでいます。 <!-- 方法(1) コンストラクタした後にメソッドを上書きする --> <p id="Test">test</p> <script type="text/javascript"><!-- function Hello (value){ this.value = value ? value : 'Hello, World!'; } Hello.prototype.start = function (event) { alert(this.value); } var world = new Hello(); var start = function (event) { world.start.call(world, event); }; // thisがworldを参照するようにstartメソッドを作り直す document.getElementById('Test').addEventListener('click', start, false); //--></script> 上記コードは期待通りの動作ですが、せっかくコンストラクタしたにも関わらず、メソッドを上書きしなくてはなりません。 コンストラクタした時点でstartメソッドが完成しているのが理想です。 (以下、全角空白は半角空白に置換してください) <!-- 方法(2) クロージャでメソッドを生成する --> <p id="Test">test</p> <script type="text/javascript"><!-- function Hello (value) { function start (event) { alert(this.value); } this.value = value ? value : 'Hello, World!'; this.start = (function(that){ return function (event) { start.call(that, event); that = null; }; })(this); } var world = new Hello('Hello, World2!'); document.getElementById('Test').addEventListener('click', world.start, false); //--></script> こちらは完全に期待通りの動作を示しますが、prototype を使用していないのが少し気になります。 <!-- 方法(3) クロージャで prototype.start を上書きする --> <p id="Test">test</p> <script type="text/javascript"><!-- function Hello (value) { this.value = value ? value : 'Hello, World!'; this.start = (function(that, start){ return function (event) { start.call(that, event); that = start = null; }; })(this, this.start); } Hello.prototype.start = function start (event) { alert(this.value); }; var world = new Hello('Hello, World2!'); document.getElementById('Test').addEventListener('click', world.start, false); //--></script> 結果としては期待通りのコードになったのですが、以下の点が気になっています。 ・方法(2)、方法(3) を比較すると、それぞれどのようなメリット、デメリットがあるのか。(prototypeが高速と聞いてからは (3) に傾いているのですが、よくわかっていません) ・コンストラクタ時に発動する特別なメソッド、プロパティが用意されているのか。 ・クロージャを使わずに解決できるのか。 ・全く別の方法(もっと良い実装)があるのか。 コードの書き方は千差万別だとは思いますが、主観で結構ですので、アドバイスいただければ幸いです。 # start() はサンプル故に短いコードですが、実際には比較的長いコードがある状態を想定しています。
- ベストアンサー
- JavaScript
- ファイルサイズの取得について
初めてのJavaScriptです、宜しくお願いします。 フレームページで左ページから右ページのファイルサイズを調べる事はできますか？ <script type="text/javascript"> function getSize(){ document.write(parent.rightFrame.document.fileSize); } </script> </head> <body><!-- leftFrame --> <p><a href="http://www.yahoo.co.jp" target="rightFrame">ヤフー</a></p> <p><a href="javaScript:getSize()">サイズ</a></p> </body>
- 締切済み
- JavaScript
- Arrayオブジェクトとforms配列
以下のスクリプトを実行すると、(2)の所で「document.forms.GetFromArray is not found」 のエラーとなります。（ブラウザはFirefox）。 意図としてはArrayオブジェクトをカスタマイズして追加したGetFromArray()メソッドでforms配列を操作したいのですが．．． エラーメッセージからすると、「document.formsは配列(Arrayオブジェクト)では無い」と言っているようです。 この方法でforms配列を参照する方法を教えて下さい。 あるいは、Arrayオブジェクトではない、他のオブジェクトをカスタマイズするのでしょうか？お願いします。 <html> <head> <script type="text/javascript"> <!-- Array.prototype.GetFromArray=function(func){ for(var i=0;i<this.length;i++){ func(this[i]); } } function disp1(h){ alert(h); } function disp2(h){ alert(h.name); } function run(){ var array=new Array('dog','cat','fish'); array.GetFromArray(disp1); //(1) ＯＫ document.forms.GetFromArray(disp2); //(2) エラー } //--> </script> </head> <body> <form name="test"> <input type="text" name="bunrui" value="分類">/ <input type="text" name="detail" value="詳細">/ <input type="button" value="実行" onClick="run();"> </form> </body> </html>
- ベストアンサー
- JavaScript
- オブジェクトでサポートされていないプロパティまたはメソッドです。
jQuery にて初のサイト構築に試みたのですが、 <script type="text/javascript"> (function() { $.mailbox(); })(jQuery); </script> ↑の記述だと IE6 の場合のみ 『オブジェクトでサポートされていないプロパティまたはメソッドです。』 とエラーが帰ってきてしまいます。 どうかご教授願います。宜しくお願い致します。
- 締切済み
- JavaScript
- ownerDocumentの使い方を知りたいです。
javascriptの.ownerDocumentの使い方を知りたいです。 https://developer.mozilla.org/ja/DOM/element.ownerDocument のサイトを参考に実際にいろいろ試してみました。 ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test1() { var a = 123; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test1()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test2() { var a = this.ownerDocument; document.write(a); } </script> <div> <span onclick="test2()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test3() { var a = this; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test3()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー 全てundefinedとなり、そのまま固まってしまいます。 .ownerDocumentはどのように使うのでしょうか。 アドバイスをよろしくお願いします。
- ベストアンサー
- JavaScript
お礼
問題はまさにそれでした。 名前の衝突について、考えが至っていませんでした。 回答、ありがとうございました。