• 締切済み

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では二つ以上の継承はできないのでしょうか? よろしくお願いします。

みんなの回答

回答No.1

普段prototype.jsは使ってないのですが、extendというメソッドがあったと思うので、それを利用することで継承できるんじゃないかな?と思います。 間違っていたらすいません。

参考URL:
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
OKbokuzyo
質問者

お礼

回答ありがとうございます。 >>普段prototype.jsは使ってないのですが prototype.jsの話ではなく、プロトタイプチェーン等の、prototypeプロパティのことです。 また、せっかく回答を頂きながら誠に勝手ではありますが自己解決いたしました。 コンストラクタに継承先クラスを呼び出すようにするといいようです。 例) clsHoge  :  function( ){   var barExtend = NAMESS.org.clsBar;   barExtend( );   var fooExtend = NAMESS.org.clsFoo;   fooExtend( ); } あるいは一行で、 clsHoge  :  function( ){   NAMESS.org.clsBar.call(this);   NAMESS.org.clsFoo.call(this); } すっきりする後者の方がいいような気がします。 また、以下のようなコードも試してみましたが、これはNGのようです。 clsHoge  :  function( ){   NAMESS.org.clsBar( );   NAMESS.org.clsFoo( ); } これがNGになる理由はよくわかりませんが、一応解決はできました。 (まだまだ勉強不足のようです。)

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

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

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

  • JS 親functionのフィールドを参照したい

    ボタンをクリックすると、任意の文字がalertで表示されるHTMLを生成するプログラムをJavaScriptで(JQueryを使用しています)書いています。 イメージは、 <button onclick='alert(任意の文字列)'>CLICK ME!</button> のようなHTMLです。 JavaScript部分は以下です。 var ButtonMaker = function(msg){    this.msg = msg; } ButtonMaker.prototype = {    getButton: function(){       var button = $('<button>').text('CLICK ME!');       button.click(this.eventMaker());       return button;    },        eventMaker: function(){       var that = this; // ←これをしたくありません       return function(){          alert(that.msg);       }    } } // 以下のようにして使います var bmaker = new ButtonMaker('This is a message.'); $(document.body).append(bmaker.getButton()); 上記のコードを実行すれば、自分の思い通りの動きになります。ですが、eventMaker()メソッドが気に入りません。var that = thisをしたあと、that.msgなどとして参照しないといけないのが嫌です。 また、以下のコードのようにeventMaker()にmsgを引数に渡すのもあまりしたくありません。なぜなら、実際はButtonMakerのフィールドがもっとたくさんあり、それらのいくつかを参照するからです。 eventMaker2: function(msg){   return function(){     alert(msg);   } } よろしくお願いします

  • 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

  • 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初心者ですが、オブジェクトに関してわからないことがあるので、教えてください。(とんちんかんな質問かもしれませんが、ご容赦下さい。) 下記のような場合、関数calから関数setを呼出すのはどうすればよいのでしょうか? function Obj(){ } Obj.prototype.set = function(){ } Obj.prototype.cal = function(){ ここから、setを呼出すにはどうすればよいのでしょうか? } var obj = new Obj();

  • 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.プロパティ名」で追加していたプロパティと値を残しておく方法はありませんでしょうか?

  • Array.prototype.~の使い方について

    Array.prototype.forEach.call()とは何でしょうか? arrayは配列のことですよね。 prototypeについては https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/prototype に説明があり、 forEachについては https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/forEach に説明があり、 callについては http://www.scollabo.com/banban/jsindex/sample/sample_027.html に説明がありましたが、何が何だかさっぱりです。 また、Array.prototype.forEach.call()の場合は 「array」+「prototype」+「forEach」+「call」 それぞれの説明を混ぜたものということになるのでしょうか。 <dd>を押すと”書き変えました”というテキストに書き変えるコードを書いてみました。 理解できてないので動きません。 アドバイスを頂けないでしょうか。 <html lang="ja"> <head> <script type="text/javascript"> function click() { var element = node.ownerDocument; var qsA = element.querySelectorAll ('#sample > dd'); Array.prototype.forEach.call (qsA, function () {qsA.nodeText = "書き変えました"}); } </script> </head> <body> <dl id="sample">  <dt>サンプル1</dt>  <dd onclick="click()">11111</dd>  <dt>サンプル2</dt>  <dd onclick="click()">22222</dd> </dl> </body> </html>

  • 【javascript文法】 prototype.js Ajax.Request onSuccess:に指定するfancitonの書き方

    以下HTMLは開いた時に'2'がアラート、続いて'hello world'がアラートされるものです。 動作的には期待どおりに動きますが、記述方法に難を感じています。 課題としては、Ajax.RequestのonSuccess:に指定するfancrionをprototypeを使って 宣言したfunctionで且つ、引数を与えたいです。 (Ajax.Requestが返してくる引数も使いたい。) 表現が下手ですみません。 ※行頭は全角スペースです。実際に機能させる為には  半角に修正もしくは行頭スペースは削除して下さい。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function http(){  this.val=1; }; http.prototype.request = function(){  var url="/ruby/hello.cgi"; //実際に検証する為にはwebサーバにこのcgiを置く必要あり  new Ajax.Request(url, {   method:"get",   onSuccess: function(h){r.processRequest(h,1);}   /* ↑http.prototype.requestの中なので、r.ではなくthis.processRequest(h,1)と記述したい*/  }); }; http.prototype.processRequest = function(h,arg){  alert(this.val+arg);  alert(h.responseText); }; var r = new http(); r.request(); //--></script> </head> <body></body> </html> 以下"/ruby/hello.cgi"の例 #!/usr/bin/ruby puts "Content-Type: text/html\n\n" puts "hello world" ※実際に実行する場合はprototype.jsが必要です。 これで、期待通りの結果が得られるのですが、コメントに記載したように、 http.prototype.request = function()の中でonSuccess:に指定する関数が、 this.と記述できず、r.と記述しないと動作しません。 http.prototype.request = function()の中で、 ~~~~~~~~~~~~~~ http.prototype.processRequest = function(h,arg) ~~~~~~~~~~~~~~ を使うのですから、 r.processRequest(h,1)ではなく、 ~ this.processRequest(h,1) ~~~~ と記述したいです。 因みに同じような質問を http://oshiete1.goo.ne.jp/qa4663141.html でしており、この『応用』だとも思うのですが、名案浮かばずです。 このような場合、どう記述するのがベターなのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • prototype.jsを利用したイベントの登録について

    はじめまして。 現在 prototype.js 1.4.0 を利用して、Web ページの作成を行っているのですが、イベントの登録 (Event.observe)でやりたいことと、異なる動作になってしまい困っているところです。 [ やりたいこと ] javascript側で動的に生成した各要素 (div) に対して moueover & mouseout のイベントを割り当てる。mouseover 時には background の値を変え mouseout 時には background の値を元(transparent)に戻す。 [ 困っていること ] 各要素のmouseover & mouseout 時には各要素の背景色が変更されるはずなのに、一番最後に生成した要素の背景が変更されてしまう。 [ コード ] <html> <head> <script type="text/javascript" src="prototype.js" ></script> <script type="text/javascript"> view = new Class.create(); view.prototype = { initialize:function() { var view = $('viewContents'); var idName = 'test'; for (var i=0; i<10; i++) { var id = idName + i; var d = document.createElement('div'); d.id = id; d.innerHTML = id; view.appendChild(d); Event.observe(d,'mouseover',function() {d.style.background='#aaa';}.bind(this),false); Event.observe(d,'mouseout' ,function() {d.style.background='transparent';}.bind(this),false); Event.observe(d,'click' ,function() {alert(d.id);}.bind(this),false); } } } </script> </head> <body> <p><input type="button" onclick="new view();" value="取得"></p> <div id="viewContents"></div> </body> </html> となります。 なにか基本的なところが間違っているのでしょうか? よろしくお願いいたします。

専門家に質問してみよう