Foros del Web » Programando para Internet » Javascript »

"Extensión" de clase

Estas en el tema de "Extensión" de clase en el foro de Javascript en Foros del Web. Buen día compañeros del foro. Adaptando unos códigos de Java a Javascript, me topé con un detalle. En Java creo una clase que extiende un ...
  #1 (permalink)  
Antiguo 18/01/2012, 17:01
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 1 mes
Puntos: 142
"Extensión" de clase

Buen día compañeros del foro.

Adaptando unos códigos de Java a Javascript, me topé con un detalle. En Java creo una clase que extiende un arreglo, así al crear un elemento de la clase "MiLista", esta contiene todas las propiedades de un arreglo, mas algunas variables y métodos personalizadas que le he agregado.

Sin embargo, no he encontrado forma de hacer que una función en Javascript tenga estas propiedades (Ser un arreglo y tener variables y funciones personalizadas). ¿Alguien podría decirme como lograr este efecto?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 18/01/2012, 17:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: "Extensión" de clase

Hola:

Tal vez te sirva usar "prototype"... un ejemplo:

Código:
Date.prototype.toString = function()	{
  Meses = ["enero","febrero","marzo","abril","mayo","junio",
"julio","agosto","septiembre","octubre","noviembre","diciembre"];
  return this.getDate() + "/" + Meses[this.getMonth()] + "/" + this.getFullYear() + " | " + this.getHours() + ":" + this.getMinutes();
}
Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 18/01/2012, 18:14
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 1 mes
Puntos: 142
Respuesta: "Extensión" de clase

Estoy viendo, mas no se bien como poder aplicarlo a lo que necesito. Por ejemplo, algo así:

Código:
function Manzanas(color){ //=tipo array()
  this.color=color;

  this.comer=function(){
    this.pop();
  }
}

var misManzanas=new Manzanas(rojas);
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 20/01/2012, 17:52
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 1 mes
Puntos: 142
Respuesta: "Extensión" de clase

Sigo teniendo problemas... Tengo esta función:

Código PHP:
var ParticleSystem=new Array();
    
ParticleSystem.prototype.gravity=0;
    
ParticleSystem.prototype.wind=0;
    
    
ParticleSystem.prototype.moveParticles=function(){
        for(var 
i=0;i<this.length;++i){
            if (
this[i].age<this[i].maxAge){
                
this[i].x+=this[i].speed*(Math.cos(this[i].angle*(Math.PI/180)))+this.wind*this[i].age;
                
this[i].y+=this[i].speed*(Math.sin(this[i].angle*(Math.PI/180)))+this.gravity*this[i].age;
                
this[i].age++;
            }
            else 
this.splice(i,1);
        }
    } 
Sin embargo, parece que lo hago mal desde la declaración, ya que la consola de Javascript me lanza este error:

Cita:
Uncaught TypeError: Cannot set property 'gravity' of undefined
¿Me pueden dar una ayuda con esta misión?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 20/01/2012, 18:14
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: "Extensión" de clase

Es que las instancias no tienen prototipo. Sólo los constructores tienen prototipo.
Para extender un objeto añadiendo a su prototipo, deberías usar:
instancia.constructor.prototype (ParticleSystem.constructor.prototype en tu caso) o Array.prototype (también en tu caso). ;)

Última edición por Panino5001; 20/01/2012 a las 18:23
  #6 (permalink)  
Antiguo 20/01/2012, 18:31
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: "Extensión" de clase

Por otro lado, te recomendaría que encares el problema desde otro ángulo para no tener que extender objetos nativos, que si no se tiene la debida precaución, puede generar problemas:

Código PHP:
//constructor
function  ParticleSystem(){
   
this.particles=[];
}
ParticleSystem.prototype.mover=function(){
   for(var 
i=0,l=this.particles.length;i<l;i++){
       ...
   }

O bien crear un objeto partícula y trabajar sobre él. O una combinación de ambos. En fin, la idea sería trabajar con el prototipo de tus propios objetos en lugar de alterar el de los objetos nativos.
  #7 (permalink)  
Antiguo 20/01/2012, 20:56
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 12 años, 11 meses
Puntos: 343
Respuesta: "Extensión" de clase

Quizás te interese (está en inglés):

http://perfectionkills.com/how-ecmas...lass-an-array/
__________________
blog | @aijoona
  #8 (permalink)  
Antiguo 20/01/2012, 23:04
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 1 mes
Puntos: 142
Respuesta: "Extensión" de clase

¡Muchas gracias por sus respuestas!

@Panino5001, originalmente tenía esta segunda solución, pero me era confuso, ya que originalmente manejaba arrays, y como usaba lenght a cada momento, ya no sabía si usar myvar.length o myvar.particles.length. Además, espero liberar este código cuando sea sólido, y quiero dar la experiencia más simple posible al usuario. ¡La primer solución parece ir perfectamente!

@Aijoona, ¡Gracias por el enlace! Fue bastante información y terminé mareado a media página. Pero me ayudó a comprender mucho mejor lo que ocurre y sus soluciones.

Al final, terminé por implementar esa solución, bastante simple:

Código PHP:
function ParticleSystem(){
    
this.gravity=0
    
this.wind=0
     
    
this.moveParticles=function(){ 
        for(var 
i=0;i<this.length;++i){ 
            if (
this[i].age<this[i].maxAge){ 
                
this[i].x+=this[i].speed*(Math.cos(this[i].angle*(Math.PI/180)))+this.wind*this[i].age
                
this[i].y+=this[i].speed*(Math.sin(this[i].angle*(Math.PI/180)))+this.gravity*this[i].age
                
this[i].age++; 
            } 
            else 
this.splice(i,1); 
        } 
    }
}
ParticleSystem.prototype=new Array(); 
Ya he hecho varias pruebas en Google Chrome y Firefox, y no he tenido problema alguno. ¿Saben ustedes de algún posible problema que deba considerar? Muchas gracias por todo =D

PD: Leí sobre problemas en ciertos casos con IE8-, no se si este podría presentarlos, pero como dirijo todo esto a HTML5 Canvas, da igual, ya que estos navegadores no le soportan para empezar
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 21/01/2012, 09:56
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: "Extensión" de clase

La sintaxis es válida. No obstante eso, según cómo inicialices las propiedades (age, maxAge, angle, speed, etc) de las partículas podrías tener problemas o no.
Lo más sano sería crear una propiedad particles=[]; e ingresar ahí cada una de ellas
  #10 (permalink)  
Antiguo 22/01/2012, 18:49
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 1 mes
Puntos: 142
Respuesta: "Extensión" de clase

Bueno, tengo una clase llamada Particle, y agrego las partículas con un "ps.push(new Particle(vars...));" o una clase personalizada que he hecho para ese efecto. Hasta el momento no me ha dado problemas, aunque quiero probar en más navegadores (Uso Linux, así que debo esperar oportunidad )

Dejo aquí un ejemplo de lo conseguido con esta clase (Clic en el área negra):
http://juegos.octabot.net/canvas/test/ps/

Así como el código final, el cual he liberado bajo una licencia Creative Commons - Attribution, Share-Alike:
http://juegos.octabot.net/canvas/tes...ticleSystem.js

¡Muchas gracias a todos por ayudarme con esto! :D

Edito: Lo he probado en Internet Explorer 9 sin problemas. Creo que puedo dar por "seguro" este método
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Última edición por daPhyre; 22/01/2012 a las 23:19

Etiquetas: clase, funcion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:38.