• ベストアンサー

コンストラクタ?

Wernerの回答

  • Werner
  • ベストアンサー率53% (395/735)
回答No.2

すでに回答がありますが、せっかく書いたのでとりあえず。 ------------------------------------------------------ <script type="text/javascript"> //コンストラクタ function NewClass(){ //プロパティ this.ClassValue1 = "value1<br>"; //プロパティ、this.ClassValue2と書くのと同じ this["ClassValue2"] = "value2<br>"; alert('わん'); } //メソッド NewClass.prototype.method1 = function(a){ return "method1:"+a+"<br>"; } var ClassTest = new NewClass(); document.write( ClassTest.ClassValue1 ); document.write( ClassTest.ClassValue2 ); document.write( ClassTest.method1("test") ); </script> ------------------------------------------------------ > webで調べても正しいコンストラクタの書き方 というのが見つけ切れませんでした。 このページはどうですか? http://www.tokumaru.org/JavaScript/

zuntata99
質問者

補足

参考コード、およびwebサイトありがとうございます。 参考サイトでは、 function Point(x, y) { this.x = x; this.y = y; } var p = Point(10, 20); document.writeln("p(", p.x, ", ", p.y, ")"); というコードが紹介されていますが、 ??の部分が理解できません。 このコードの場合、クラスの定義はどこで、コンストラクタはどれになるのでしょうか?また、オブジェクトの生成(インスタンス?)はどこで行っているのでしょうか? function Point(x, y) { //ユーザ定義クラスの作成? this.x = x; //クラスメンバーの定義? this.y = y; //クラスメンバーの定義? } var p = Point(10, 20); //??newを使わずにオブジェクトを生成? document.writeln("p(", p.x, ", ", p.y, ")");

関連するQ&A

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

    ネットで検索したりして調べているのですがいまいちわからなかった箇所が あるので質問させていただきます。 コンストラクタで設定するのとプロトタイプで設定する違いがいまいちわかりません。 例えば 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>

  • コンストラクタすると同時にメソッドをオーバーロードするには?

    コンストラクタすると同時にメソッドをオーバーロードするには? リスナー関数で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を勉強中なのですが、 コンストラクタについて質問です。 下記のようなコードの場合、document.getElementByIdで取得したID 以外、使いまわしが出来ませんが、 コンストラクタを使って、1ページで複数使用出来るようにするには、 どのように記述すれば良いのでしょうか? //-----JavaScript----- function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } var c,y,m,d; addEvent(window,"load",function(){ c = document.getElementById("customer_birthday_c"); y = document.getElementById("customer_birthday_y"); m = document.getElementById("customer_birthday_m"); d = document.getElementById("customer_birthday_d"); if(c.options[0].selected == true){ y.disabled = true; m.disabled = true; d.disabled = true; } }); //-----JavaScript----- どなたかご教授ください。 宜しくお願いいたします。

  • useless setTimeout cal 

    すみません。教えて下さい。 下のコードを書いて、動きはするんですが、実行後に 「useless setTimeout cal」というエラーが出てしまいます。 エラーを回避したいのですが、どうすればいいのでしょうか。 IE6/IE8/firefox3.6 などで試しました *********************************** <html> <head> <script type = 'text/javascript'> function item(){ var i = 0; write(); function write(){ document.write(i+"<br>"); i ++; if(i<10){setTimeout(write(),100);} } } </script> </head> <body> <script type = 'text/javascript'>item();</script> </body> <html> ***********************************

  • JavaScriptの論理演算子について

    JavaScriptの論理演算子について質問です。 「alert(e.target||e.srcElement);」の結果がtrue かfalseではなくて「object HTMLHtmlElement」となるのは何故なのでしょうか? JavaScriptでは"||"は論理演算子ではないのでしょうか? ----------------------------------------------------------------------- <body> <a id="id1">Textarea</a> <script> (function () {   var i = document.getElementById ("id1");   document.addEventListener("dblclick", addEL, false);   function addEL (e) { alert(e.target||e.srcElement);   } }) (); </script> </body>

  • イベントの関数について、よくわからないことがあります。

    イベントの関数について、よくわからないことがあります。 (1)引数をセットしない関数と window.document.onmousemove = f; function f(evt) { alert(evt); } (2)無名関数?に引数 window.document.onmousemove = function(e) { alert(e); } (1)(2)は同じ動作なのですが、window.document.onmousemoveにセットする関数の引数は 特殊なのでしょうか?

  • validateForm firefoxでalertが表示されません

    java scriptについて質問です。 ホームページ内のプルダウンメニューで、項目が選択されていない状態で「submit」ボタンが押された場合、「~を選択してください」というメッセージを表示させたいと思います。 そこで以下のようなfunction validateFormを書いたのですが、alertがIEでは表示されるのにfirefoxでは表示されません。 function validateForm() { if (document.form1.Prop1.options.value == 'Error') { alert('Please select aaa.') document.form1.Prop1.focus() return false } if (document.form1.Prop2.options.value == 'Error') { alert('Please select bbb.') document.form1.Prop2.focus() return false } if (document.form1.Prop3.options.value == 'Error') { alert('Please select ccc.') document.form1.Prop3.focus() return false } if (document.form1.Prop4.options.value == 'Error') { alert('Please select ddd.') document.form1.Prop4.focus() return false } if (document.form1.Prop5.options.value == 'Error') { alert('Please select eee.') document.form1.Prop5.focus() return false } } firefoxでもalertを表示させるには、どのようにすればいいでしょうか? 教えてくださいませ。よろしくお願いします。

  • jQueryを使用してxmlを取得 ieでエラー

    wordpressで固定ページからxmlを出力するテンプレートを選択してます。 ページにアクセスした時に吐き出されるxmlは <?xml version='1.0' encoding='UTF-8' ?> <common> <days>01</days> <days>02</days> <days>03</days> <days>04</days> <days>05</days> <days>06</days> </common> です。 別のhtmlファイルの方でjQueryで <script> $(document).ready(function () { $.ajax({ type: "GET", url: "xmlをはきだすアドレス", dataType: "feed", success: xmlParser, error: function(){ alert('Error loading XML document'); } }); }); function xmlParser(xml) { alert($(xml).children("days").length); } </script> と書いています。 この場合firefoxやsafari,chromeではalertで6と表示されますが ie6,7,8だと0となってしまいます。 どなたかieでもalertで6と表示させる方法を知っている方いませんか?

  • jqueryでajaxsuccessの内側this

    いつもお世話になっております jqueyで質問なのですが、ajaxの成功したときに起動する successの内側で$(this).val()を呼び出し、CSSにアクセスしたいのですが 期待した動作にはなりません。 期待する動作 それぞれクリックすると「1」「2」「3」と出て背景が赤くなる。 実際の動作 エラー「e.nodeName is undefined」となります。 どなたか、successの内側から$(this)にアクセスする方法をご存知の方いらっしゃいませんでしょうか 他の方法で期待の結果になるようにではなく、successの内側から$(this)にアクセスする方法が知りたいです お忙しい中恐縮ですが、分かる方がいたら嬉しいです <input class="hoge" value="1" /> <input class="hoge" value="2" /> <input class="hoge" value="3" /> <script type="text/javascript"> $(document).ready(function() { $('.hoge').click(function(){ $.ajax({ url: "some.html", cache: false, success: function(){ alert( $(this).val() ); $(this).css('background-color','red'); } }); }); }); </script>

  • 入力した文字をalertで表示するスクリプトを作っています。

    入力した文字をalertで表示するスクリプトを作っています。 以下、IEとOperaでは動作しますが、FirefoxとGoogle Chromeでは動作しません。 書き方が悪いのでしょうか? <html> <head> <script language=JavaScript> <!-- function test(){ alert(input1.value); } // --> </SCRIPT> </HEAD> <BODY> <input type="text" name="input1"> <input type="button" value="テスト" onClick="test()"> </html>