Principles and usage of $. Proxy () in jquery

Jquery. Proxy (), accepts a function, returns a new function, and the new function always maintains a specific context.

• Jquery. Proxy (function, context)

  FunctionThe function that will change the context.

  ContextThe context of the function is set to the object.

• Jquery. Proxy (context, name)

  ContextThe context of the function is set as the object.

  NameName of the function to change the context (this function must be the attribute of the previous 'context' object)

This method is usually used when an event processing function is attached to an element, and the context actually points to another object.

In addition, jquery ensures that, even if the function you bind is a function processed by jquery. Proxy (), you can still use the original function to correctly unbind the function.

Take a look at the official example:

VaROBJ ={Name:"John", Test:Function() {Alert (This. Name); $ ("# Test"). Unbind ("click", Obj. Test) ;};$ ("# Test"). Click (jquery. Proxy (OBJ, "test"));//BelowCodeIt is equivalent to the above sentence://$ ("# Test"). Click (jquery. Proxy (obj. Test, OBJ ));//You can compare it with executing the following sentence separately.//$ ("# Test"). Click (obj. test );
 

Let's take a look at the implementation in jquery (earlier than 1.6 ):

/*  Proxy of jquery source code: Use the apply form to execute the callback function.  */  Jquery. Proxy = Function  (FN, proxy, thisobject ){  If (Arguments. Length = 2 ){  //  Jquery. Proxy (context, name );          If ( Typeof Proxy = "string" ) {Thisobject =FN; FN = Thisobject [proxy]; proxy = Undefined;  /*  Conversion Result: thisobject-> context FN-> name proxy-> undefined  */  }  //  Jquery. Proxy (name, context );          Else   If (Proxy &&! Jquery. isfunction (proxy) {thisobject = Proxy; proxy = Undefined ;}}  If (! Proxy && FN ){  /*  Use proxy to ensure that the context is the specified value during function execution.  */  Proxy = Function  (){  Return FN. Apply (thisobject | This  , Arguments );};} //  Set the guid of unique handler to the same of original handler, so it can be removed      If  (FN) {proxy. guid = Fn. guid = fn. guid | proxy. guid | jquery. guid ++ ;}  //  So proxy can be declared as an argument      Return  Proxy ;} 

In fact, it is usually the call and apply, and most of the time it is used as the callback.

There is a problem with stackoverflow. The examples are typical for your reference:

For example, the following code is provided:

$ ('# Myelement'). Click (Function(){//In this function, "this" is our Dom element.$ (This). Addclass ('anewclass');});
 

Here this is our Dom element. If we need to wait for a while before adding the class style, we may write the code as follows (Note: problematic code ):

$ ('# Myelement'). Click (Function() {SetTimeout (Function(){//Problem! In this function "this" is not our element!$ (This). Addclass ('anewclass');},1000);});
 

This is not the expected Dom element. The solution is to use $. Proxy () of jquery. The Code is as follows:

$ ('# Myelement'). Click ( Function  (){  //  ------------------ V -------- give $. Proxy our function, SetTimeout ($. Proxy (  Function  () {$ (  This ). Addclass ('anewclass '); //  Now "this" is again our element  },  This ), 1000 );  //  --- ^ -------------- And tell it that we want our Dom element to be     //  Value of "this" in the function }); 

We can understand the above Code as follows:

 
Function(){//V -------- func is the function we gave to $. ProxyFunc. Apply (CTX );//---------- ^ ------ CTX is the value we wanted for "this" (Our Dom element)}
 

This shows the powerful functions of $. Proxy () in jquery.

Note: In jquery 1.6 and later versions, in addition to the two usage methods mentioned above, proxy also adds two other usage methods:

Jquery. Proxy (function, context [, additionalarguments])
Jquery. Proxy (context, name [, additionalarguments])

For more information, see the jquery manual.