The principle and use of $.proxy () in jquery

Jquery.proxy (), takes a function, then returns a new function, and the new function always maintains a specific context.

• Jquery.proxy (function, context)

  function is going to change the context.

  The context function's contextual context (' this ') is set to this object.

• Jquery.proxy (context, name)

  The context context function is set to this object.

  name will change the function name of the context context (this function must be the property of the previous parameter ' context ' object)

This method is typically used when attaching an event handler to an element where the context is actually pointing to another object.

In addition, JQuery ensures that even if you bind a function that is jquery.proxy (), you can still use the original function to unbind it properly.

Take a look at the official example:

var obj ="John"functionthis. Name); $ ("#test"). Unbind ("Click", Obj.test);}; $ ("#test"). Click (Jquery.proxy (obj, "test") ); // The following code is equivalent to the above sentence: // $ ("#test"). Click (Jquery.proxy (obj.test, obj)); // can be compared with the following sentence alone.  //  $ ("#test"). Click (obj.test);

Take a look at the implementations in jquery (versions prior to 1.6):

/*jQuery Source Code proxy: Use the form of apply, execute the callback function.*/Jquery.proxy=function(FN, proxy, thisobject) {if(Arguments.length = = 2 ) {        //jquery.proxy (context, name);        if(typeofProxy = = = "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 when the function executes*/Proxy=function() {            returnFn.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 is declared as an argument    returnproxy;}

In fact, the usual use of call and apply, most of the time as a callback to use.

There is a problem on StackOverflow, the example of which is more typical, for reference:

For example, there is the following code:

$ (' #myElement '). Click (function() {        //  in the This function, the "This" are our DOM element.
        $ (this). addclass (' Anewclass ');}); 

This is our DOM element. If we need to wait a while before adding the class style, the code might be written as follows (note: The Problematic code):

$ (' #myElement '). Click (function() {    setTimeout()          {//  problem! In this function ' this ' isn't our element!         $ (this). addclass (' Anewclass ');      ();});

This is not the DOM element we were expecting. The workaround is to use jquery's $.proxy (), 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, we want our DOM element to be the   //value of ' this ' in the function});

We can do this to understand the above code:

function () {    //  v--------func are the function we gave to $.proxy    func.apply (CTX);     //  ----------^------CTX is the value of We wanted for ' this ' (our DOM Element)}

This shows the powerful effect of $.proxy () in jquery.

Note: In jquery 1.6 and later versions, in addition to the two usages mentioned above, Proxy adds two other uses:

Jquery.proxy (function, context [, additionalarguments])
Jquery.proxy (context, name [, Additionalarguments])

For specific use, refer to the jquery Handbook.