blog banner

Javascript extends(). Cómo heredar las propiedades de un objeto en otro

Muchas veces es necesario extender clases. Muchos lenguajes tienen la funcionalidad y aquí describo cómo hacerlo en Javascript.

Estaba tecleando en javascript y me he encontrado en la necesidad de implementar una funcionalidad de otros lenguajes que permite crear un objeto agregando funcionalidades a otro ya existente. En estos otros lenguajes (php, java…) se suele llamar extends, pero en javascript parece ser que no existe.

Para entender su uso, podemos tener un ejemplo básico de ello (ejemplo tonto, aviso) si creamos objetos que representen profesiones

function Informatico(idPersona,nombre,telf)
{
 this.id=idPersona;
 this.name=nombre;
 this.telefono=telf;
 this.lenguajes=new Array();
 this.alertName=function(){alert(this.name)}
 this.getLenguajes=function(){for(var lenguaje in this.lenguajes)alert(lenguaje)}
 this.presentacion=function(){alert(«Soy informático y me llamo» + this.name)}
}


function Piloto(idPersona,nombre,telf)
{
 this.id=idPersona;
 this.name=nombre;
 this.telefono=telf;
 this.numVuelos=0;
 this.alertName=function(){alert(this.name)}
 this.getNumVuelos=function(){return this.numVuelos}
 this.presentacion=function(){alert(«Soy piloto y me llamo» + this.name)}
}

En ambos casos tenemos información redundante que les define como persona y si tuviéramos más objetos representativos de profesión la cosa se complicaría más.


La propiedad extends nos permitiría tener un objeto base «persona» con toda esta información básica y los demás métodos podrían basarse en persona para implementar sus funcionalidades.

function Persona(idPersona,nombre,telf)
{
 this.id=idPersona;
 this.name=nombre;
 this.telefono=telf;
 this.alertName=function(){alert(this.name)}
}

function Informatico(idPersona,nombre,telf) extends Persona //no funciona!!{
 this.lenguajes=new Array(); 
 this.getLenguajes=function(){for(var lenguaje in this.lenguajes)alert(lenguaje)}
}


function Piloto(idPersona,nombre,telf) extends Persona //no funciona!!
{
 this.numVuelos=0; 
 this.getNumVuelos=function(){return this.numVuelos}
}

p=new Piloto(1,»Mariano»,»987987987″);
p.alertName();

Así quedaría mucho más simple y estructurado, no?

Bueno, finalmente he podido tirar de prototype, que permite extender las propiedades y funciones de un objeto básico en todas sus instancias, para poder disponer de esta funcionalidad de una manera lo más parecida posible a su implementación original.

Par ello he modificado el Objeto básico de javascript de la siguiente manera:

Object.prototype.extend=function(o){for (var property in o) this[property]=o[property]};

agregándole una función extend() al que se le pasará por parámetro un objeto base del que se copiarán todas las propiedades desde dónde se instancie.

Así para el ejemplo aquí expuesto

function Persona()
{
 this.id=idPersona;
 this.name=nombre;
 this.telefono=telf;
 this.alertName=function(){alert(this.name)}
}

function Informatico(idPersona,nombre,telf){
 this.extends(new Persona());
 this.lenguajes=new Array(); 
 this.getLenguajes=function(){for(var lenguaje in this.lenguajes)alert(lenguaje)}
}


function Piloto(idPersona,nombre,telf
{
 this.extends(new Persona()); 
 this.numVuelos=0; 
 this.getNumVuelos=function(){return this.numVuelos}
}

p=new Piloto(1,»Mariano»,»987987987″);
p.alertName();

Bueno, esto es todo y espero que os haya servido de ayuda, como me ha servido a mi. Si de todos modos conocéis alguna manera mejor de implementarlo o tenéis alguna sugerencia al respecto no dudéis en comentarlo aquí abajo… 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *