end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

javascriptのsetTimeout()で指定するfunctionへの引数とthis問題

http://d.hatena.ne.jp/end0tknr/20100813/1281695700

先程のエントリでは、setTimeout()を初めて使用しましたが、今回、ややハマったところがあったので、その内容を書き留めておきます。

setTimeoutの第1引数の関数に与える引数の指定方法

setTimeoutの書式を「setTimeout(func,msec)」とだけ紹介しているページをよく見かけますが、第1引数の関数の引数も合わせて渡す場合、「setTimeout("func(arg1,arg2)",msec)」ではなく、「setTimeout(func,msec,arg1,arg2)」と指定します。

この指定方法を誤ると、「useless setTimeout call (missing quotes around argument?)」や「〜 is not defined」というエラーメッセージが表示されます(fire bugの場合)。

参考
https://developer.mozilla.org/ja/DOM/window.setTimeout

setTimeout()のthis問題

setTimeout() によって実行されるコードは、
setTimeout() が呼び出された関数とは別の実行コンテキスト内で実行されます。
結果的に、呼び出された関数の this キーワードは 
window (または global) オブジェクトに設定され、
setTimeout が呼び出された関数の this 値と同じにはなりません。
この問題は JavaScript リファレンス でより詳細に説明されています。 

https://developer.mozilla.org/ja/DOM/window.setTimeout

先程のエントリの中で suggest()及び、suggest_mim_group()がありますが、suggest()内ではthisはsuggest OBJECT、suggest_mim_group()内ではthisはWINDOW OBJECTとなっており、実装する際に注意が必要です。

Suggest.prototype = {
  suggest: function(org_elm){
     alert(this);   //alert display suggest OBJECT
     this.tid = setTimeout(this.suggest_mim_group,
                         this.SUGGEST_TIME,
                         org_elm);
  },
  suggest_mim_group: function(org_elm,self){
    alert(this);   //alert display WINDOW OBJECT
    var suggests = [['','[HINBAN GROUP]']];
    var reg_exp = new RegExp(org_elm.value, "i");
  }
};