tablas - ejecutar funcion javascript antes de cargar la pagina

¿Cómo paso este contexto a un controlador de eventos?

Question

Sé que esta pregunta no tiene mucho sentido, pero déjame intentar aclarar un poco.

Tengo una clase, llamada ScrollBanner, y se ve algo así:

function ScrollBanner() {
    this.initialize = function(selector) {
        $(''span#banner1-nav'').click(this._onClickNavigation);
    }

    this._onClickNavigation = function(event) {
        this.restartTimer(); // this == span#banner1-nav element from this.initialize
        //...
    }

    this.restartTimer() {
        //...
    }
}

Como puede ver, esto.inicializar establece un controlador de clic para esto._onClickNavigation . Algunos pueden esperar que esto dentro del controlador de eventos se refiera a la instancia de ScrollBanner , pero lamentablemente no lo hace. Se refiere al elemento que activó el evento de clic, en este caso span # banner1-nav

¿Cuál sería la mejor manera de hacer que esto se refiera a la instancia de la clase ScrollBanner ?

Answer 1

Sé que esta es una pregunta antigua, pero vi que en los comentarios se menciona $ .proxy (). Sí, cambia el contexto de un objeto pero no en un evento jQuery.

 $(''.selector'').click( $.proxy( function() {
     console.log(this); /* this is set to .selector */
 }, this));

$ .proxy () devuelve la función en el alcance al que se refirió, pero luego esa función se devuelve y se usa con un click() que luego cambia el alcance al elemento .selector

Lo probé hace un minuto, pero si lo entendí mal, por favor, dígaselo.

Answer 2

La forma antigua / tradicional:

Captura this en una variable:

this.initialize = function(selector) {
    var that = this;
    $(''span#banner1-nav'').click(function(event) {
       that._onClickNavigation(event);
    });
}

También podría asignar this a una variable, por ejemplo, instance :

function ScrollBanner() {
    var instance = this;
    // ...
}

y refiérase a la instance lugar de this en todas las llamadas.

La idea general es almacenar this en una variable en un ámbito superior.

La forma ECMAScript5:

ECMAScript5 introduce una nueva propiedad de funciones: .bind() . La documentación de MDC muestra una implementación para navegadores que no la admiten. Con él puedes vincular un determinado contexto a una función:

this.initialize = function(selector) {
    $(''span#banner1-nav'').click(this._onClickNavigation.bind(this));
}

Pero detrás de escena está haciendo lo mismo. La ventaja es que utiliza la funcionalidad incorporada en el navegador que es compatible.

Tenga en cuenta que esto es diferente de apply o call . Ambos establecen el contexto y ejecutan la función, mientras que bind solo establece el contexto sin ejecutar la función.

La forma jQuery:

jQuery proporciona un método $.proxy() que está haciendo lo mismo:

$(''span#banner1-nav'').click($.proxy(this._onClickNavigation, this));