« Flash使いは、アフターエフェクツの習得が結構急務っぽい | main | JavaScript, ActionScriptにおける .this とは何なのか? »

2005年09月01日

JavaScriptでthisスコープをコントロールする

ひげぽん OSとか作っちゃうかMona: 実践 prototype.js [1]
ひげぽん OSとか作っちゃうかMona: 実践 prototype.js [2]

ひげぽん氏のprototype.jsの記事を読んでいて、「イベントハンドラ内のthisスコープを変更するにはどうする?」みたいな内容があって、ちょうど同じ問題をやったばかりだったので書いてみるテスト。

クロージャを使うのですが、直接発行するのではなく、「スコープをずらすクロージャ」を返す関数を作ってやるとよいと思います。
FlashのDelegateクラスがちょうど内部的に、同じような処理をしてます。

ECMAScriptでは「関数=オブジェクト」なので、クロージャを擬似Commandパターンと解釈して、factoryで返してやると素敵。というかJavaScriptはネイティブにCommandパターンが実装されている、といっても過言じゃない仕様ですよね。

//関数のthisスコープをコントロールするクロージャを発行する

function createDelegate(func, thisObj){
var del = function(){
return func.apply(thisObj, arguments);
};
//情報は関数のプロパティとして定義する
del .func = func;
del .thisObj = thisObj;
return del;
}

これで、関数createDelegateに対して関数の参照と、thisスコープを渡してやると

var myFunction = createDeleagte(関数の参照, thisにしたいスコープ);
myFunction(param1, param2, param3..... paramN);

簡単に、任意の関数のスコープをずらして使用することができます。
IEのattachEventに登録したイベントハンドラで常にthisがwindowな問題も、こんなんで解決できるんじゃないでしょうか。

投稿者 Taka : 2005年09月01日 16:50

book

dotfla.gif

bookmark

はてなブックマークに追加

del.icio.usに追加

trackbacks

this entry's trackback URL:
http://www.fladdict.net/cgi-bin/mt3/mt-tb.cgi/292

このリストは、次のエントリーを参照しています: JavaScriptでthisスコープをコントロールする:

» Dating from Dating
Dating [read more]

トラックバック時刻: 2006年03月11日 13:38

» Canon Digital Camera from Canon Digital Camera
Canon Digital Camera [read more]

トラックバック時刻: 2006年03月12日 10:02

» Printing from Printing
Printing [read more]

トラックバック時刻: 2006年03月12日 17:26

comment

はじめまして。
delの関数本体で参照している func と thisObj は、
createDelegate の引数 func と thisObj そのものですから、

//情報は関数のプロパティとして定義する
del.func = func;
del.thisObj = thisObj;

は必要ないのではないでしょうか?

by SHIMADA : 2005年09月02日 17:07

はじめまして。

あ、これは仰るとおりです。
僕のミスだったので修正しておきます。指摘ありがとうございます。

by Taka : 2005年09月05日 20:03

prototype.jsのbindAsEventListenerみたいな話でしょうか?JSプログラミングで非常に便利に使っています。
http://www.sergiopereira.com/articles/prototype.js.html

by 石橋秀仁 : 2005年10月19日 09:58

コメントしてください




保存しますか?