Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

POO en JavaScript (Encapsulación)

POO en JavaScript (Encapsulación) 20.OCT.16

Alvaro José Rios Ch
Fundador WebBizarro

Este es el segundo artículo de una serie de tres donde hablaremos sobre programación orientada a Objetos en JavaScript así que si no has visto el primero puedes hacerlo aquí y enterarte de que va todo esto.

Muy bien la última vez dijimos que hay dos patrones de diseño relacionados con la programación orientada a objetos en JavaScript, hoy hablaremos del primero de ellos y se trata de la creacion de objetos.

En JavaScript hay dos formas de crear objetos la primera es hacerlo mediante el patrón de creación literal por ejemplo:

var objeto = {nombre: "Web Bizarro", url: "http://www.webbizarro.com"};

La otra forma es crear una función constructor, lo que conoceríamos como clases en otros lenguajes en JavaScript son funciones.

function Persona (nombre, profesion) {} 
//Perosona() es la función constructora

var richard = new Persona ("Richard", "Developer"); 
//  richard es un objeto creado a partir dela función construtura


En el último ejemplo vemos que podemos crear una instancia del objeto a partir de una función constructora y luego podemos agregar atributos o métodos a esas instancias. Hay muchas formas de crear objetos a partir de funciones constructoras y a partir de ahora cuando nos refiramos a creación de objetos en el tutorial estaremos hablando de este método.

Encapsulación

Ya hemos aprendido que la encapsulación se trata de colocar todo dentro de los objetos. En JavaScript el concepto de encapsulación se logra combinando las funciones constructoras junto con el patrón de prototype y esta es la mejor forma de conseguir lo que estamos buscando que es colocar los métodos y atributos de un objeto dentro de si mismo.

Ahora veamos un ejemplo que iremos explicado poco a poco. Vamos a crear una pequeña aplicación donde tendremos usuarios que tendrán un puntaje en un examen.

var Usuario = function(nombre, email){
    this.nombre = nombre;
	this.email = email;
	this.puntos = [];	
};

Aquí definimos las propiedades del usuario en una función constructora como lo habiamos visto anteriormente.

Usuario.prototype = {
    constructor:  Usuario,
	salvarPuntos: function (puntos) {
        this.puntos.push(puntos);
	},
	mostrarNombrePuntos: function () {
		var todosPuntos =  this.puntos.length > 0 ? this.puntos.join(",") : "No hay puntos aun";
		return this.nombre + todosPuntos;
	},
	cambiarEmail: function (newEmail) {
		this.email =  newEmail;
	}
};


Aquí lo que hacemos es modificar la propiedad prototype con un objeto literal esto nos permitirá crear todos nuestros métodos en el objeto y en un futuro heredar estas propiedades a otros objetos. Esta forma es muy cómoda de usar ya que escribimos todo el comportamiento del objeto de una vez, aunque también podemos hacerlo de uno en uno de esta forma.

Usuario.prototype.constructor = Usuario;
Usuario.prototype.salvarPuntos = function (puntos) {
    this.puntos.push(puntos);
};


Sobrescribir el prototype con un objeto literal permite ver la encapsulación del objeto de una mejor forma y por otro lado es mucho menos código el que tenemos que escribir.

Algo importante que debemos decir es que usamos prototype porque queremos que las instancias que creemos de este objeto hereden los atributos y métodos del mismo. Otra cosa que debes tomar en cuenta es la línea donde colocamos constructor, esta se usa para sobrescribir el método constructor del objeto lo que quiere decir que esa línea tienes que incluirla y esta una de las desventajas de sobrescribir prototype con un objeto literal ya que la función constructora por default desaparece y tenemos que colocarla manualmente.

var usuario1 = new Usuario("Alvaro", "alvaro@ejemplo.com");
usuario1. cambiarEmail("alvaro2@ejemplo.com");
usuario1.salvarPuntos(10);
usuario1.salvarPuntos(15);
usuario1.mostrarNombrePuntos(); // alvaro 10,15

var usuario2 = new Usuario("Gianfranco", "gianfranco@ejemplo.com");
usuario2.salvarPuntos(12);
usuario2.salvarPuntos(17);
usuario2.mostrarNombrePuntos(); // Gianfranco 12,17


Como vemos cada objeto es independiente y encapsula sus metodos y propiedades lo quelo hace independiente de los otros. Mediate este metodo puedes usar operadores standar para los objetos incluyendo instanceOf y for-in mediante la propiedad hasOwnProperty.

En el próximo artículo hablaremos sobre laherencia en la POO en JavaScript.