JavaScriptJavaScriptで関数を定めたとき、関数本体のthis参照はその関数がどのオブジェクトに与えられたかによって変わります。0.4.0には、関数のthis参照先を定めるproxy()メソッドが備わりました。このメソッドを題材に、関数にthis参照を定めるやり方について考えます。イベントハンドラとイベントリスナーのthis参照this参照のありかがよく問われるのは、イベントで呼出すハンドラやリスナーの関数です。原則を確かめましょう。HTMLドキュメントのbody要素に、以下のようにinput要素でボタン(type属性"button")を加えます(図001)。input要素にはJavaScriptで参照が得られるように、id属性に識別子("control")を定めておきます。/></body>script要素では、document.getElementById()メソッドで得たinput要素のボタンに、onclickハンドラ(showThisReference())を定めます(第3〜4行目)。ハンドラの関数は、window.alert()メソッドで警告ダイアログボックスにthis参照を示します(第7行目)。{alert(this);}</script></head>JavaScriptでは、関数はFunctionというオブジェクトです。関数をオブジェクトに定めたハンドラは、プロパティとして扱われます。そのため、ハンドラの関数本体では、thisキーワードはハンドラが定められたオブジェクトを参照します。したがって、上述のJavaScriptコードでボタンをクリックすると、警告ダイアログボックスにはthis参照としてつぎのようにinput要素が示されます(図007)。0.6.0)では、イベントは基本的にイベントリスナーで扱います。そのリスナー関数におけるthis参照を確かめましょう。body要素にはcanvas要素が加えられ、id属性に識別子"myCanvas"が定められているとします。height="180"></canvas></body>以下のJavaScriptコードは、Canvas左上角に正方形の青いShapeインスタンスを置きます(図003)。そのオブジェクトがクリックされたときのDisplayObject.clickイベントに、EventDispatcher.addEventListener()メソッドでリスナー関数(showThisReference())を加えました(第9行目)。この関数は、window.alert()メソッドで警告ダイアログボックスにthis参照を示します(第13行目)。myShape;}</script>EaselJSのリスナー関数は、イベントハンドラとは異なり、イベントが起こったオブジェクトではなくグローバルなオブジェクトのもとで呼出されます(「EaselJSでイベントリスナーを扱うEventDispatcherクラス」)。そのため、Shapeインスタンスをクリックすると、警告ダイアログボックスにはthis参照としてWindowオブジェクトが示されます(図004)。0.4.0ライブラリには、関数におけるthis参照を定められる静的メソッドproxy()が備わりました。厳密には、メソッドはクラスには属さず、グローバルな関数の扱いです。Soundクラスを読込まなければなりません。proxy()メソッドには、関数とその中でthis参照に定めたいオブジェクトを引数に渡します。メソッドの戻り値がthis参照を定めた関数です。proxy()メソッド」には、以下のような例を掲げました(再掲FN1303001コード001)。外部ファイルから読込んだMP3サウンドを、ボタンのクリックにより停止し、さらに頭から再生し直します。本稿初めにご紹介したコードと同じく、input要素で加えたボタン(id属性"control")ひとつを、切替えて用います。静的メソッドSound.play()から返されたSoundInstanceオブジェクト(instance)のSoundInstance.completeイベントにリスナー関数を加えました(第7〜8行目)。リスナーはproxy()メソッドの戻り値とし、呼出す関数(soundCompleted())にはスコープとしてボタンのインスタンス(control)を渡しました。proxy()メソッドの第1引数に渡した関数(soundCompleted)は、イベントオブジェクトのtargetプロパティからSoundInstanceオブジェクト、スコープに定めたthis参照からボタンのオブジェクトを得て、これらふたつを別の関数(readyToPlay)に引数として渡して呼出します(第12〜13行目)。呼出された関数(readyToPlay)は、受取った引数のボタンに定めるonclickハンドラを切替え、クリックしたらSoundInstance.play()メソッドによりサウンドを頭から再生し直します(第16〜17行目)。その他のスクリプトの中身について詳しくは、前出リファレンスの解説をお読みください。"stop";}</script>proxy()メソッドでボタンの参照をスコープに定めたため、グローバルな変数を用いることなく、SoundInstance.completeイベントのリスナー関数(soundCompleted)にボタンがthis参照として渡せました。EaselJSライブラリのマウスイベントにおけるリスナーの参照CreateJSのEaselJSライブラリでは、マウスイベントのリスナーをどのオブジェクトが扱うのかに注意しなければなりません。クリックやマウスボタンを押すイベントは、それぞれDisplayObject.clickとDisplayObject.mousedownなのでマウス操作の対象(DisplayObjectインスタンス)にリスナーを加えます。ところが、マウスを動かしたり、ボタンを放す操作は、MouseEventオブジェクトのMouseEvent.mousemoveやMouseEvent.mouseupイベントで扱います。前述01「イベントハンドラとイベントリスナーのthis参照」でイベントリスナーを試したJavaScriptコードに手直しします。Shapeインスタンスの上でマウスボタンを押すイベントDisplayObject.mousedownで、MouseEvent.mouseupのリスナー(release())を加えます。そのリスナー関数の本体で、イベントリスナーは除くことにします。問題は、MouseEvent.mouseupイベントのリスナーが加えられたMouseEventオブジェクトの参照を、リスナー関数(release())からどうやって捉えるかです。リスナー関数の受取った引数は、MouseEvent.mouseupイベントのオブジェクトですので、リスナーを登録した(DisplayObject.mousedownイベントの)オブジェクトではありません。MouseEvent.mouseupイベントのリスナーから、DisplayObject.mousedownのイベントオブジェクトを参照できるように考えたのが、以下のコード001です。DisplayObject.mousedownイベントのリスナー関数(press())は、引数に受取ったMouseEventオブジェクト(eventObject)のtargetプロパティからマウスで操作したインスタンス(instance)を取出し、そのプロパティ(dispatcher)としてイベントオブジェクトを与えました(第11〜12行目)。MouseEvent.mouseupイベントのリスナーも、引数のMouseEventオブジェクト(eventObject)からtargetプロパティでマウスで操作したインスタンス(instance)が得られます(第16行目)。すると、インスタンスのプロパティ(dispatcher)に与えたリスナーが登録されているイベントオブジェクトも取出せるのです(第17行目)。これで、正しいMouseEventオブジェクト(dispatcher)を参照して、EventDispatcher.removeEventListener()メソッドが呼出せます(第20行目)。イベントリスナーを削除する前後に、EventDispatcher.hasEventListener()メソッドでリスナーの有無を調べて、配列(result)に納めています(第19および第21行目)。その配列をwindow.alert()メソッドに渡すと(第22行目)、警告ダイアログボックスにはつぎのように示されますので、リスナーは正しく除かれたことが確かめられます(図005)。EaselJSライブラリでFunction.bind()メソッドを使うproxy()メソッドは、SoundJSライブラリを読込まないと使えません。JavaScriptにはFunction.bind()という関数のthis参照を変えるメソッドがあります。このメソッドは関数に対して呼出し、this参照に定めたいオブジェクトを引数として渡します。関数.bind(スコープ)すると、マウスイベントのリスナーを削除する前掲コード001は、Function.bind()メソッドでつぎのように書替えられそうな気がするかもしれません。true}ところが、試してみるとイベントリスナーは消えません。EventDispatcher.hasEventListener()メソッドの戻り値がtrueなのですから、EventDispatcher.removeEventListener()メソッドで参照しているオブジェクトは確かにリスナーをもっており、間違っていないということです(図006)。図006■イベントオブジェクトはリスナーをもっているのに消えない間違っているのはEventDispatcher.removeEventListener()メソッドの第2引数に渡したリスナー関数(release)です。Function.bind()メソッドが返すのは、参照した関数のスコープを第2引数のオブジェクトに置換えた新たな関数です。メソッドが参照した関数と戻り値の関数とは別物なのです。したらよいかといいますと、Function.bind()メソッドの戻り値を何らかのやり方でリスナー関数に渡さなければなりません。いえ、グローバルな変数やマウス操作をしたインスタンスのプロパティに定めるのでは、前掲コード001と代わり映えせず、Function.bind()メソッドを使う意味がありません。ひとつ考えられるのは、リスナー関数の引数に加えることです。Function.bind()メソッドには第2引数以降を与えることができ、それらは戻り値の関数に引数として渡されます。...)けれども、Function.bind()メソッドを呼出さなければ、戻り値の関数の参照が得られません。呼出してしまったら、メソッドに引数が加えられないのです。そこで、前掲コード001を以下のように書替えてみました。script要素全体は、後にコード002として掲げます(行番号はコード002にもとづきます)。MouseEvent.mouseupイベントのリスナーを定めるとき、Function.bind()メソッドの第2引数に空のObjectインスタンス(item)を渡し、戻り値の関数は予め変数(listener)にとりました(第11〜12行目)。そのオブジェクトのプロパティ(listener)として、変数の参照を与えています(第13行目)。そのうえで、EventDispatcher.addEventListener()メソッドは、その変数を第2引数に渡して呼出しました(第14行目)。これで、MouseEvent.mouseupイベントのリスナー関数(release())は、引数としてMouseEventオブジェクトのほかにもうひとつObjectインスタンスを受取ります。Function.bind()メソッドの第2引数以降に渡した値(item)は、参照した関数がもともと受取る引数(eventObject)の前に加わります(第16行目)。後は、第1引数のオブジェクトからプロパティ(listener)に与えられた関数の参照を取出し、EventDispatcher.removeEventListener()メソッドの第2引数に渡せば、リスナーが正しく除けます(第17および第20行目)。false}window.alert()メソッドで開く警告ダイアログボックスの値を確かめると、EventDispatcher.removeEventListener()メソッドを呼出した後EventDispatcher.hasEventListener()メソッドがfalseを返します(第22行目)。script要素に書いたJavaScript全体は、つぎのコード002のとおりです。proxy()メソッドを定める前掲コード002のFunction.bind()メソッドの使い方は、手軽さに欠けます。SoundJSライブラリのproxy()メソッドは、実装を見るとつぎのようにわずか6行です。それなら、SoundJS以外でも使いやすいように、proxy()メソッドをつくり直してもよいでしょう。proxy()メソッド」の「実装」に解説しましたので、お読みください。ここでは、このメソッドをもとにして、戻り値の関数に引数として関数自身の参照を加えることにします。SoundJSライブラリのproxy()メソッドも、Function.bind()メソッドと同じように、戻り値の関数に渡す引数が与えられます。これから定める自作proxy()関数は、戻り値の関数自身への参照を引数の最後に内部的に加えるようにします。関数自身への参照)つくり直したproxy()関数は、つぎのとおりです。前掲コード002を新たなproxy()関数で書替えたscript要素全体は、後にコード003として掲げます(行番号はコード003にもとづきます)。proxy()関数が第3引数以降に受取って、戻り値の関数に渡す値は、配列にして変数(aArgs)に納められます(第29行目)。その引数に加えるため、戻り値にする関数は変数(myFunction)に定めます。その関数の中で、引数の配列にArray.push()メソッドで関数の参照を加えます(第31行目)。すると、戻り値の関数が呼出されるとき、その引数に関数自身の参照が加えられることになるのです(第32行目)。myFunction;}この新たなproxy()関数を使えば、前掲コード002は以下のようにすっきりします。イベントリスナー(listener)を定める前に空のオブジェクトをつくったり、関数の参照をそのプロパティに与えたりしなくて済みます。EventDispatcher.addEventListener()メソッドの第2引数に渡して構いません(第11〜12行目)。リスナー関数(release())は、引数に関数自身の参照を受取ります。proxy()関数(SoundJSのproxy()メソッドも同じ)は第3引数以降を、Function.bind()メソッドとは逆に、もとの関数が受取る引数の後に加えます(第14行目)。後は、引数(listener)に受取ったリスナー関数を、EventDispatcher.removeEventListener()メソッドで除けばよいだけです(第17行目)。listener);}JavaScriptコードの全体は、以下のコード003のとおりです。コード001や002と比べて、簡潔な書き方になりました。Function.bind()メソッドと同じく、新たな関数をつくってリスナーに定めますので、そのメモリは余分に費やします。もとの関数をそのまま用いるコード001の方が、メモリから見ると経済的(エコ)です。スコープを任意に定められる利点と考え合わせて使い分ければよいでしょう。