El problema que encontramos a iniciar-nos en la programación orientada a objetos (POO) en JavaScript es que existen múltiples maneras de realizar las mismas acciones i esto puede generarnos muchas confusiones. En este artículo veremos la estructura básica y estándar para trabajar con objetos.
Cuando queramos crear la estructura de una clase lo mejor que podemos hacer es seguir el proceso lineal que detallamos a continuación:
- Primero de todo tener claro que clase hemos de crear y el por qué necesitamos crearla. En JavaScript una clase se crea exactamente igual que una función. A continuación creamos la clase Persona.
function Persona(){ }
- El siguiente paso es definir las propiedades de este objeto, recordad que las propiedades son las características propias de la clase.
Dentro de una clase existen dos tipos de propiedades las públicas que son accesibles desde fuera del objeto y se definen con «this» y las propiedades privadas que sólo son accesibles desde dentro del objeto y se definen utilizando la palabra «var». En nuestra clase las propiedades podrían ser: ojos, orejas, piernas… A continuación veremos como las declaramos.function Persona(){ this.ojos //Al utilizar this estamos indicando que es una propiedad pública de esta clase. var piernas = 2; //Al utilizar var indicamos que es una propiedad privada de modo que solo será accesible por los métodos que tenga esta clase. }
- Una vez definidos los atributos de nuestra clase definiremos los métodos de esta que vendrían a ser las acciones que puede realizar una clase. Lo más habitual es que su nombre este compuesto por un verbo. En nuestra clase un método podría ser «caminar».
Para definir un método lo que haremos será asignar una función a una variable, vamos a ver como implementar nuestro método a la clase:function Persona(){ this.ojos //Al utilizar this estamos indicando que es una propiedad pública de esta clase. var piernas = 2; //Al utilizar var indicamos que es una propiedad privada de modo que solo será accesible por los métodos que tenga esta clase. //Definimos el método caminar y las funciones que este ha de realizar this.caminar = function(){ alert("¡Esta persona camina!"); } }
- Que pasaría si necesitásemos acceder al valor de las propiedades una vez hemos creado el objeto ya sea para modificarlo o utilizarlo desde fuera de este objeto? Para los atributos que hemos definido como públicos no tenemos ningún problema ya que podemos acceder a ellos desde fuera de los objetos, como veremos en el punto 6, pero para los que hemos definido como privados lo tenemos más complicado. Para conseguirlo lo que haremos será crear unos métodos públicos que se encarguen de realizar estas acciones; en el estándar de la POO a estos métodos se les suele llamar GETTER y SETTER, los primeros sirven para devolver el valor de la propiedad, su nombre acostumbra a empezar por la palabra «get» seguida del nombre de la propiedad que queremos devolver su valor. Los segundos sirven para modificar el valor de la propiedad, la nomenclatura es la misma descrita antes pero empezando con la palabra «set». Veamos como aplicar estos métodos para nuestra propiedad privada «piernas».
function Persona(){ this.ojos //Al utilizar this estamos indicando que es una propiedad pública de esta clase. var piernas = 2; //Al utilizar var indicamos que es una propiedad privada de modo que solo será accesible por los métodos que tenga esta clase. //Definimos el método caminar y las funciones que este ha de realizar this.caminar = function(){ alert("¡Esta persona camina!"); } //Definimos el SETTER para modificar el valor de la propiedad privada piernas y que recibirá como atributo el nuevo valor de esta propiedad this.setPiernas = function(valor){ piernas = valor; //Al ser una propiedad privada no utilizaremos this para referirnos a ella (en el caso de hacerlo en realidad lo que haríamos sería referirnos a una propiedad pública llamada piernas y que no existe) } //Definimos el GETTER para obtener el valor de la propiedad privada piernas this.getPiernas = function(){ return piernas; //Al ser una propiedad privada no utilizaremos this para referirnos a ella (Si utilizásemos this nos devolvería UNDEFINED ya que nos estaríamos refiriendo a una propiedad pública que no existe) } }
- Ahora ya tenemos la clase creada y el siguiente paso es probar que todo funciona correctamente. Lo primero que haremos será crear una instancia/objeto de esta clase:
var Persona1 = new Persona();
- Ahora que ya tenemos el objeto creado podemos por un lado acceder y modificar los atributos públicos desde fuera del objeto o llamar a los métodos públicos creados para este mismo fin en el caso del atributo privado.
alert("Esta persona tiene " + Persona1.ojos + " ojos.") //Accedemos al valor de la propiedad pública ojos Persona1.ojos = 3; //Modificamos el valor de la propiedad ojos alert("Esta persona tiene " + Persona1.ojos + " ojos.") //Vemos que realmente se ha modificado su valor Persona1.caminar(); //Llamamos al método público alert("Esta persona tiene " + Persona1.getPiernas() + " piernas.") //Accedemos a la propiedad privada piernas a través del método público que hemos creado Persona1.setPiernas(1); //Modificamos el valor de la propiedad privada utilizando el método público creado para tal fin alert("Esta persona tiene " + Persona1.getPiernas() + " piernas.") //Accedemos a la propiedad privada piernas y vemos que realmente se ha modificado su valor.
Los pasos que acabamos de ver son la estructura básica para la creación i utilización de una clase en la POO. Otra característica de la POO es que cuando creamos un objeto podemos inicializar sus propiedades utilizando el constructor de este enviando los valores como parámetros en el momento de su creación. En realidad JavaScript no tiene un constructor propiamente dicho, lo que nosotros llamamos constructor en realidad es utilizar una característica que tiene JavaScript que al crear una instancia de una clase ejecuta todo el código que esta contiene. Veamos pues como inicializaremos las propiedades del nuevo objeto utilizando el supuesto constructor de JavaScript:
//En el momento de definir la clase indicaremos que ha de recibir dos parámetros que serán los que utilizaremos para inicializar las propiedades
function Persona(pOjos, pPiernas){
//Aprovechamos el constructor de JavaScript para inicializar las propiedades del objeto creado
this.ojos = pOjos;
var piernas = pPiernas
}
var numOjos = 2;
var numPiernas = 2;
var Persona1 = new Persona(numOjos, numPiernas);