jquery.proxy의 네 가지 사용 시나리오에 대한 자세한 예

사실 사용법은 2가지 밖에 없는데, 각각 매개변수를 전달할지 여부로 세분화됩니다.

나중에 테스트에 사용할 HTML 조각을 먼저 주세요.

Test

1, jquery.proxy(function, context);

context를 함수 실행 컨텍스트로 사용(예: this)

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

함수에 매개변수 전달

사용 시나리오: 클릭하면 해당 컨텍스트에서 두 개의 매개변수가 동시에 전달됩니다. 함수의 세 번째 매개변수입니다.

참고: 함수 실행 환경에서 프록시를 적용할 수 없는 경우 컨텍스트는 현재 클릭한 개체가 됩니다. 이제 다른 컨텍스트가 지정되었으므로 현재 클릭한 개체와 아무 관련이 없습니다.

 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.
 */

이 경우 클릭은 트리거 버튼과 동일하며 트리거 후에 실행되는

function은 클릭과 관련이 없습니다.

3, jQuery.proxy(context, name);

사용 시나리오: context는 Plain

Object이고 name은 해당 메서드입니다. 클릭 시 실행되지만 테스트 함수의 실행 컨텍스트는 $("#test")

 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的上下文

가 아닌 obj입니다. 결과 분석: 클릭 이벤트를 바인딩한 후 처음 실행될 때 바인딩이 제거됩니다.

제거 후에는 버튼에 클릭 이벤트가 발생하지 않으므로 다시 버튼을 클릭해도 아무런 반응이 없습니다.

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

질문:

질문하고 싶습니다.

jQuery.proxy(context, function, params);

and

function.call(컨텍스트, 매개변수);

위 내용은 jquery.proxy의 네 가지 사용 시나리오에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!