Blog
JavaScript orientado a objetos
- Publicado por: Rafael Fernandez
- Categoría: Nivel Medio Javascript
Teniendo claro los conceptos básicos sobre este paradigma, podemos proceder a explicar en este módulo:
- Cómo establecer una clase,
- La creación de un objeto real y
- Que constructores utilizar.
Es digno de notar que los datos e inclusive las funciones de los objetos se encapsulan en paquetes a los cuales se asigna un nombre para poder identificarlos, estructurarlos y lograr acceder durante el proceso.
Estos objetos además de facilitar la programación también resultan útiles al enviar información por la red.
Por ejemplo, volviendo al objeto “persona”, podemos notar que hemos definido datos genéricos y funcionalidad que son comunes en la vida real como el nombre, los pasatiempos, la función saludo, entre otros; y así como estas, existen muchas características más que se pueden añadir (dirección, rasgos de personalidad, color de ojos, peso, etc).
A todo lo antes mencionado se le conoce como abstracción; es decir, estamos creando un modelo simple de un concepto más complejo que representa sus características de modo que sea fácil de manejar y de esta manera cooperar con la función del programa.
A continuación, explicaremos los pasos para llevar a cabo la creación de objetos y la construcción de instancias.
Paso 1: Definir una clase de objeto
Recordemos que una clase es algo abstracto, podríamos definirlo como una plantilla que hace posible representar una entidad o un concepto.
De modo que el primer paso será determinar que vamos a representar. En este caso continuaremos con el objeto “persona”.
Persona:
- Nombre (primer nombre, segundo nombre)
- Edad
- Pasatiempo
- Saludo
Paso 2: Crear un objeto real
Para algunos puede resultar un poco confuso diferenciar entre clase y objeto; pero lo cierto es que no tiene porque ser tan complicado.
Para entenderlo pensemos en la clase como una plantilla o una hoja de registro genérica, mientras que el objeto es una instancia de esa clase, una entidad en particular que cumple con las características descritas en la plantilla.
Por lo tanto, un objeto real de la clase persona podría ser:
Persona1:
- Nombre: Luis Alejandro
- Edad: 17
- Pasatiempo: patinar, viajar, leer
- Saludo: Hola soy Luis Alejandro
Claro está, la mayoría de aplicaciones no se mueven con una sola instancia, de modo que podemos crear más instancias de la misma clase identificándolas con un nombre único. Por ejemplo:
Persona2:
- Nombre: Carmen Cecilia
- Edad: 30
- Pasatiempo: caminar, leer, nadar
- Saludo: Hola soy Carmen Cecilia
Y así sucesivamente hasta crear todas las instancias necesarias, que incluso como vimos antes pueden ser creadas mediante un formulario colgado en la web.
Nota: Esta función constructora de la clase que se ejecuta para crear una nueva instancia se denomina “instanciación”.
Clases basadas en otras clases
La programación orientada a objetos ofrece la posibilidad de crear clases secundarias que son capaces de heredar características de la clase principal.
En otras palabras, podemos crear clases más específicas, como jefe y empleado que podrían reutilizar las funcionalidades de la clase persona sin necesidad de duplicarlas, y con relación a sus diferencias se pueden definir aspectos especializados directamente en ellas.
Esta capacidad de la POO se le conoce como polimorfismos y resulta muy útil pues las características comunes de diversos tipos de objetos pueden definirse solo una vez.
Constructores e instancias de objetos
Es momento de poner en práctica la teoría antes expuesta. Para ello daremos a conocer la función conocida como constructor, el cual sirve para crear objetos y definir sus características.
Es una herramienta muy eficaz ya que hace posible la creación de múltiples objetos según lo que se necesite y además cuando la utilizamos para generar una nueva instancia de un objeto, se vincula su funcionalidad principal por medio de una cadena de prototipos.
Para mayor comprensión veamos un sencillo ejemplo:
- Primero crearemos la clase persona.
function Persona(nombre) { this.nombre = nombre; this.saludo = function() { alert('Hola, me llamo ' + this.nombre + '.'); }; };
Si bien esta función no devuelve ningún valor, lo cierto es que es perfecta para definir propiedades y métodos.
Además, el uso de la palabra clave “this”, hace que el nombre de la propiedad sea igual al valor pasado mediante la llamada del constructor y así el método igualmente utiliza dicho valor.
Por otra parte, es importante señalar que la denominación del constructor debe escribirse con la primera letra mayúscula; de esta manera se pueden distinguir estas funciones dentro del código.
- Luego haciendo uso del constructor crearemos una nueva persona o nueva instancia de la clase.
var persona1 = new Person('Luis'); var persona2 = new Person('Carmen');
Cabe resaltar que la palabra clave “new” es la responsable de indicar al navegador que se está creando una instancia nueva del objeto en cuestión.
Para probar el código solo basta escribir las siguientes líneas.
persona1.nombre persona1.saludo(); persona2.nombre persona2.saludo();
Como se muestra en el ejemplo, han sido creados dos objetos nuevos con características similares, pero de espacio de nombres diferentes: es decir que, aunque tienen las mismas propiedades y métodos utilizan su propia denominación, razón por la que resulta importante usar “this” pues así se usan sus propios valores.
Hablaremos un poco más sobre la palabra clave “this” en el siguiente módulo.
Por ahora veamos un ejemplo más completo de creación de objetos.
-
Creando la clase
function Persona(nombre1, nombre2, edad, pasatiempo, profesion) { this.nombre = { 'nombre1': nombre1, 'nombre2' : nombre2 }; this.edad = edad; this.pasatiempo = pasatiempo; this.profesion = profesion; this.saludo = function() { alert('Hola, mi nombre es' + this.nombre.nombre1 + '.'); }; }
-
Instancia de la clase
var persona1 = new Persona('Jose', 'Andres', 39, ['music', 'skiing'], 'maestro');
-
Acceso a propiedades y métodos
persona1['edad'] persona1.pasatiempo [2] persona1.saludo()