JavaScriptで親オブジェクトと子オブジェクトを分離させる方法

このQ&Aのポイント
  • JavaScriptで親オブジェクトと子オブジェクトを分離させる方法を知りたいです。
  • 現在、JavaScriptのコードで親オブジェクトと子オブジェクトを扱っていますが、子オブジェクト内で親オブジェクトのプロパティを参照する方法が分からず困っています。
  • 具体的には、親オブジェクト内で定義されたプロパティを子オブジェクト内の関数で使用したいのですが、どのようにすればいいのでしょうか?
回答を見る
  • ベストアンサー

javascript 親オブジェクトと子オブジェクトを分離させたい

例えばjavascriptで下のようなコードを書いたとします。 a=new Array() a[0]=new OBJ(); function OBJ(){ this.prop=document.getElementById('aaa') this.prop2=document.getElementById('bbb') } a[0].prop.addEventListener(click,func,false); function func(){ ??? } func()関数内でthisを使うとa[0].propを参照できます。 一方、a[0].prop2を参照するにはどうすればいいのでしょうか? 配列の要素番号を指定しないで参照させる方法が分からず悩んでいます。 下のようにもしできるのであればいいのですが。。。 a[0]とpropのオブジェクトを分割->a[0]オブジェクトを抜き出し-> a[0]オブジェクトにprop2を追加 または別の方法があるのでしょうか。 ぜひぜひご回答のほどお願いいたします。

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

>func()関数内でthisを使うとa[0].propを参照できます。 ここで、this は、a[0].prop というより、 document.getElementById('aaa') なのでa[0]とは関係ありません。 まどろっこしいですが 例えば、こんな感じにはできます。 a = new Array(); a[0]= new OBJ(); function OBJ(){ this.prop=document.getElementById("aaa"); this.prop2=document.getElementById("bbb"); } OBJ.prototype.func = function(){ alert(this.prop.id); alert(this.prop2.id); }; a[0].prop.addEventListener("click",func,false); function func(){ a[0].func(); }

skip_jack
質問者

お礼

ご回答ありがとうございます。 確かにこの方法でa[0]をthisとして使えます。 少し説明が足りなかった点があったのですが、私がやりたいのはイベントリスナーで呼び出した関数(とういかオブジェクトですね)内で、配列の引数を指定せず対象の配列を使うことです。 addEventListenerの第二引数で配列要素番号を引数として渡せればいいんですけれど。。。

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

#1>私がやりたいのはイベントリスナーで呼び出した関数(とういかオブジェクトですね)内で、配列の引数を指定せず対象の配列を使うことです 意図するところを理解してないワケではなくて #1で説明している通り、 >a[0].prop.addEventListener(click,func,false); は、a[0]のオブジェクトに関してイベントを設定しているわけではありませんので、クリックイベントによって呼び出される関数(オブジェクトではない)でのthisは、id='aaa' のオブジェクト(エレメント)であってa[0]ではありません。(a[0]とは関係ない) だから、このような(質問者の)方法ではムリです。

skip_jack
質問者

お礼

回答ありがとうございます。納得です。a[0]は関係ないのですね。コードを変えて別の方法でやってみます。

関連するQ&A

  • javascriptを只今勉強中なのですが、オブジェクトについてこんが

    javascriptを只今勉強中なのですが、オブジェクトについてこんがらがってしまいました。 var obj = new Object(); var obj2 = {}; Object.prototype.prop1 = "hoge"; obj,obj2共にprop1にhogeがセットされるのですが、オブジェクトリテラルのobj2は Objectコンストラクタのインスタンスと解釈できるのでしょうか?? new演算子について色々とfirebugで調べていたところこの疑問が出てきました。 newなしでもインスタンスができるのでしょうか? オブジェクトを理解していないので意味不明な質問かもしれませんが どなたかアドバイスいただけると嬉しいです。

  • 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プロパティに関してのみ質問した次第です) ネット、書籍等で調べたのですが、検討がつかない状態です。 お手数ですが、ご教授お願い致します。

  • 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)

  • オブジェクト指向のsetTimeoutの呼び出し方法

    オブジェクト指向を勉強中です しかし今一しっくりきません。 setTimeoutの呼び出し部分の記述は、これでいいのでしょうか? やりたいことは、沢山の画像を一度に違ったタイミングでフェードアウト・インをすることです。 <html> <body> <img src="./img/1.gif" width="50" height="50" id="a"> <img src="./img/2.gif" width="50" height="50" id="b"> <input type="button" value="pp" onClick="img2.fin(10,50)"> <script> var img1 = new ImageEffect( 'a',100 ); img1.fout(10,30); var img2 = new ImageEffect( 'b',100 ); img2.fout(5,30); function ImageEffect( id,val1 ){ var func=[]; this.obj = document.getElementById( id ); this.opacity=(val1==undefined)? 100:val1; this.opacitySet = function(n){ this.obj.style.filter='alpha(opacity='+n+')'; this.obj.style.MozOpacity=n/100; this.obj.style.opacity=n/100; this.opacity = n; } this.fout = function(step,wtime){ func[id] = this; this.opacity-=step; if(this.opacity<1) this.opacity = 0; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fout( step, wtime);}, wtime);//ここの呼び出し } this.fin = function(step,wtime){ func[id] = this; this.opacity+=step; if(this.opacity>100) this.opacity = 100; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fin( step, wtime);}, wtime);//ここの呼び出し } }

  • オブジェクトがありませんのエラー

    過去ログを呼んで近いのがあったのでよく読んだのですが よくわかりませんので書き込みします。 以下のスクリプトで「オブジェクトがありませんのエラーが発生します。3行目のfor文の「obj.childNodes」でエラーが発生します。 「document.getElementById」が「null」であるのが原因のようですが、なぜ「document.getElementById」に値が入らないのかがつかめません。 お手数ですがよろしくお願いします 【script】 --------------------------------------------- if(document.getElementById && document.all && !navigator.userAgent.match(/Opera/)){ var obj = document.getElementById("mainmenu"); for(var i=0;i<obj.childNodes.length;i++){ if(obj.childNodes[i].className=="pullmenu"){ obj.childNodes[i].onmouseover = function(){pull(this) }; obj.childNodes[i].onmouseout = function(){pull(this) }; } } } --------------------------------------------- 【html】 --------------------------------------------- <ul id="mainmenu"> <li id="Begginer" class="pullmenu"><a href="http://www.○○○.co.jp/b/w.php">○○○</a> <ul> <li><a href="http://www.○○○.co.jp/b/w.php">○○○ </a></li> <li><a href="http://www.○○○.co.jp/b/s.php">○○○ </a></li> <li><a href="http://www.○○○.co.jp/b/m.php">○○○ </a></li> </ul> </li> </ul>

  • [JS] private関数からオブジェクト参照

    JavaScriptにて外部から使用する関数をpublicに、内部的に使用するだけの関数をprivateにしたく、 <http://d.hatena.ne.jp/brazil/20051028/1130468761>や<http://www.findxfine.com/programming/javascript/59.html>を参考に以下のようにしてみました。 func1はtestクラス内からしか呼び出せず、privateになっており、 func2はtestクラス外からも呼び出せて、publicになっているようです。 しかし、func2からfunc1を呼び出した際に、func2の呼び出しもとのオブジェクトを参照しようとすると undefinedになってしまいます。 var a = new test(); //a.func1(); // これはprivateなのでエラー a.func2(); // こちらはpublicなのでOK function test(){ var self = this; // private variable var data1 = 1; // public variable this.data2 = 2; // private function function func1(){ console.log(data1); // 1を表示 console.log(this.data2); // これがundefinedとなってしまう } // public function this.func2 = function(){ console.log(data1); // 1を表示 console.log(this.data2); // 2を表示 func1(); }; } どのようにすれば、オブジェクト変数を参照でき、 クラス内でのみ使用可能なprivate関数を定義できるのでしょうか。

  • javascriptでオブジェクトのメソッドを使う

    JavaScriptでnewでオブジェクト化したクラス(?)のメソッド、フィールドを利用する方法を教えて下さい。 javascriptにもオブジェクト化という考え方があると聞いたのですが、 例えば、Javaでいうsetter getterのようなメソッドを作り、使用することはできるのでしょうか? 下記のようなコードを実行したところ Uncaught TypeError: Object #<mousePosi> has no method 'setPara' というエラーが出てしまい、setParaというメソッドはない。と言われてしまいます。 しかし、mousePosi()をオブジェクト化することはできているようなので、 setParaとgetParaを使えるのではないかとおもいました。 どなたかアドバイス下さい。お願いします。 ------------------------------------------------------------------------------------------------- (function LineMain() { console.log("マウスの位置座標を表示"); // console.log("X座標=" + mymouse.x + ",Y座標=" + mymouse.y); //マウスムーブでeventControlを呼び出し addEventListener("mousemove", eventControl, false); function eventControl(event) { var event = event; var myMousePosi = new mousePosi(); myMousePosi.setPara(event); // console.log("X座標=" + obj.getMouse().x + ",Y座標=" + obj.getMouse().y); } function mousePosi() { var paraMouse = { x : 0, y : 0 }; function setPara(event) { this.paraMouse.x = event.x; this.paraMouse.y = event.y; } function getPara() { return this.paraMouse; } } })();

  • Javascriptのオブジェクト指向プログラミングとイベント、thisの扱い

    Javascriptを勉強中です。 オブジェクト指向プログラミングを習得しようと努力しております。 あるHTML要素(例ではelm)にクリックイベントを付加する際、オブジェクト内のmyFuncを呼ぶのに以下のようにthis.myFuncとすると、thisがHTML要素となるためにエラーが出ます。 elm.addEventListener("click", this.myFunc, false); これを回避する目的で elm.addEventListener("click", (function(that) { return function() { that.myFunc(); } } )(this), false); とオブジェクト内からクロージャを使って定義することで解決することは分かったのですが、このイベントを削除するのに、 elm.removeEventListener("click", (function(that) { return function() { that.myFunc(); } } )(this), false); や elm.removeEventListener("click", function() { that.myFunc(); }, false); としても除去することが出来ません。この場合はどのようにイベントを削除することが出来るのでしょうか? そもそもクロージャを使った定義部分に問題があるのでしょうか? どうぞ教えていただきますようお願いいたします。

  • オブジェクトの内容を確認する方法

    JavaScriptでオブジェクトの中身を確かめたいときに、 JSON.stringifyや下の関数のようなやり方がありますが、 var showObj = function(obj) { var props = ""; for (var prop in obj){ props += prop + "=" + obj[prop] + "\n"; } return props } JSON.stringify(Math)//{} showObj(Math)// となり、Mathオブジェクトの中身は確認できませんでした。 これはどういった理由によるものなのでしょうか。 また、(JavaScriptのコードから)確認する方法はあるのでしょうか。

  • <HEAD>に書かれたグローバルインスタンスのオブジェクト階層について

    BODYに貼られたIMGタグのイベント関数func_a内で thisを使って、<HEAD>に書かれたxclassのpic1にアクセスしたいのですが、 xclass.pic1とせず、thisを使ってアクセスする方法はありますか? <BODY>内の<IMG>タグは、オブジェクト階層でいうと windows.document.のことでしょうか? それならば、 this.parent.xxxxxxxxx.pic1でアクセスできますか? xxxxがわかりません。 <HEAD>の位置に書いたグローバルインスタンスは document.階層のどの位置にあるのでしょうか? 何か設定でも必要でしょうか? <HEAD> <SCRIPT> ... var XClass = function(){ this.namae = "pic1"; } var xclass = new XClass(); function func_a() { this<--- ここでのthisはImageオブジェクト? xclass.pic1にアクセスしたのですが、thisを使ってアクセスしたい。 } ... </SCRIPT> </HEAD> <BODY> <IMG id="gazou1" onMouseDown="func_a()"> </BODY>

専門家に質問してみよう