JavaScript関数バインディングを詳しく解説_基礎知識

< input id="btnTest" type="button" value="Button"/>

ハンドラー楽しい:function(){ document.getElementById('btnTest').onclick=handler.handlerFun ; プログラム。設計意図は次のとおりです。ボタンをクリックすると、このメソッドがトリガーされ、ダイアログ ボックスがポップアップしてハンドラーによって定義されたメッセージが表示されます。ただし、ダイアログ ボックスの内容は、クリック後には定義されません。クロージャに慣れている学生であれば、handler.handlerFun() メソッドの実行環境が保存されていないことが問題であることが簡単にわかります。このオブジェクトは最終的にハンドラーではなく DOM ボタンを指しています。クロージャを使用してこの問題を解決するには、関数バインディング ステートメントを変更します。コードをコピーします。

コードは次のとおりです。


document.getElementById('btnTest').onclick=function(){
handlerFun(); onclick プログラムは、クロージャを使用して、Of メソッドを直接呼び出します。もちろん、これはこのシナリオに固有の解決策です。複数のクロージャを作成すると、コードの理解とデバッグが難しくなる可能性があります。


カスタムバインド関数




コードをコピー

コードは次のとおりです:

function binding (fn,context){ .getElementById('btnTest') click=bind(handler.handlerFun,handler);関数は、 bind() 関数は、バインド関数と実行環境という 2 つのパラメーターを受け取り、実行環境でバインドされた関数を呼び出す関数を返します。単純に見えますが、その関数は非常に強力です。クロージャは bing() で作成され、渡された関数を呼び出すために apply() を使用し、実行環境とパラメータを apply() に渡します。 bind() ではなく関数です。返された関数が呼び出されると、すべての引数を指定して、指定された関数内で渡された関数が実行されます。上記の例では、すべてのパラメーターがバインドされた関数を通じて渡されるため、handler.handlerFun を呼び出してもパラメーター イベントを取得できます。 概要

関数が関数ポインターの形式で渡され、その関数が特定の環境で実行される必要がある場合は、カスタムの binding() 関数を使用できます。これらは主にイベント ハンドラーと setTimeout および setInterval に使用されます。 , このバインド方法は通常の関数より多くのメモリ オーバーヘッドを必要とするため、必要な場合にのみ使用するようにしてください。