JavaScript インタラクション用の関数バインディング コードの使用方法の詳細な説明

関数バインディング

関数バインディングは、JavaScript が DOM と対話するときによく使用され、それを特定の DOM 要素またはコレクションのイベント トリガーにバインドします。イベント ハンドラーは、コードの実行環境を保持しながら関数を変数として渡すために一緒に使用されます

<button id="btn">按钮</button>
<script>      
  var handler={
    message:"Event handled.",
    handlerFun:function(){
      alert(this.message);
    }
  };
btn.onclick = handler.handlerFun;
</script>

上記のコードは、ハンドラーと呼ばれるオブジェクトを作成します。 handler.handlerFun() メソッドは、DOM ボタンのイベント ハンドラーとして割り当てられます。ボタンが押されると、この関数が呼び出され、アラート ボックスが表示されます。警告ボックスには「処理されたイベント」と表示されるはずですが、実際には「undefend」と表示されます。問題は、handler.handleClick() の環境が保存されていないことです。そのため、このオブジェクトはハンドラーではなく DOM ボタンを指すことになります

クロージャを使用してこの問題を修正できます

<button id="btn">按钮</button>
<script>      
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = function(){
  handler.handlerFun();  
}
</script>

もちろん、これはこのシナリオに特有の解決策では、複数のクロージャを作成すると、コードの理解とデバッグが困難になる可能性があります。より良いアプローチは、関数バインディングを使用することです

単純なバインディング関数 binding() は、関数と環境を受け取り、すべての引数をそのままにして、指定された環境で指定された関数を呼び出す関数を返します 動的に渡します

function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}

This機能はシンプルに見えますが、その機能は非常に強力です。クロージャは、bind() で作成されます。クロージャは、apply() を使用して受信関数を呼び出し、コンテキスト オブジェクトとパラメータを apply() に渡します。返された関数が呼び出されると、指定された環境で渡された関数が実行され、すべてのパラメーターが与えられます。

<button id="btn">按钮</button>
<script> 
function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}     
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = bind(handler.handlerFun,handler);
</script>

ECMAScript5 はすべての関数に対してネイティブの binding() メソッドを定義し、操作をさらに簡素化します。

関数ポインターが値の形式で渡され、その関数が特定の環境で実行される必要がある限り、バインドされた関数の有効性が強調されます。これらは主にイベント ハンドラーと setTimeout() および setInterval() で使用されます。ただし、バインドされた関数は通常の関数よりもオーバーヘッドが大きく、より多くのメモリを必要とし、複数の関数呼び出しは若干遅いため、必要な場合にのみ使用するのが最適です。

以上がJavaScript インタラクション用の関数バインディング コードの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。