elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Duda] Problema con javascript CLASES [Solucionado]
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Duda] Problema con javascript CLASES [Solucionado]  (Leído 2,469 veces)
dobleamarilla

Desconectado Desconectado

Mensajes: 4


Ver Perfil
[Duda] Problema con javascript CLASES [Solucionado]
« en: 5 Septiembre 2018, 23:55 pm »

Buenas! Tengo un problema desde hace unos días sobre un código escrito en javascript, estoy diseñando un app con la que se utilizan clases, pero después de buscar información por Internet no logro encontrar nada, tal vez no se pueda hacer lo que intento... Agradecería muchísimo a alguien que me pueda echar una mano para resolver este problema, o algo que tenga que estudiarme para entenderlo porque no hay manera.

Mi código es este:

Código
  1. var aux = null;
  2. class Cesta
  3. {
  4.    constructor()
  5.    {
  6.        this._arrayCesta = null;
  7.    }
  8.  
  9.    cargarCesta()
  10.    {
  11.        ajaxCesta(function(data){
  12.            if(data.error)
  13.            {
  14.                alert(data.infoError);
  15.            }
  16.            else
  17.            {
  18.                alert(data.error);
  19.                aux = data;
  20.            }
  21.        });
  22.        this._arrayCesta = aux; /* AQUÍ EL PROBLEMA */
  23.    }
  24. }
  25. function ajaxCesta(callback)
  26. {
  27.    $.ajax({
  28.        url: 'ajax/cargarCesta.php',
  29.        success: callback,
  30.        error: function () {
  31.            alert("Error AJAX en cargarCesta()");
  32.        }
  33.    });
  34. }

Básicamente lo que hago después de instanciar un objeto de esta clase, es llamar a la funcion obj.cargarCesta(); con la finalidad de guardar la información que recibo por ajax (ajaxCesta()), pero la intención es guardarlo en una variable _arrayCesta DENTRO de la clase. El problema está cuando se ejecuta la línea "this._arrayCesta = aux;". No se guarda nadaaaaa. En cambio haciendo unas pruebas con una variable declarada fuera de la clase, sí que guarda correctamente el valor que recibe del archivo PHP, pero si intento hacer un "set" a this._arrayCesta, mantiene el valor null que le da el constructor.

¿Alguien sabe qué puede pasar?

Muchas gracias y disculpas por la ignorancia, pero esta vez me ha superado  :rolleyes:


« Última modificación: 7 Septiembre 2018, 23:50 pm por dobleamarilla » En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: [Duda] Problema con javascript CLASES
« Respuesta #1 en: 7 Septiembre 2018, 17:04 pm »

Tu problema esta con la asincronía y porque no usas promesas. javascript no funciona de forma lineal o secuencial como un programador de C o PHP esperaria. Por defecto JS es asincrono y cuando una parte del script realiza una tarea que no se sabe cuando finalizara (por ejemplo una peticion ajax) si no se le dice explicitamente lo contrario, el script no se detiene hasta que recibe la respuesta ajax, sino que continúa ejecutándose, asi que es probleable que cuando se ejecuta la linea 22 de tu código la variable aux aun este sin declarar.


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
dobleamarilla

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Re: [Duda] Problema con javascript CLASES
« Respuesta #2 en: 7 Septiembre 2018, 21:49 pm »

Sí eso me pasaba al principio, pero luego utlizando la promesa, logré que funcionara fuera de una clase. Pero en la línea 19, en lugar de aux = data, ponía this._arrayCesta = data; y aún así no había manera. Es como si dentro de la función de la promesa function(){...} aquí dentro no hay acceso a la variable this._arrayCesta, porque lo pruebo con el valor de la promesa "data" o con un valor fijo this._arrayCesta = 5; y sigue manteniendo null como valor.
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: [Duda] Problema con javascript CLASES
« Respuesta #3 en: 7 Septiembre 2018, 22:10 pm »

¿Podrias mostrar como lo ejecutas?

Saludos
En línea

dobleamarilla

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Re: [Duda] Problema con javascript CLASES
« Respuesta #4 en: 7 Septiembre 2018, 22:21 pm »

Claro! Con este código:
Código
  1. var aux = null;
  2. class Cesta
  3. {
  4.    constructor()
  5.    {
  6.        this._arrayCesta = null;
  7.        this._prueba = 69;
  8.    }
  9.  
  10.    cargarCesta()
  11.    {
  12.        ajaxCesta(function(data){
  13.            if(data.error)
  14.            {
  15.                alert(data.infoError);
  16.            }
  17.            else
  18.            {
  19.                alert(data.error);
  20.                this._arrayCesta = "lal";
  21.                alert(this._prueba);
  22.            }
  23.        });
  24.        //this._arrayCesta = aux;
  25.    }
  26. }
  27.  
  28. function ajaxCesta(callback)
  29. {
  30.    $.ajax({
  31.        url: 'ajax/cargarCesta.php',
  32.        success: callback,
  33.        error: function () {
  34.            alert("Error AJAX en cargarCesta()");
  35.        }
  36.    });
  37. }
  38. var cesta = new Cesta();

Luego desde la consola del navegador escribo:

cesta.cargarCesta();

Ahora he probado añadiendo this._prueba = "lal"; en el constructor, y veo que al hacer un alert o un console.log me muestra "undefined" (solo dentro de ajaxCesta(function(){........});

EDITO: Este código lo incluyo en el archivo .html, desde el achivo .js que contiene este código. cesta.cargarCesta(); lo ejecuto desde la consola una vez ya existe el objeto cesta y después de que la página ya haya cargado completamente.

Para comprobar el valor escribo cesta._arrayCesta;
« Última modificación: 7 Septiembre 2018, 22:29 pm por dobleamarilla » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: [Duda] Problema con javascript CLASES
« Respuesta #5 en: 7 Septiembre 2018, 23:41 pm »

Dentro de un scope, el keyword this cambia según la función en la que estas. Dado que estas usado ajaxCesta y esta es una función anónima, el scope de las variables y el keyword this cambia completamente. Puedes comprobarlo de forma muy simple:

Código
  1. cargarCesta()
  2. {
  3.  
  4.    var a = 'hola';
  5.  
  6.    ajaxCesta(function(data){
  7.        var a = 'adios';
  8.        console.log(this);
  9.        console.log(a);
  10.    });
  11.  
  12.    console.log(this);
  13.    console.log(a);
  14. }

Verás que this en cargarCesta(), te devolverá el objeto Cesta, en cambio el this en ajaxCesta(), te devolvera en este caso, el resultado de la consulta ajax que realiza jQuery. Por tanto, ten en cuenta el scope en el que trabajas. Para solucionarlo, puedes usar una variable propia con el scope dentro de cargarCesta y que está referencie al this del objeto Cesta.

Dicho esto,

Código
  1. var aux = null;
  2. class Cesta
  3. {
  4.    constructor()
  5.    {
  6.        this._arrayCesta = null;
  7.        this._prueba = 69;
  8.    }
  9.  
  10.    cargarCesta()
  11.    {
  12.        let _this = this;
  13.  
  14.        ajaxCesta(function(data){
  15.            if(data.error)
  16.            {
  17.                alert(data.infoError);
  18.            }
  19.            else
  20.            {
  21.                alert(data.error);
  22.                _this._arrayCesta = "lal";
  23.                alert(_this._prueba);
  24.            }
  25.        });
  26.        //this._arrayCesta = aux;
  27.    }
  28. }

Creo que así lo tendrías solucionado.


PD:

Aquí tienes una explicación relativamente sencilla de los scopes y como cambia this.
https://javascriptplayground.com/javascript-variable-scope-this/

Aquí tienes toda la docu sobre this.
https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/this

Saludos
« Última modificación: 7 Septiembre 2018, 23:46 pm por #!drvy » En línea

dobleamarilla

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Re: [Duda] Problema con javascript CLASES
« Respuesta #6 en: 7 Septiembre 2018, 23:50 pm »

Efectivamente. No estaba teniendo en cuenta esto que me comentas. Ahora funciona perfectamente.

Mil gracias! Ya me estaba volviendo loco  ;D

Saludos.
« Última modificación: 7 Septiembre 2018, 23:53 pm por dobleamarilla » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Duda con Clases
.NET (C#, VB.NET, ASP)
Senior++ 6 3,030 Último mensaje 24 Febrero 2012, 10:48 am
por Senior++
Duda con las clases [c++] « 1 2 »
Programación C/C++
Lotux5 11 5,194 Último mensaje 20 Abril 2013, 02:29 am
por rir3760
Duda con clases « 1 2 »
Java
robertito_prado 12 6,180 Último mensaje 1 Agosto 2013, 18:13 pm
por robertito_prado
Petición Ajax con clases javascript
Desarrollo Web
adryprog 1 2,018 Último mensaje 7 Septiembre 2017, 17:12 pm
por adryprog
[javascript][DUDA] ¿Algún ejemplo sencillo de clases en javascript?
Desarrollo Web
.:Xx4NG3LxX:. 6 5,245 Último mensaje 18 Septiembre 2020, 23:41 pm
por .:Xx4NG3LxX:.
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines