Lo que finalmente hace es asegurar que el valor de this en una función será el valor que deseas.

Un ejemplo común es un setTimeout que tiene lugar dentro de un controlador de click .

Toma esto:

 $('#myElement').click(function() { // In this function, "this" is our DOM element. $(this).addClass('aNewClass'); });

La intención es bastante simple. Cuando se hace clic en myElement , debería obtener la clase aNewClass . Dentro del controlador, this representa el elemento en el que se hizo clic.

Pero, ¿y si quisiéramos un breve retraso antes de agregar la clase? Podríamos usar un setTimeout para lograrlo, pero el problema es que cualquiera que sea la función que le demos a setTimeout , el valor de this dentro de esa función será window en lugar de nuestro elemento.

 $('#myElement').click(function() { setTimeout(function() { // Problem! In this function "this" is not our element! $(this).addClass('aNewClass'); }, 1000); });

Entonces, lo que podemos hacer en su lugar es llamar a $.proxy() , enviándole la función y el valor que queremos asignarle a this , y devolverá una función que retendrá ese valor.

 $('#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 the // value of "this" in the function });

Entonces, después de que le dimos a $.proxy() la función y el valor que queremos para this , devolvió una función que garantizará this esté configurada correctamente.

¿Cómo lo hace? Simplemente devuelve una función anónima que llama a nuestra función mediante el método .apply() , que le permite establecer explícitamente el valor de this .

Una mirada simplificada a la función que se devuelve puede verse así:

 function() { // v--------func is the function we gave to $.proxy func.apply( ctx ); // ----------^------ ctx is the value we wanted for "this" (our DOM element) }

Entonces, esta función anónima se asigna a setTimeout , y todo lo que hace es ejecutar nuestra función original con this contexto apropiado.

Sin entrar en mayores detalles (que sería necesario porque se trata de Contexto en ECMAScript, la variable de contexto this, etc.)

Hay tres tipos diferentes de "Contextos" en ECMA-/Javascript:

• El contexto mundial
• Contexto de la función
• contexto de evaluación

Cada código se ejecuta en su contexto de ejecución . Hay un contexto global y puede haber muchas instancias de contextos de función (y evaluación). Ahora la parte interesante:

Cada llamada de una función entra en el contexto de ejecución de la función. Un contexto de ejecución de una función se parece a:

El objeto de activación
Cadena de alcance
este valor

Entonces, este valor es un objeto especial que está relacionado con el contexto de ejecución. Hay dos funciones en ECMA-/Javascript que pueden cambiar este valor en el contexto de ejecución de una función:

 .call() .apply()

Si tenemos una función foobar() podemos cambiar este valor llamando:

 foobar.call({test: 5});

Ahora podríamos acceder en foobar al objeto que pasamos:

 function foobar() { this.test // === 5 }

Esto es exactamente lo que jQuery.proxy() . Toma una function y un context (que no es más que un objeto) y vincula la función invocando .call() o .apply() y devuelve esa nueva función.

He escrito esta función:

 function my_proxy (func,obj) { if (typeof(func)!="function") return; // If obj is empty or another set another object if (!obj) obj=this; return function () { return func.apply(obj,arguments); } }