Introduccion

JavaScript es un lenguaje de programacion/scripting ampliamente subestimado e infravalorado. La principal razón de esto es por como surgió: Fue desarrollado primero para un solo navegador (Netscape Navigator) pero pronto, al ver su potencial, fue integrado a la mayoría de navegadores web por sus fabricantes.

Como suele suceder con los lenguajes de creación web, pronto surgió el caos: Extensiones, atributos o métodos no estandares fueron implementados por uno u otro navegador, causando que muchas veces se tuviera que crear un código dos veces, para que corriera en cualquier escenario. Así, gracias a esta falta de estandarización, muchos tomaron al JavaScript como una mala práctica (No les recuerda al CSS?).

Otra de las razones que existen para las criticas hacia JavaScript, es que no esta basado en clases, si no en prototípos (más adelante la explicacion). Para muchos hardcoders que programan en Java o C++ es preferible la construcción de objetos con clases, por ventajas que ya conocemos, y un lenguaje que no las posea no es tan extensible o usable. Además, la extrema simplicidad del JS y su mal uso han originado horrores que todos hemos sufrido (popups, SnapShots, textos parpadeantes, propagandas dinamicas, etc). Y principalmente a eso le debemos el preconcepto hacia el JS.

Sin embargo, gracias a que el ECMAscript es basado en prototípos, el JavaScript tambien lo es lo que lo convierte en un lenguaje orientado a objetos (OOP, por Object Oriented Programming o POO, en español, por Programación Orientada a Objetos). Este tutorial pretende observar como se construyen los objetos en javascript, y como se pueden usar.

Clases vs prototípos

Como ya se mencionó, JS es basado en prototípos. Un prototípo es un objeto abstracto, capaz de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (numeros, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos.

Entonces, en vez de programar una clase, para estar orientados a objetos en JS definimos un prototípo. Las variables dentro de este serán las propiedades, y las funciones serán los métodos:

[Objeto = Prototípo]{
  [ Propiedad = Variable ]
  [ Método    = Funcion  ]
}

Creación del objeto

Entonces, iniciemos la creación del objeto: Para este ejemplo usemos los tradicionales animales. La creación de un objeto se hace con una funcion, que será la constructora, y a la vez la que identifique el objeto.

Creemos una “clase” Gato para empezar… por que todos aman crear las clases “gato”. (Si no me crees, revisa los tutoriales de POO. Si no hay un Gato ahi, el tutorial no vale la pena XD).

Hay dos formas de definir la funcion constructora: Definir una funcion o definir una variable cuyo contenido sea una función. Puede parecer redundante, pero lo es =_=. Veamos ambas formas:

function Gato( parametros ){
	// Codigo
};

o

var Gato= function( parametros ){
	// Codigo
};

Nota: Para el resto del tuto vamos a usar la segunda forma

Propiedades del objeto

Como vimos anteriormente, las propiedades del objeto se definen en forma de variables. Estas variables deben estar situadas dentro de la funcion constructora, marcadas con “this”, para poder ser accesadas como parte del objeto. Las variables reciben parametros que se envian al crear una nueva instancia del objeto (para nuestros propositos, al crear un nuevo gato).

Entonces veamos el ejemplo con nuestro objeto Gato. Un gato tiene como propiedades básicas… digamos que su nombre, su color, y su edad. Entonces estas propiedades serán las que reciba la funcion constructora para ser asignadas, Veamos como:

var Gato= function(nombre, color, edad){
  this.nombre= nombre;
  this.color= color;
  this.edad= edad;
}

Con lo anterior, definimos el Gato, y cómo es ese gato. Sin embargo, algunos de los que son conocedores de la OOP ya deben estar pensando… ¿Y el strict data typing?. El script data typing es lo que regula el tipo de datos que entran a un objeto, y asi mismo el cómo se comportan. Por lo general, los lenguajes basados en clases son muy estrctos con respecto a los tipos de datos que se usan.

Por fortuna, en JS podemos emular el SDT, asignando los tipos de variables de entrada y (si eres un maniaco) chequeando que los valores sean correctos:

var Gato= function(nombre, color, edad){
  this.nombre= new String(nombre);
  this.color= new String(color);
  this.edad= new Number(edad);
  //Por ejemplo
  if( isNaN ( this.edad ) ){
	alert("Error en el data-typing, edad no es un numero");
  }
}

Pues perfecto. Hemos creado la definición de nuestro objeto. Sin embargo nos falta un pequeño detalle. ¡Usar el objeto! Asi que vamos a crear un gato nuevo, y a asignarle las propiedades que ya vimos arriba:

var Michi= new Gato("Michifu", "azul", 2);

Con esto hemos creado una instancia de nuestro objeto, un simpatico “Gato” que se llama Michifu, tiene dos años y es … azul. Azul? Lo importante es que el código funcione, no?

Si queremos comprobar alguna de las propiedades de nuestro objeto lo haríamos así: Variable_que_define_el_objeto (punto) propiedad_deseada. Asi que, por ejemplo, veamos el color del gato Michifu:

alert("El gato es de color "+Michi.color);

Lo que nos da el resultado: “El gato es de color azul”;

Métodos

Ahora, veamos los métodos del objeto. Como mencioné arriba, un metodo es una funcion dentro del objeto. Hay varios metodos para crear un método nuevo: Extendiendo el prototípo, creando una variable tipo funcion, o vinculando una funcion externa al objeto. Veamos todos los casos, y de paso creemos un par de “acciones” para nuestro gato. En los comportamientos basicos del gato, encontramos comer y descansar, asi que:

Método 1: Vinculación externa

Con este metodo declaramos que una de las propiedades, llamará a una funcion externa:

  [...]

  this.comer= comerExterna;

  [...]

  function comerExterna(){
	alert(”El gato “+this.nombre+” se comió un ratón”)
  }

  [...]

  Michi.comer();

  [ Salida = "El gato Michifu se comió un ratón" ]

Método 2: Extension del prototipo

Como los objetos estan compuestos por prototipos en JavaScript, nosotros podemos aumentarle metodos al prototipo del objeto directamente, de la siguiente manera:

[ No tocamos la funcion constructora ]

Gato.prototype.comer= function(){
 alert(”El gato “+this.nombre+” se comió un ratón”)
}

[...]

Michi.comer();

[ Salida = "El gato Michifu se comió un ratón" ]

Método 3: Definicion en la funcion constructora

Con este método, asignamos una propiedad como funcion dentro de la constructora:

[...]

this.comer= function(){
 alert(”El gato “+this.nombre+” se comió un ratón”);
};

[...]

Michi.comer();

[ Salida = "El gato Michifu se comió un ratón" ]

Nótese que en los tres métodos, es posible pasar parametros a la funcion de la manera normal en que cualquier funcion trabaja. Además, en cualquiera de los metodos, this se refiere al objeto (en este caso Gato)

Herencia

Uno de las caracteristicas más interesante de la OOP, es la herencia de métodos / propiedades. En JavaScript lo podemos lograr mediante los prototípos. Entonces, ya tenemos un Gato, verdad? Ahora, creemos una raza de gatos, la raza Siamés. Entonces creemos dos constructoras apartes para cada una, y hagamos que siamés herede de gato:

var Gato= function(){
	this.ojos= 2;
	this.piernas= 4;
};
var Siames= function(){
	this.color= "blanco";
	this.color_ojos= "azul";
}
//Como vemos, ambos tienen propiedades distintas.
//Ahora, heredemos:
Siames.prototype= new Gato();
//Eso hace que se copie el prototipo de Gato y se añada al de Siames.

//Probemos a ver si es cierto
var Catboy= new Siames;
alert(Catboy.ojos);
//Retorna 2! ^_^
alert(Catboy.color);
//Retorna "blanco", asi que conserva sus propiedades

Métodos y propiedades privadas

En lo que hemos visto hasta ahora, los metodos y funciones eran totalmente publicos: Modificables y legibles desde cualquier parte. Echemos un vistazo a como “privatizar” variables:

var Gato= function(nombre){
	this.nombre= nombre;
	//Creamos una variable privada sin asignarle "this" a esta
	var frecuencia= "moderada";
	// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
	function irAlBano(frecuencia){
		alert("El gato va al baño con frecuencia "+frecuencia);
	};
	irAlBano(frecuencia);
}
var Michin= new Gato("Michifu");

El código anterior crea la variable privada “frecuencia”, y la funcion privada “irAlBano”. Para comprobar que la variable sea privada, ejecutemos alert(Michin.frecuencia), lo que devuelve undefined

Sin embargo, aun podemos usar esas variables o funciones tanto en la funcion constructora, como por funciones “getter” o “setter”… las cuales no tienen un atributo “get” o “set” definido, simplemente son funciones que nos permiten leer las propiedades:

var Gato= function(nombre){
	this.nombre= nombre;
	//Creamos una variable privada sin asignarle "this" a esta
	var frecuencia= "moderada";
	// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
	function irAlBano(frecuencia){
		alert("El gato va al baño con frecuencia "+frecuencia);
	};
	this.leerFrec= function(){
		irAlBano(frecuencia);
	};
}
var Michin= new Gato("Michifu");
Michin.leerFrec();

//Nos retorna "El gato va al baño con frecuencia moderada" 

Extension de objetos nativos mediante el prototípo

Como todos los objetos de JS tienen prototipo, nos podemos divertir añadiendo utilidades a nuestros objetos de siempre. Añadamole una funcion a Array, por ejemplo:

Array.prototype.coincidencias= function(palabra){
	coincidencias= 0;
	for(i=0; i< this.length; i++){
		if( this[i] == palabra ){
			coincidencias++;
		}
	}
	alert(”Se encontraron “+coincidencias+” coincidencia(s) de la palabra”);
};
// Podemos usar el array siguiente:
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Ramm”,”Fael”);
// O este
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Mx”,”Mx”);

//Y luego
clabbers.coincidencias(”Mx”);
//Entonces la funcion nos notificará cuantas veces esta una palabra en un array. Cool, no?

Conclusiones

Como vimos, entender la composición del prototipo de un objeto en JS puede ser terriblemente útil. Y entender como trabajar con clases en este lenguaje nos puede hacer más facil la vida: Reutilizar código, ganar velocidad en desarrollo, o dividir el trabajo entre varias personas se vuelve muy sencillo (como ocurre con la POO en general).

Adicionalmente a lo visto, si se quiere mayor similitud la POO clásica, se puede mandar un valor de retorno a cada funcion (como Void usamos True o False) y comprobar si los tipos de datos son correctos con condicionales.

Ahora, una implementacion de POO en JS combinada con jQuery u otra librería similar, puede resultar muy potente cuando de DOM se trata. A desarrollar