- ベストアンサー
setTimeoutのthis参照について
- prototypeメソッドを使用した場合のsetTimeout関数のメソッド呼び出し方とプロパティ参照方法がわからない
- setTimeout関数の中で正しいメソッドの呼び出し方について詳しく知りたい
- prototype関数を使用した場合のthis参照とsetTimeout関数内でのプロパティの参照方法について教えてください
- nekome002
- お礼率100% (10/10)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <title>やっぱり ie が…</title> <body> <script> function Hoge () { this.myName="ほげ"; } Hoge.prototype = { init : function () { with (this) { setTimeout ( function (){ displayName(); }, 1000); }; var that = this; setTimeout ( function () { that.displayName (); }, 2000); setTimeout ( function (that) { that.displayName () }, 3000, this); setTimeout (this.displayName.bind (this, 4000)) return this; }, displayName : function () { alert (this.myName); } }; (new Hoge).init (); </script> /* かってな、おもいこみが ありますが、わるいじゅんに ならべました。 with は、もうだめ！つかうべきでは、ありません。 ie のだい３ひきすうは、いみがちがいます。 function.bind が、ないものは、てきとうに ぐぐって、じっそうを します。 */
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
＃２です。また まちがえた。 setTimeout (this.displayName.bind (this), 4000);
お礼
bindをあまり使用したことない程の初心者なので気がつきませんでした///; なるほど…！
- q-ue
- ベストアンサー率75% (12/16)
一度thisを変数に入れておくと、関数内関数(クロージャ)からその値を参照できます。 var hoge=function(){ this.myName="ほげ"; }; hoge.prototype={ init:function(){ var that=this; setTimeout(function(){ that.displayName(); //displayNameのthisにthatが渡される。 },1000); }, displayName:function(){ //thisを参照できる。 console.log(this.myName); } }
お礼
こういった場合にクロージャを使うんですね。なるほど。 分かりやすいご回答ありがとうございます！！ ここ1週間ほどもんもんと悩んでたのでスッキリしました。
お礼
ご回答くださったのに、お礼が大変遅くなってしまい申し訳ありません！！ こんなに記述パターンがあるんですね。 4パターン目のbindを使ったシンプル＆スッキリな記述に目からウロコです。なるほど！ 記述パターンを教えていただいたので、それぞれの使い勝手など掘り下げて調べてみようと思います。（使用おすすめ順を教えていただきましたが；） ご回答有難うございます！！！