Javascriptのコールバックを適切に使用していますか（オブジェクト指向スタイル）ですか？

Question

コールバックからアクションを受け取るオブジェクトを使用する次のコード例があります。これは良いデザインパターンではないようです。またはそれは？

setTimeOut()は、1秒後にファンクションを起動すると、objInstanceグローバル変数（DOMスコープ）を使用してClassExampleオブジェクトインスタンスにアクセスします。誰かがオブジェクト指向設計内でコールバックを利用するより良い方法をお勧めしますか？

私は、オブジェクトインスタンス内のデータを更新するためにコールバックを使用できます（変数を増やすなど）。

function ClassExample{ 
    this.initiate = function() { 
     setTimeOut(objInstance.afterTimeOut,1000); //using the objects global handle 
    } 

    this.afterTimeOut = function() { 
     alert("Received!"); 
    } 

} 

var objInstance = new ClassExample(); //instance 
objInstance.initiate(); 

Answer 1

いいえ、そうではありません。あなたはこれを実行することをお勧めします：

今

this.initiate = function() { 
    setTimeOut(objInstance.afterTimeOut,1000); //using the objects global handle 
} 

、 "afterTimeoutは" 適切なオブジェクトコンテキストを必要とする場合、あなたはこれを行うことができます：

this.initiate = function() { 
    var instance = this; 
    setTimeout(function() { instance.afterTimeOut(); }, 1000); 
} 

OKだけでなく、あなたが質問を変更しました私があなただったら、元の第2の例のようにこれをやってみましょう：

this.initiate = function() { 
    var instance = this; 
    setTimeout(function() { instance.afterTimeOut(); }, 1000); 
} 

その後、まったく醜いグローバル変数は必要ありません。

編集 — Stackoverflowのユーザー@Christophは、これは特にあまり美しいとは言いません。新しいブラウザでネイティブに（Functionプロトタイプのメソッドとして）、またはいくつかのライブラリ（PrototypeやFunctionalなど）によって提供されるように、「バインド」機能を使用することが役立ちます。 「バインド」に呼んで

this.initiate = function() { 
    setTimeout(this.afterTimeOut.bind(this), 1000); 
} 

が効果的に、私はコード化された小さなラッパーとしてのものと同じ種類である関数を返す：どのような「バインドする」私は上記の持っているように、あなたが少しラッパー関数を作成している行うことができますこの例では明示的に指定します。

Answer 2

あなたが目指していることを行う最適な方法ではありません。しかし、なぜ私はあなたが開始の一環としてコールスタックを壊す必要があるのだろうか、それは非常に学術的だと思う必要があります。別に私はそれをしなければならなかった場合、私はおそらくそうのような閉鎖を使用したいということから

は：

function ClassExample{ 
    this.initiate = function() { 
     setTimeOut((function(self) { return function() { self.afterTimeout();}})(this),1000); //using the objects global handle 
    } 

    this.afterTimeOut = function() { 
     alert("Received!"); 
    } 

} 

var objInstance = new ClassExample(); //instance 
objInstance.initiate() 

Answer 3

function ClassExample{ 
    this.afterTimeOut = function() { 
     alert("Received!"); 
    }; // Don't forget these 

    setTimeOut(afterTimeOut, 1000); // Don't use() if you're passing the function as an argument 
} 

var objInstance = new ClassExample(); //instance 

そのように、あなたはinitiate()方法を必要としません。あなたが本当にinitiate()方法をしたい場合は

---

、私はこのようにそれを行うだろう：

function ClassExample{ 
    var self = this; 

    self.afterTimeOut = function() { 
     alert("Received!"); 
    }; 

    self.initiate = function() { 
     setTimeOut(self.afterTimeOut, 1000); 
    }; 

} 

var objInstance = new ClassExample(); //instance 
objInstance.initiate(); 

Answer 4

this.initiate = function() { 
    var instance = this; 
    setTimeOut(function() { 
     instance.afterTimeOut(); 
    }, 1000); 
}; 

ローカル変数にthisを保存することで、あなたは、すべてのグローバルハンドルを使用して回避することができます。また、これによってafterTimeout()が失われるのを防ぐことができます。this。

Answer 5

これは私がタイマーの再利用を許可し、クロージャの数最小限に抑えるためにそれを行うだろうかです：

function Timer(timeout, callback) { 
    this.timeout = timeout; 
    this.callback = callback; 
} 

Timer.prototype.run = function(thisArg /*, args... */) { 
    var argArray = Array.prototype.slice.call(arguments, 1); 
    var timer = this; 

    setTimeout(function() { 
     timer.callback.apply(thisArg, argArray); 
    }, timer.timeout); 
}; 

var timer = new Timer(1000, alert); 
timer.run(null, 'timer fired!'); 

---

そして、ちょうど楽しみのために、機能的に同等であるgolfedバージョンが、オブジェクトを置き換えます閉鎖で：Znarkusの答えに

function delay(func, timeout) { 
    return function() { 
     var self = this, args = arguments; 
     setTimeout(function() { func.apply(self, args); }, timeout); 
    }; 
} 

delay(alert, 1000).call(null, 'timer fired!'); 

Answer 6

ビル...

私は本当にWHIには分かりません私の場合、最初のアプローチはうまくいきません。私が得た：「にReferenceError：afterTimeOutはに定義されていない」

もう一つは、それにもかかわらず、...私は本当にクールな（「O」の小文字を使用）のsetTimeoutのためのsetTimeoutを変更した後の括弧に含まれています...コードの最初の行を 'function ClassExample（）{';}に変換するクラス名定義。私の問題を解決しました。サンプルコードの

マイスニペット：プライベートの行動、インターンのコールバック呼び出しとなど

function MyTry (name){ 
    // keep this object pointer... that's the trick! 
    var self = this; 

    // create private variable 
    var d = new Date()toJSON().slice(0, 10); 

    // create a private function 
    function getName(){return name} 

    // create public access method 
    self.hello = function(){alert('Hello '+getName()+'!\nToday is: '+d)} 

    // note instance method hello passed as a callback function! 
    self.initiate = function(){setTimeout(self.hello, 3000)} 
}