[SOLUCIONADO] Mejor metodología para usar this cuando es innaccesible?

[HackmanC]

Hola,

Tengo una consulta para averiguar si no me estoy equivocando o haciendo una mala práctica del lenguaje. Normalmente tengo que hacer referencia al objeto en el que estoy definiendo algunas o muchas funciones anónimas, pero en estas no tengo acceso a la palabra reservada this, lo cual me crea una estructura del lenguaje bastante compleja y creo (posiblemente) innecesaria.

Como no he visto muchas aplicaciones que lo hagan de la forma como yo lo realizo me pregunto si hay algo que estoy realizando mal, por ejemplo:

Código Javascript:

Mesa.prototype.crearTablero = function (ancho, alto, callback) {
    this.tablero = new Tablero(ancho, alto, (function (mesa) {
        return function () {
            mesa.panel = document.getElementById("JPuzzleT");
            if (mesa.panel) {
                mesa.panel.onclick = (function (mesa) {
                    return function (evt) {
                        mesa.mouseClickedHandler(evt);
                    };
                })(mesa);
                callback();
            }
        };
    })(this), (function (mesa) {
        return function (origen, destino) {
            mesa.stateChangedHandler(origen, destino);
        };
    })(this));
};
 

En ese caso no me queda mas que crear una función anónima adicional que reciba un parámetro, donde le paso el this (en este caso mesa), para que el closure tenga acceso al this. El ejemplo es de una aplicación algo antigua adaptada de una aplicación que hice en Java, pero todavía se aplica.

Ahora bien, el problema es que ese fue un ejemplo sencillo a veces tengo que declarar muchas funciones que internamente definen muchas funciones y al final en cascada tengo n cantidad de funciones anónimas solamente con el objetivo de tener acceso al this.

¿Existe algún mejor método o patrón que no tenga que estar pasando el this de esa forma?

Saludos,

[zerokilled]

buenas...
no estoy del todo seguro qué exactamente quieras hacer, pero se me ocurren dos métodos. el primero creo que sería el más adecuado para tu caso. es similar a lo que estás haciendo: asignar this al argumento de la función. lo único que en este caso sería a una variable local del método que defines para el prototipo (crearTablero).

Código:

function Fn(){}

Fn.prototype.fn = function(){
var that = this;
this.prop = new Class(args, function(){
    // aqui operas con that;
    });
};

el otro método pudiera ser con apply, pero sería más útil si ya tuvieras definida la función.

Código:

function unnamed(){
// hacer algo con this;
}

function Fn(){}
Fn.prototype.fn = function(){
this.prop = new Class(args, function(){
    unnamed.apply(this);
    });
};

@edit: hay un tercer método que se llama bind(), nunca lo he usado pero debe servirte igual. hice un experimento rápido y basicamente es una forma corta de apply. a bind le pasas el objeto (this) y ella te devuelve una función que cuando se invoca, opera con el objeto que le has pasado.

Código:

function unnamed(){
// hacer algo con this;
}

function Fn(){}
Fn.prototype.fn = function(){
this.prop = new Class(args, unnamed.bind(this));
};

[HackmanC]

Hola,

Muchas gracias por tomarte el tiempo para revisar mi consulta,

Iniciado por zerokilled

... no estoy del todo seguro qué exactamente quieras hacer, ...

Ahora que leo mi pregunta me doy cuenta que efectivamente está un poco confusa, pero de igual forma comprendiste bien el concepto.

Iniciado por zerokilled

... el primero creo que sería el más adecuado para tu caso. es similar a lo que estás haciendo: asignar this al argumento de la función. lo único que en este caso sería a una variable local del método que defines para el prototipo (crearTablero).

El único inconveniente que miro en esa propuesta sería que mantengo una referencia a this, en Java no es ningún problema porque la forma en que funciona el Garbage Collector, pero en Javascript, dependiendo del objeto o mas bien la cantidad de objetos podría ser problematico, según comprendo el GC de Javascript nunca va a soltar esas referencias, aunque ya no exista otra referencia a Fn, el mismo mantiene una referencia a si mismo, valga la redundancia, aunque no estoy completamente seguro de eso.

Iniciado por zerokilled

el otro método pudiera ser con apply, pero sería más útil si ya tuvieras definida la función.

Esa me parece mejor, con el único inconveniente, para mí en lo personal unicamente, que tendría funciones sueltas, o por decirlo de otra forma, objetos sueltos para poder aplicarles el método apply. Aunque posiblemente no he comprendido bien el concepto, posiblemente podría hacerlas como Clases internas, voy a revisar ese método.

Iniciado por zerokilled

... hay un tercer método que se llama bind(), nunca lo he usado pero debe servirte igual. hice un experimento rápido y basicamente es una forma corta de apply. a bind le pasas el objeto (this) y ella te devuelve una función que cuando se invoca, opera con el objeto que le has pasado.

Se mira interesante, voy a revisalo mas detenidamente, posiblemente este sea el mejor método que ando buscando.

Muchas gracias de nuevo, voy a hacer pruebas con tus propuestas para ver cual se adapta mejor a lo que necesito hacer en general.

Saludos,

[HackmanC]

Hola,

Iniciado por zerokilled

... @edit: hay un tercer método que se llama bind(), nunca lo he usado pero debe servirte igual. hice un experimento rápido y basicamente es una forma corta de apply. a bind le pasas el objeto (this) y ella te devuelve una función que cuando se invoca, opera con el objeto que le has pasado.
...

Excelente, ya investigue mas la función, exactamente bind hace lo mismo que yo estaba haciendo pero yo lo hacía manualmente, creaba la función a mano y le pasaba el this como un parámetro, aunque internamente lo usaba con otro nombre (el nombre del parámetro).

Usando bind() hace exactamente lo mismo pero sin estar creando el montón de funciones, y el this, realmente se llama this (y es el this que me interesa) dentro de la función.

De nuevo, te lo agradezco mucho,

Saludos,