2011/05/17

Mapeando "this" a "self"

Continuando con la serie de entradas dedicadas a programación orientada a objetos con javascript, me he encontrado con algo que ya había visto en varios sitios, pero que nadie se había molestado en explicar, la asignación a self de la instanciación de la clase (this).


El problema principal viene de que "this" puede variar a lo largo de la ejecución del javascript al usarse frameworks como jquey, de modo que de lugar a errores muy difíciles de encontrar ya que "debería funcionar", pero no lo hace debido al ámbito de this.


Un ejemplo de este comportamiento es el siguiente.

Bob.findFriend("Barry");

Person.prototype.findFriend = function(toFind) {
    // this = Bob
    $(this.friends).each(function() {
        // this = Bob.friends[i]
        if (this.name === toFind) {
            // this = Barry
            return this;
        }
    });
}

En el ejemplo, inicialmente this vale "Bob", pero en cuanto entra en el bucle de jQuery each, this es igual a cada uno de las iteraciones del bucle y ya la hemos armado buena...

Esta situación se puede dar my fácilmente así que la mejor solución es usar una variable local al contexto del objeto para guardar la instancia del objeto (y posiblemente mejorar el rendimiento) mediante

var self = this

Así, el ejemplo anterior quedaría así corregido de modo que haga lo que tiene que hacer y no perdamos el valor de "this" (ahora "self")

Bob.findFriend("Barry");

Person.prototype.findFriend = function(toFind) {
    // the only time "this" is used
    var self = this;
     
    $(self.friends).each(function(i,item) {
        if (item.name === toFind) {
            return item;
        }
    });    
}

No hay comentarios:

Publicar un comentario