クラス内の関数を使いたい方法

このQ&Aのポイント
  • クラス内で別の関数を使う際には、関数名の前にthisを付ける必要があります。
  • 上記の例では、setMouseOver関数の中でsetBackgroundColor関数を使うためには、this.setBackgroundColorと記述する必要があります。
  • もしsetBackgroundColor関数を別の方法で利用したい場合、別のアプローチを検討する必要があります。
回答を見る
  • ベストアンサー

クラスの中にある関数を使いたい

次のようなクラスを使ってエレメントを作った時に、 マウスを重ねたらハイライト表示っぽくさせるために、 onmouseoverにこのクラスのメンバ関数setBackgroundColorをセットしたいのですが、 クラス内で使う時は先頭にthisが必要になると思います。 そのthisはどうやって取り出したら良いのでしょうか? それかこのやり方は間違っていて、別のやり方でやった方が良いのでしょうか? function TextObj(text) { //実体を作る var textNode = document.createTextNode(text); var spanElement = document.createElement("span"); spanElement.style.position = "absolute"; spanElement.appendChild(textNode); document.body.appendChild(spanElement); //オブジェクトへの参照を保存 this.obj = spanElement; } TextObj.prototype.setMouseOver = function() { this.obj.onmouseover = function(){ setBackgroundColor(255,255,255);←ここでこの関数を使いたい } } TextObj.prototype.setBackgroundColor = function(red, green, blue) { this.obj.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")"; }

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

  • ベストアンサー
  • susie-t
  • ベストアンサー率86% (37/43)
回答No.1

TextObj.prototype.setMouseOver = function() { var _this = this; this.obj.onmouseover = function(){ _this.setBackgroundColor(255,255,255);} } としてみてください。 クロージャのレキシカルスコープ特性を利用しています。

takagoo100
質問者

お礼

ご返答ありがとうございます。 そのやり方でできました。ありがとうございます。

関連するQ&A

  • クラスの中のクラスへのアクセス

    お世話になります。 クラスが以下のようにあります。 class ClassName1{ var $classname2_obj; // クラス「ClassName2」のオブジェクト function getClassName2Obj(){ return $this->$classname2_obj; } } class ClassName2{ var $array_list; // 配列です  function getArrayList(){ return $this->array_list; } } やりたいのは、ClassName1のgetClassName2Obj関数でClassName2の配列をgetArrayListで取得したいのです。 $a = new ClassName1; $b = $a->getClassName2Obj(); $c = $b->etArrayList(); 上の$b = … と$c = …の部分の処理を一行にまとめることはできないでしょうか? 何卒よろしくお願い致します。 PHPは5です。

    • ベストアンサー
    • PHP
  • イベントリスナーの部分を関数にしたい

    イベントリスナーの部分で、「load」以外に「change」も必要になったので関数にしたいのですが、 引数の関数の指定方法がわかりません。 どうすればいいのでしょうか。よろしくお願いします。 【イベントリスナーを関数にする前】 function hoge(){ this.view = function(){ var _this = this; window.addEventListener( 'load',function(){ _this.foo()}, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view(); 【やってみたこと】 function hoge(){ this.view = function(){ var _this = this; var func = function(){ _this.foo()}; this.addListener( 'window', 'load', func ); } this.addListener = function(elem,type,func){ elem.addEventListener( type,func, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view();

  • プロトタイプの関数から、別のプロトタイプの関数を呼出すには?

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

  • onmouseoverはCSS参照に含められるか?

    <div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか? a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。

    • ベストアンサー
    • CSS
  • javascriptで要素の構造を生成

    昨日質問したプログラムの続きなんですが、 実はクリックした画像を大きくしたくてその方法を考えています function getElements ( obj ) { //イメージタグここから var src = obj.getAttribute('src'); var element = document.createElement('img'); element.src = src; //div生成 var box = document.createElement('div'); box.style.position = 'fixed'; box.class = 'photobig'; box.style.top = '50%'; box.style.left = '50%'; box.style.width = '900px'; box.style.height = '600px'; box.style.background = '#000000'; box.style.opacity = '0.7'; box.style.marginTop = '-300px'; box.style.marginLeft = '-450px'; box.innerHTML = element;//←ここが問題 var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(box); // body要素にdivエレメントを追加 // var objPhotobox = document.getElementsByClassName("photobig").item(0); // objPhotobox.appendChild(element); } javascriptでdivを生成し、その中にimgタグで画像を入れようとしています appendChildで生成した後で、innerHTMLにimgタグの情報を入れようとしています innerHTMLに変数をいれてもタグとして生成されないのが分かったところで、 divにクラス名を付けてそのクラスにappendChildしてみたんですが、これもダメでした どうすればよいのか見当つかず困っています 生成した後のものを扱うのが難しそうなので一度にすべて生成するようにするのかなと思いつつやり方がわかりません よろしくお願いします

  • JavaScriptで自動的に画像に表示されるALT属性を消したい

    以前、こちらでご質問させて頂き、 下記のJavaScript記述を教えて頂いたのですが、 画像にALT属性が自動的に入ってしまい 色々手を入れているうちに混乱してきてしまいました。 複数サムネイル画像をScriptで呼び出し、 オンマウスで拡大画像を表示、 それぞれのサムネイルにもリンクを張るという 少し入り組んだ仕様です。 ALT属性がリンク先ページのURLを表示してしまうため、 どうしても気になって消したいのですが、 もし分かる方がいらっしゃれば教えて頂けないでしょうか・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .smlimg { width:120px; height:80px; } #bigimg { width:600px; height:400px; } #a { width:600px; height:100px; overflow:auto; } </style> <div><img src="" id="bigimg"></div> <div id="a"><div id="b"></div></div> <script type="text/javascript"> //@cc_on var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' '); var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' '); var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' '); var bufimg = []; addEvent( window, 'load', init); addEvent( 'b', 'mouseover', chgimg ); addEvent( document.body, 'click', chgurl ); function init(){ var w=0; for(var i in simage){ bufimg[i] = new Image; bufimg[i].src = bimage[i]; var image = document.createElement('img'); with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; } var p = document.getElementById('b').appendChild( image ); w+=p.offsetWidth; } document.getElementById('b').style.width=w+'px'; var r = Math.random()*i|0; setbimg( bufimg[r].src, jmpurl[r] ); } function chgimg( evt ){ var obj = evt.target || evt.srcElement; if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title ); } function chgurl( evt ){ var obj = evt.target || evt.srcElement; if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title ); } function setbimg(s,t){with( document.getElementById('bigimg')){alt=s;title=t}; changeImage('bigimg',s,5,20);} function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } var ff=0; function changeImage( elementId, imgsrc, step, wtime ){ this.setOpacity = function(n){ this.opacity = n; this.obj.style./*@cc_on @if(1) filter = 'alpha(opacity='+ this.opacity+ ')'; @else @*/ MozOpacity = this.obj.style.opacity = this.opacity / 100;/*@end@*/ } this.go = function(){ var f=0; this.setOpacity( this.opacity += this.step ); if( this.opacity<0 || this.opacity>100 ) { clearInterval( this.tmid ); this.obj.parentNode.removeChild( this.obj ); ff=0; } } if(ff) return; ff=1; var tobj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; tobj.style.position='absolute'; var wrap = document.createElement( 'img' ); wrap.src = tobj.src; wrap.style.top = tobj.offsetTop +'px'; wrap.style.left = tobj.offsetLeft +'px'; wrap.style.width = tobj.offsetWidth +'px'; wrap.style.height = tobj.offsetHeight +'px'; wrap.style.position = 'absolute'; tobj.style.position=''; this.obj = document.body.appendChild( wrap ); tobj.src = imgsrc; this.setOpacity( 100 ); this.step = -step; this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); } </script>

  • クラスが認識されていない(VC++)

    WinXP、VC++6.0のMFCでダイアログベースです。 クラスRedとクラスBlueを作ったとします。 クラスAメンバにクラスBのオブジェクトを入れたとします。 /*******Red.hファイル*********/ #include"Blue.h" class Red{ Blue obj_blue; void FuncRed(); }; /*******Blue.hファイル*********/ class Blue{ void FuncBlue(); }; ここまでは良いのですが、 クラスRedのメンバ関数FuncRed()の中でobj_blueを使うと 「左側がクラス、構造体、共用体ではありません。」 というエラーがでます。 ただし、FuncRed()の中でクラスBlueのオブジェクトobj_blue2を作って使うとエラーが出ずに使えます。 この現象で悩んでいます。何でも良いですのでお願いします。 情報不足であれば補足します。

  • リンクの表示文字を変えたい

    リンクの表示文字を変えようとしています。 document.link.textを使用して実現しようとしているのですが、エラーになってしまいます。 何か良い方法はありませんでしょうか。 参考までに、自分の作ったコードを記載します。 <![CDATA[ <script type="text/javascript"> function disp() {  var n = q.getNumber(0);  n.dispNumber(); } function Number(number) {  this.number = number; } Number.prototype.dispNumber = function(){  document.write("<div style=\"position: relative;\">"); d ocument.write("<a href=\"JavaScript:q.checkNumber(" + this.number + ")\">");  document.write("<IMG src=" + this.URL + " width=" + this.size + " height=" + this.size + " name=\"img\" border=\"0\">"); document.write("<div style=\"top:" + this.size / 2 + "px; left:" + this.size / 2 + "px; position:absolute; z-index:2;\" id=\"Layer4\" align=\"center\">");  document.write(this.number);  document.write("</div>");  document.write("</a>");  document.write("</div>"); } Number.prototype.setNumber = function(number){  this.number = number; } function Question() {  this.number = new Array(); } Question.prototype.checkNumber = function(number) {  alert(number + "がクリックされました。");  document.link.text = -100; } Question.prototype.createNumbers = function() {  this.number[0] = new Number(1); } Question.prototype.getNumber = function(i) {  return this.number[i]; } </script> <div id="hoge"> <script language="JavaScript"><!-- var q = new Question; q.createNumbers(); disp(); //--> </script> </div> ]]> よろしくお願いします。

  • popupでテキストフォームに入力する これを評価して欲しいのです

    アドバイスを受けながら作ってみました。 IE6以上だけの動作でOKです。 自分だけの考えでは偏った見方しかできないと思っているので 他の方々からのアドバイスをお願いします。 <html> <body> <input type="text" id="a" LIST="ラーメン/カレー/牛丼/ラーメン半ライス" onContextMenu="return popup();"> <input type="text" id="b" LIST="水/ウーロン茶/コーラ/カルピス" onContextMenu="return popup();"> <script> function popup(){ if(o=document.getElementById('popup')) with( document.body ) { onclick=null; removeChild(o) } var e = event.srcElement; var pmenu = document.createElement('div'); pmenu.id='popup'; with(pmenu.style){ backgroundColor = '#fff'; position = 'absolute'; border = '3px #999 double'; width = 'auto'; top = document.body.scrollTop + event.clientY + 'px'; left= document.body.scrollLeft + event.clientX + 'px'; padding = '2px'; fontSize = '90%'; } var item = e.getAttribute('list').split('/'); for(i=0;i<item.length;i++){ with(ob=document.createElement('div')){ oncontextmenu =function() {return false} onmouseover = function(){this.style.backgroundColor="#88f"} onmouseout = function(){this.style.backgroundColor="#fff"} onclick = function(){e.value=this.innerHTML;with(document.body){onclick=null;removeChild(document.getElementById('popup'))}} appendChild(document.createTextNode(item[i])); } pmenu.appendChild(ob); } with(document.body){ appendChild(pmenu); onclick = function(){ if(o=document.getElementById('popup')) with( document.body ){onclick=null;removeChild(o)} } } return false; }

  • actionscript2のクラスの中の書き方について

    Flash ActionScript2のクラスの中の書き方について悩んでいます。 クラスの中にMcを定義するものですがthis.mct.onPressのところで class testAの中の_move()が実行できません。いろいろ試してみました がうまく実行できませんでした。なにかいいやり方はないでしょうか? よろしくお願いします。 class testA{  var mct:MovieClip;  function testA(mct:MovieClip){   this.mct = mct;   this.mct.onPress = function(){    _parent._move();   }  }  function _move(){    this.mct.onEnterFrame = function(){   }  } }

    • ベストアンサー
    • Flash

専門家に質問してみよう