jquery.proxy の 4 つの使用シナリオの詳細な例

実際には使い方は2つしかありませんが、それぞれパラメータを渡すかどうかで細分化されています。

最初に HTML の一部を提供してください。これは後でテストするために使用されます:

Test

1, jquery.proxy(function, context);

コンテキストを実行する関数として context を使用します (つまり this)

2, jQuery.proxy(function, context [,AdditionalArguments]);

関数にパラメータを渡す

使用シナリオ: クリックすると、指定されたコンテキストで 2 つのパラメータが同時に渡されます。イベントが必要な場合は、次のように使用できます。関数の 3 番目のパラメータ。

注: 関数実行環境でプロキシが適用できない場合、コンテキストは現在クリックされているオブジェクトになります 他のコンテキストが指定されているため、それらは現在クリックされているオブジェクトとは何の関係もありません。

 var me = {
   /* I'm a dog */
   type: "dog",
   
   /* Note that event comes *after* one and two */
   test: function(one, two, event) {
     $("#log")
       /* `one` 是第一个附加参数，与对象`you`对应 */
       .append( "<h3>Hello " + one.type + ":</h3>" )
       /* `two` 是第二个附加参数，与对象`they`对应 */
       .append( "and they are " + two.type + ".<br>" )
       /* `this` 是上下文，与普通对象`me`对应 */
       .append( "I am a " + this.type + ", " )
  
       
       /* 事件类型是点击"click" */
       .append( "Thanks for " + event.type + "ing " )
       /* `event.target`是被点击元素，类型是按钮button */
       .append( "the " + event.target.type + "." );
   }
 };
  
 var you  = { type: "cat" };
 var they = { type: "fish" };
  
 
 /* 一共4个参数：第一个是function，第二个是context，第三、四是参数 */
 var proxy = $.proxy( me.test, me, you, they );
 
 $("#test").on( "click", proxy );
 /* 运行结果：
 Hello cat:
 and they are fish.
 I am a dog, Thanks for clicking the submit.
 */

この場合、クリックはトリガーボタンと同等であり、トリガー後に実行される

関数はクリックとは何の関係もありません。

3、jQuery.proxy(context, name);

使用シナリオ: context は Plain

Object であり、name はそのメソッドです。クリック時に実行されますが、テスト関数の実行コンテキストは $("#test") ではなく obj です

 var obj = {
     name: "John",
     test: function() {
         console.log(this);
         $("#log").append( this.name );
         $("#test").off("click", obj.test);
     }
 };
 $("#test").on( "click", jQuery.proxy( obj, "test" ) );//在click时执行，但又
不是click的上下文

結果分析: クリック イベントをバインドした後、最初の実行時にバインドが削除されます。

削除後はボタンのクリックイベントがないため、再度ボタンをクリックしても反応しません。

4, jQuery.proxy(context, name [,AdditionalArguments]);

質問:

質問したいのですが、

jQuery.proxy(context, function, params);

と

function.call (context,params);

以上がjquery.proxy の 4 つの使用シナリオの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。