Hatena::ブログ(Diary)

Web系がおもしろい。

2010-03-21

setInterval() → this でひっかかった

| 05:30 | setInterval() → this でひっかかったのブックマークコメント

簡単なアニメーションのコードを組んでいたら、setInterval()でドツボにハマってしまったのでメモ。なんとか朝日が出る前に原因が解った。。

問題のコード

var hoge={};
hoge={
	prop:123,
	foo:function() {
		this.id = setInterval(this.bar, 2000);
	},
	bar:function() {
		alert(this.prop); // ←コレ
	}
};
hoge.foo();

上記プログラムを実行するとhoge.foo()が実行され、setIntervalによってさらにhoge.barが2秒毎に定期的に実行されます。

さて、このalert()なんですが、普通に考えると 123 って出力されると思うんですが、ここでの出力結果は undefined です。

そこで、ここのアラートを alert(this); だけにしてみてみると、今度は [object Window] (windowオブジェクト)が返ってくるように。。


これはどう考えればいいんだろう…。イベントとしてwindowオブジェクト関数プロトタイプが設定されるとかかな…?

JavaScriptが普通に文字列として書けるから、 eval とか new Function()辺りがお仲間だったりとか?無いかな…


(追記)解決法

ありました。

amachang - JavaScript 入門

var hoge={};
hoge={
	prop:123,
	foo:function() {
		var self=this;
		this.id = setInterval(function(){self.bar()}, 2000);
	},
	bar:function() {
		alert(this.prop); // ←コレ
	}
};
hoge.foo();

JavaScriptはまだまだ未踏の地だらけなのですよ。。

トラックバック - http://d.hatena.ne.jp/esperia/20100321/1269203457