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

Question

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);
としても除去することが出来ません。この場合はどのようにイベントを削除することが出来るのでしょうか？
そもそもクロージャを使った定義部分に問題があるのでしょうか？
どうぞ教えていただきますようお願いいたします。

think49 · Accepted Answer

#2,9です。#9の補足を読みました。

> 今回1つのオブジェクトで全てを定義しようとしたのは、別の方の回答にも書いたのですが、そのような例を見かけたからです。
差し支えなければ、その例を掲示してもらえないでしょうか？
highslide.js を読んでみましたが、

document.onmousedown = hs.mouseDownHandler;

のように宣言しており、thisは見あたりませんでした。

> Javascriptは複数プログラムの共存が頻繁で、関数名の衝突が起きやすく、それを避ける保険として1つのオブジェクトにするという発想もあるかと思います。
関数名の衝突を避けるために一つのオブジェクトに、という発想にはちょっと違和感を感じますね…。
この発想だと一つのスクリプトにまとめるために、別々の機能を一つのオブジェクトにまとめてしまうこともあるように思います。
例えば、匿名関数で括ってみてはどうでしょうか？(#9 のコードも匿名関数で括られています)

----
(function(){
var hoge = {
start:function(){ ; },
stop:function(){ ; },
end:function(){ ; }
};
var foo = {
start:function(){ ; },
stop:function(){ ; },
end:function(){ ; }
};
hoge.start();
foo.start();
})();
----

とか、外部スクリプトにすることも踏まえて

---
window./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'load', function (evt) {
// 処理
},false);
---

とか。
任意のスクリプトで呼び出せるようにするならば、ローカルなオブジェクトでは問題がありますが、最終的にグローバルオブジェクトとなっていればいいはずです。

---
(function(){
function a(){ ; }
function b(){ ; }
function d(){ ; }
window.drag = { start:a, stop:b, end:c }// グローバルなオブジェクト初期化
})();
---

google-code-prettify も同じような組み方をしているので、参考になるかもしれません。
http://code.google.com/p/google-code-prettify/

# 蛇足ですが、メモリリークに関しては「循環参照 javascript」「javascript クロージャ メモリリーク」などで検索すれば関連情報がHITします。

Chaire · Answer

ドラッグコードでいちいち (add|remove)EventListener する必要はありません。フラグ管理だけで十分です。

ただし、No.2 へのコメントを見る限り、ご質問のコードはメモリリークパターンである可能性が高いので、ページ破棄時の removeEventListener は必須となります。

var f = (function(that) { return function(e) { that.myFunc(); }; })(this);
elm.addEventListener("click", f, false);

のようにし、この f をどこかに保持しておいて下さい（cf. No.1、No.3）。可能であればメモリリークパターンを避け、全体として No.9 のように書くべきです。そうすれば、そもそも removeEventListener は不要です。下記の例も、それを前提に書いています。


オブジェクト名を接頭辞代わりに使ったり、prototype をメソッド置き場のように使うのは、JavaScript のオブジェクト指向とは無関係です。

this 値がズレて困るというのは、本来異なるデータを一緒くたにしている可能性があります。そこで、No.8 の後半では、イベントを監視する Listener と、イベントを処理する Handler の 2 つのデータを分離し、両者の間で this 値の調整を行いました。これらは本来、this 値を共有しない異なるオブジェクトだと判断したからです。

var HogeDragEvent = new function() {
　//
　function DragEvent() { ; }
　(function() {
　　this.startDrag = function(e) { /* mousedown */; };
　　this.moveDrag = function(e) { /* mousemove */; };
　　this.stopDrag = function(e) { /* mouseup*/; };
　}).call(DragEvent.prototype);

　//
　function HogeDragEvent() { DragEvent.apply(this, arguments); }
　HogeDragEvent.prototype = new DragEvent;
　HogeDragEvent.prototype.constructor = HogeDragEvent;
　(function() {
　　this.moveDrag = function(e) { /* override */; };
　}).call(HogeDragEvent.prototype);
　HogeDragEvent.ready = function() { return new HogeDragEventListener; };

　//
　function HogeDragEventListener() {
　　var f = function(e) { return h[e.type](e); };
　　var h = new HogeDragEventHandlers(new HogeDragEvent, f);
　　return f;
　};

　//
　function HogeDragEventHandlers(drag, caller) {
　　this.drag = drag;
　　this.caller = caller;
　}
　HogeDragEventHandlers.prototype = {
　　mousedown: function(e) { return this.drag.startDrag(e); },
　　mousemove: function(e) { return this.drag.moveDrag(e); },
　　mouseup: function(e) { return this.drag.stopDrag(e); },
　　unload: function(e) {
　　　var d = document;
　　　var w = d.defaultView;
　　　d.removeEventListener('mousedown', this.caller, false);
　　　d.removeEventListener('mousemove', this.caller, false);
　　　d.removeEventListener('mouseup', this.caller, false);
　　　w.removeEventListener('unload', this.caller, false);
　　},
　　ready: function(e) {
　　　var d = document;
　　　var w = d.defaultView;
　　　d.addEventListener('mousedown', this.caller, false);
　　　d.addEventListener('mousemove', this.caller, false);
　　　d.addEventListener('mouseup', this.caller, false);
　　　w.addEventListener('unload', this.caller, false);
　　}
　};

　this.ready = HogeDragEvent.ready;
};

HogeDragEvent.ready();
HogeDragEvent.ready();

かなりイイカゲンですが、ここでは 4 種類のインタフェース（もどき）を定義しました。つまり、少なくとも 4 種類の異なるオブジェクトクラスが存在すると、私が判断したということです。また、名前の衝突を避けるために全体を関数の中に入れ、外部公開する API は HogeDragEvent.ready だけにしています。

とは言え、複数のドラッグイベントが同時に生じるケースは少なく（マルチデバイス対応を目指すなら別ですが）、大抵はイベントリスナ 1 つあれば事足ります。であれば、上記の HogeDragEventHandlers と HogeDragEventListener はコンストラクタである必要がありません。極端な話、

var HogeDragEvent = { };

HogeDragEvent.Listener = function(e) {
　return HogeDragEvent.Handler[e.type](e);
};

HogeDragEvent.Handler = {
　startDrag: function(e) { ...; },
　moveDrag: function(e) { ...; },
　stopDrag: function(e) { ...; },
　mousedown: function(e) { ...; },
　mousemove: function(e) { ...; },
　mouseup: function(e) { ...; },
　ready: function(e) { ...; }
};

これで十分という可能性もあります。

しかし、コンストラクタなしでは、万が一、マルチデバイス対応が必要になったときに全部書き直しになるのでしょうか。必ずしもそうではありません。ECMAScript5 の Object.create を使えば任意の Object をプロトタイプとする Object を生成できます（Object.create は ECMAScript3 の範囲内でもある程度は実装できます）。

var createListener = function(handler) {
　return function(e) {
　　return handler[e.type](e);
　};
};
var myHandler1 = Object.create(HogeDragEvent.Handler);
var myHandler2 = Object.create(HogeDragEvent.Handler);
var myListener1 = createListener(myHandler1);
var myListener2 = createListener(myHandler2);

実のところ、コンストラクタも new も、JavaScript ではさほど重要ではありません。それらは少しだけ手間を減らしてくれるというだけです。「Object さえあれば良い」のが、JavaScript におけるオブジェクト指向です。

繰り返しますが、this 値がズレて困るなら、それは本来別のオブジェクトに属するものを、無理矢理単一のオブジェクトに閉じ込めた結果かもしれません。一度、this 値に応じてメソッドを分類・整理してみて下さい。

think49 · Answer

#2 です。私とは設計からして違いますね。私はfunctionとイベントリスナは分けて定義してます。 mousemoveイベントは経験がないので、clickイベントで例を出しますが。

hello, world!

document全体をフックしてイベント定義しています。この手法の素晴らしいところは id,class属性など条件を整えることで挙動を簡単に変更できることです。(id属性を削除してイベント削除とか) document.getElementById('Test').addEventListener() ではJavaScriptで新しく定義された

を認識できませんが、上のやり方なら認識できます。ただ、このやり方は全体(documentとかwindowとか)をフックすることを基本としているので、それが出来ないイベントもあるかもしれません。そういう場合は、addEventListenerで各々イベント定義します。ポイントはイベントと関数を分けて考えることです。例文を見ていると、全てをDragオブジェクトで定義しようとしているように見えますが、上のようにルートでイベント定義するか、「イベント定義用のオブジェクト」と「関数用のオブジェクト」を別々に用意すれば、容易に解決できるのではないかと思います。「イベントと関数をまとめて一元化」から「イベントの一元化」と「関数の一元化」に分ける考え方ですね。

Chaire · Answer

状況によりますが、質問文のクロージャはブラウザがメモリリークする原因になる可能性があります（IE7 以下、Firefox 1.5 以下、Safari 4 以下）。基本的に、不用意なクロージャを避けるべきです。

addEventListener を使える今どきの実装であれば、イベントリスナとして handleEvent メソッドを持つ Object を渡せます。

elem.addEventListener('click', {
　handleEvent: function(e) {
　　this.myFunc();
　},
　myFunc: function() {
　　...;
　}
}, false);

もともと NN6 による DOM2-Events の独自解釈ですが、直接 Function を渡すより扱いやすいでしょう。もちろん、コンストラクタ由来の Object でも構いません。

function HogeListener(a) {
　this.useCapture = a;
}
HogeListener.prototype = {
　handleEvent: function(e) {
　　this.myFunc(e);
　},
　myFunc: function(e) {
　　e.currentTarget.removeEventListener(e.type, this, this.useCapture);
　}
};
elem.addEventListener('click', new HogeListener(false), false);

特に理由がなければ、この方法をお勧めします。

IE および Opera 8 以下、Safari 2 以下を相手にするなら、下記では this 値を調節しつつ関連イベント全般を監視する myListener と、イベントタイプに応じて処理を行う myHandlers の二本立てにしています。こうすれば、イベントリスナの登録・解除は myListener だけ見れば済みますし、関連するイベント処理をまとめることもできます。

var myHandlers = {
　'click': function(e) {
　　return this.myFunc(e);
　},
　'mousedown': function(e) {
　　return this.myFunc(e);
　},
　myFunc: function(e) {
　　e.currentTarget.removeEventListener(e.type, myListener, false);
　}
};

var myListener = function(e) {
　return myProcessor[e.type](e);
};

elem.addEventListener('click', myListener, false);
elem.addEventListener('mousedown', myListener, false);

ちなみに、IE には event.currentTarget に相当するものがないので何らかの工夫が必要ですが、そもそも IE で currentTarget 相当が必要な場合には、HTML のイベント属性として書く方がいろんな意味で無難です。

上記は一例に過ぎません。しかし、どのような方法を採用するにせよ、イベントハンドラ関数は必ずイベントオブジェクトを第一引数にとるよう定義して下さい。これは DOM-Events の約束事です。このイベントオブジェクトによって、イベント発生時の文脈を調べ、処理を振り分けるのがイベントハンドラの役割です。

babu_baboo · Answer

#3～#6です。さくじょできないなら、thisでよべてもいみがありませんね。
また「無駄に回答が多い質問」のぶんるいにしてしまった！ちと反省。
やっぱりなまえつけて、arguments.calleeとでけす？

//@cc_on @set @V = (@_jscript_version >= 5.5)

/*@if (@V) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
　'load', function () {
　　/*@if (@V) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
　　　'load', arguments.callee, false);

　　handler1.call(this, e);
　　handler2.call(this, e);
　　
　　document./*@if(@V) attachEvent('on'+ @else@*/ addEventListener(/*@end@*/ 'click', test, false);
　}, false);

/*@if(@V) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
　'unload', function () {
　　/*@if(@V) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
　　　'unload', arguments.callee, false);

　　document./*@if(@V) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', test, false);
　　
　}, false);


function test(evt) {
　var e = evt./*@if(@F) srcElement @else@*/ target /*@end@*/;
　alert(e.tagName);
}

babu_baboo · Answer

こりなやつだと、おもってくれ^^;
//@cc_on @set @V = (@_jscript_version >= 5.5)
var X = { 'test':'abc' };

X.add = (function( handler1, handler2) {
　return function ( ) {
　　document./*@if( @V ) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
　　　'click', (function(that){ return function(evt) { handler1.call(that ,evt); }; })(this), false);
　};
})(
　function () { alert(this.test); },　//1
　function () { ; }　 //2
　);
X.add();
これで、くりっくしたら abc があらーとされる

babu_baboo · Answer

＃４は、いみがなかった。わすれて。

babu_baboo · Answer

＃３です。
まとはずれだろうか？その２

var X = { 'str': 'abc' };
X.test = (function(a) {
　return function () {
　　alert( this.str );
　};
})(
　(function( that) { return function () { ; }; })(this)
　);
　
X.test();

babu_baboo · Answer

まとはずれだろうか？
//@cc_on @set @V = (@_jscript_version >= 5.5)

var Xxxx = (function( handler1, handler2) {
　return function ( sw ) {
　　if( sw ) {
　　　document./*@if( @V ) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
　　　　'click', handler1, false);
　　　document./*@if( @V ) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/
　　　　'click', handler2, false);
　　} else {
　　　document./*@if( @V ) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
　　　　'click', handler1, false);
　　　document./*@if( @V ) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
　　　　'click', handler2, false);
　　}
　　return sw;
　};
})(
　function () { ; },　//1
　function () { ; }　 //2
　);

think49 · Answer

> この場合はどのようにイベントを削除することが出来るのでしょうか？
匿名関数は arguments.callee によって、関数オブジェクトを拾えます。
http://un-q.net/2007/07/addeventlistener_removeeventlistener.html

以下のように、addEventListenerで定義した匿名関数内でremoveEventListenerは可能でした。

--- example 1
document.addEventListener('click', function(){
alert('test');
document.removeEventListener('click', arguments.callee, false);// remove可能
}, false);
---

ただし、匿名関数の外に関数オブジェクトを持ってくることは出来ないようです。

--- example 2
var func;
document.addEventListener('click', function(){
alert('test');
func = arguments.callee;
}, false);
document.removeEventListener('click', func, false);// remove不可
---

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

#2,9です。

ドラッグコードでいちいち (add|remove)EventListener する必要はありません。

#2 です。

状況によりますが、質問文のクロージャはブラウザがメモリリークする原因になる可能性があります（IE7 以下、Firefox 1.5 以下、Safari 4 以下）。

#3～#6です。

こりなやつだと、おもってくれ^^;

＃４は、いみがなかった。

＃３です。

まとはずれだろうか？

> この場合はどのようにイベントを削除することが出来るのでしょうか？

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング