Controlar el valor de 'esto' en un evento jQuery

Question

He creado un 'control' usando jQuery y utilizado jQuery.extend para ayudar en lo que es tan OO como sea posible.

Durante la inicialización de mi control Me cable hasta varios eventos de clic como así

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

Tenga en cuenta que estoy pasing 'esto' como el argumento de datos en el método de enlace. Lo hago para que pueda llegar a los datos adjuntos a la instancia de control en lugar del elemento que dispara el evento click.

Esto funciona perfectamente, sin embargo sospecho que hay una manera mejor

Después de haber utilizado prototipo en el pasado, recuerdo una sintaxis de vinculación que permite controlar lo que el valor de 'esto' era en el evento.

¿Cuál es la forma de jQuery?

Answer 1

Puede utilizar jQuery.proxy() con función anónima, sólo un poco incómodo que el 'contexto' es el segundo parámetro .

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));

Answer 2

Me gusta su manera, de hecho utiliza una construcción similar:

$('#available_input').bind('click', {self:this}, this.onClick);

y la primera línea de this.onClick:

var self = event.data.self;

Me gusta esta manera porque entonces se obtiene tanto el elemento hecho clic (como este) y el objeto "this" como auto sin tener que usar cierres.

Answer 3

jQuery tiene la jQuery.proxy método (disponible desde 1.4).

Ejemplo:

var Foo = {
  name: "foo",

  test: function() {
    alert(this.name)
  }
}

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted

Answer 4

No creo que jQuery tiene una característica incorporada para eso. Sin embargo, se puede utilizar una construcción auxiliar como la siguiente:

Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        // Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);
    }
}

// Then:
$(...).bind(..., obj.method.createDelegate(obj));

De esta manera, se pueden crear funciones de contenedor '' dinámicas con CreateDelegate () que llama al método con un objeto dado como 'esto' ámbito de aplicación.

Ejemplo:

function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"

Answer 5

HTML 5 navegadores compatibles proporcionan una se unen método en Function.prototype que es, probablemente, la sintaxis más limpia y no es dependiente de marco, a pesar de que no está integrado en IE hasta IE 9. (Hay un polyfill para navegadores sin que, sin embargo.)

De acuerdo con su ejemplo, se puede utilizar de esta manera:

jQuery('#available input', 
        this.controlDiv).bind('click', this.availableCategoryClick.bind(this));

(nota: el primer bind en esta declaración es parte de jQuery y no tiene nada que ver con Function.prototype.bind)

O, para usar un poco más concisa y actualizada jQuery (y eliminar la confusión entre dos tipos diferentes de <=> s):

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));

Answer 6

puede utilizar el unen método como este:

var coolFunction = function(){
  // here whatever involving this
     alert(this.coolValue);
}

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));

Answer 7

jQuery no soporta une y la forma preferida es el uso de funciones.

Debido a que en Javascript, this.availableCategoryClick no significa llamar a la función availableCategoryClick en este objeto, jQuery aconseja para utilizar esta sintaxis preferida:

var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
   self.availableCategoryClick(event);
});

Los conceptos orientados a objetos en Javascript son difíciles de entender, la programación functionnal a menudo es más fácil y más fácil de leer.

Answer 8

Al ver que las funciones de los cambios de alcance, la forma más común es hacerlo a mano, con algo como var self = this.

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}