jQuery.proxy() uso de

Estaba leyendo la api sobre jQuery.proxy(). Se ve prometedor, pero me preguntaba en qué situación está este el mejor uso. ¿Alguien puede aclararme?

InformationsquelleAutor Reigel | 2010-07-28

3 Kommentare

  1. 135

    Cuando usted desea a una función que tiene la this valor enlazado a un objeto específico. Por ejemplo, en las devoluciones de llamada, tales como controladores de eventos, devoluciones de llamada de AJAX, tiempos de espera, los intervalos, objetos personalizados, etc.

    Esto es sólo un fabricados ejemplo de una situación en la que podría ser útil. Asumiendo que hay una Person objeto que tiene un nombre de propiedad. También está vinculado a un elemento de entrada de texto, y siempre que el valor de la entrada de los cambios, el nombre de esta persona objeto se actualiza demasiado.

    function Person(el) {
        this.name = '';
    
        $(el).change(function(event) {
            //Want to update this.name of the Person object,
            //but can't because this here refers to the element
            //that triggered the change event.
        });
    }

    Una solución que utilizamos a menudo es la de almacenar el este, en un contexto de variables y el uso que dentro de la función de devolución de llamada, tales como:

    function Person(el) {
        this.name = '';
    
        var self = this; //store reference to this
    
        $(el).change(function(event) {
            self.name = this.value; //captures self in a closure
        });
    }

    Alternativamente, podríamos haber utilizado jQuery.proxy aquí, así que la referencia a this se refiere al objeto de la Persona, en lugar de que el elemento que desencadenó el evento.

    function Person(el) {
        this.name = '';
    
        $(el).change(jQuery.proxy(function(event) {
            this.name = event.target.value;
        }, this));
    }

    Tenga en cuenta que esta característica ha sido estandarizado en ECMAScript 5, que ahora incluye la bind método tomado de y ya está disponible en algunos navegadores.

    function Person(el) {
        this.name = '';
    
        $(el).change(function(event) {
            this.name = event.target.value;
        }.bind(this)); //we're binding the function to the object of person
    }
    • +1 para mencionar que esto ha encontrado su camino en ECMAscript.
    • Es es mejores (más rápido, más eficiente) a utilizar un cierre regular, o utilizar $.proxy?
    • es mejor y más rápido no utilizar un cierre pero con un proxy función estática. Estas respuestas no muestran que el proxy se puede usar con funciones estáticas donde el self = this hack puede utilizarse únicamente si la función se cree en línea
    • Sólo para ir un paso más allá, en ECMAScript 6 (ES6) Flecha Funciones son el camino a seguir (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) ` la función de la Persona(el) { this.nombre = «; $(el).cambio((evento) => { este.nombre = evento.de destino.valor; }); } `
  2. 17

    Es sólo un método taquigráfico de establecer el contexto para un cierre, por ejemplo:

    $(".myClass").click(function() {
      setTimeout(function() {
        alert(this); //window
      }, 1000);
    });

    Sin embargo, a menudo queremos this a seguir siendo el mismo que el método en que nos encontrábamos, que $.proxy() se utiliza para, de esta manera:

    $("button").click(function() {
      setTimeout($.proxy(function() {
        alert(this); //button
      }, this), 1000);
    });​

    Es usualmente utilizado para el retraso de las convocatorias, o en cualquier lugar que usted no quiere hacer un puño método de declarar un cierre. El método de cadena de señalar el contexto de un objeto…bueno, yo no he venido a través de un uso práctico de cada día código todavía, pero estoy seguro de que hay aplicaciones, sólo depende de lo que su objeto/evento a la estructura.

  3. 14

    Por ejemplo, si desea crear las devoluciones de llamada. En lugar de:

    var that = this;
    
    $('button').click(function() {
        that.someMethod();
    });

    que usted puede hacer:

    $('button').click($.proxy(this.someMethod, this));

    O si crear un plugin que acepta las devoluciones de llamada y establecer un contexto específico para la devolución de llamada.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea