質問: Javascript でクラス内のメゾッドを呼び出させるにはどうすればよいのでしょうか? Javascriptを勉強を始めて数日の者です。 自分なりの作り方の勉強中です。 ポップアップのサンプルを作成集なのですが、いまいち、クラス的なメゾッドの呼び出し方と、変数のスコープ範囲がわかっていない状態です。 下記のようなソースを作って、テストを行っております。 下に記載したようなソースで、 1※1、※2のコメントを外すと、ポップアップが表示されません。 クラス内のメゾッドを div と等から呼び出させることは出来ないのでしょうか? (サンプルの様な記載をすると、OnCancel が呼び出されてしまい、表示=>閉じる で操作してしまう為 クロームのステップ実行で確認) 21で呼び出せる方法があったとして、※3の様にクラス内の変数を参照することは出来るのでしょうか Javascriptにお詳しい方ご指導ください。 ソースは文字数制限で入力できなかったので、画像で張り付けています。
回答: 既に回答出てましたが、ソース作成したので詳しく書きます。長いけど。 結論から書くと「できるけど、iframeでやるには、クラスとか関係なく難しすぎる。」ということです。 ・記述ミスについて onmousedownやonclickはイベントなので、戻り値は関数になります。ごっちゃになるのは仕方ないですが覚えるしかありません。 ``` this._Document.body.onmousedown = this.OnCancel(); ↓これは下の式とイコールなので関数にならずに命令が実行される this._Document.body.onmousedown = if (this._Iframe){ window.document.body.removeChild(this._Iframe); } this._Document.body.onmousedown = this.OnCancel; ↓これは下の式とイコール。期待通りに動く this._Document.body.onmousedown = function(){ if (this._Iframe){ window.document.body.removeChild(this._Iframe); } } ``` しかし、このように文を変えても、もう一つの問題があるため動きません。 (もしかしたらこちらは知っているかもしれませんが) ・thisの参照値が変わる 上の対応で文法は正しくなりましたが、thisの参照値が変わってしまいます。 ``` this._Document.body.onmousedown = this.OnCancel; OnCancel : function(){ if (this._Iframe){//→ここでのthisは「this._Document.body」を参照する window.document.body.removeChild(this._Iframe); } } よってthis._Document.body._Iframeを探しに行っていることになる ``` this._Document.bodyからのonmousedownイベントになるので、そこからの参照値になります。 よってthisは使えません。 また、iframe内からの参照になるので、親フレームにあるクラスClsPopUpTestにもアクセスが難しいです。(divじゃだめなんですかね?) 変数のroot化をしても厳しそうですし、root化はやりたくないような人もいるので... 一番楽だと思われるのが、イベント関数に引数を渡してやることなのですが、通常では引数を渡せません。(イベント関数の引数にはクリックしたときの状況などが入ってくるため) 最初の話に戻る形になります。 ``` this._Document.body.onmousedown = this.OnCancel(this._Iframe); →戻り値が関数ではなくなるので挙動がおかしい ``` 引数を渡すには無名関数を使った方法がありますのでこちらでどうぞ。 ``` this._Document.body.onmousedown = (function(d){→引数d(適当)には最後に書いてある括弧内の要素が入る return function(e){→onmousedownにちゃんと関数を返してあげる。eにはクリック時の状況データが入る。省略可能 d.OnCancel(d._Iframe);→thisではなく引数dにする } })(this);→このthisが引数dに入る ``` ■部分ソース 二つを改修したのがこちらです。 ``` // クリックしたら終了させる。 this._Document.body.onmousedown = (function(d){ return function(){ d.OnCancel(d._Iframe); } })(this); ``` ``` // を使用したボタンを作成する。 BtnCreate:function ( ele , val ){ var btn = this._Document.createElement("div"); var textn = this._Document.createTextNode(val); btn.appendChild(textn); btn.onclick = (function(d){ return function(){ d.OnCancel(d._Iframe); } })(this); // <=※2 ele.appendChild(btn); return btn; }, ``` ``` // キャンセル処理(ポップアップを閉じるだけ) ※3 OnCancel : function(obj){ if (obj){ window.document.body.removeChild(obj); } }, ``` ※chromeでしか見てませんが動くと思います。 とまあややこしいお話でした。 引数の話