[Resumen] Javascript Orientado a

Objetos.
Si bien la mayora de los desarrolladores utilizan a Javascript solamente
a travs de algunas funciones y no ms que algunas llamadas durante
ciertos eventos, lo cierto es que Javascript es mucho ms que eso.
Vamos a ser sinceros, no es un lenguaje orientado a objetos como los
que estamos acostumbrados utilizar, con el concepto universalmente
aceptado de "Clases" e "Instancias". En Javascript las cosas son un
tantito diferentes.
Javascript fue originalmente concebido como un lenguaje
de programacin funcional, y no un lenguaje tpicamente orientado a
Objetos, porque vamos, modas son modas y en ese entonces estaban
muy de moda los lenguajes al estilo C (C, C++, Java, el que prefieran).
Esto caus dos modificaciones en el lenguaje. La aparicin del concepto
de Objeto - junto a la herencia prototpica-, y el operador "new".
As, Javascript es muy confuso al comienzo para muchos
desarrolladores, sobre todo aquellos que no han programado mucho, por
pensar que estn en un mundo, y en realidad se encuentran en otro.
Pero comprendiendo solo un par de conceptos clave, se podr entender
mucho mejor este lenguaje.
Solo tengan en cuenta que este es un artculo inicial, que solo tocar
varios de estos temas muy por encima y ser necesario ms
investigacin por parte del estudiante de este lenguaje, para comprender
ms profundamente estos conceptos.
Como nota aclaratoria, vamos a estar utilizando Javascript puro para los
ejemplos, sin ningn agregado extra. O sea que si solo sabes utilizar
jQuery (o alguna librera como sta) y nunca has programado solamente
en Javascript, esta es una buena oportunidad para que veas un poco
ms a fondo este lenguaje.

El Objeto Literal
Un Objeto, en Javascript, difiere respecto a otros lenguajes, a que no
necesita ser la instancia de una Clase. Simplemente es una estructura de
propiedades/valor. Nada ms. Nada menos. Muy similar a un Array, solo
que ste ltimo solo acepta ndices numricos, cuando el Objeto en
Javascript acepta "cadenas de texto" (strings) como claves. Y como valor,
podemos asignar otras cadenas, nmeros, constantes, funciones (aqu

es donde comenzamos con el concepto de "mtodo") y hasta otros

objetos. Un objeto se puede declarar de varias maneras en Javascript.
Vamos a ver la ms simple de todas:
var circulo = {};
circulo.radio = 9;
circulo.color = 'red';

Pero tambin podemos definir todos los valores de un Objeto de una

manera ms directa:
var circulo = {
radio : 9,
color : 'red'
}

Mtodos
Cmo habamos dicho, un Objeto puede contener como valor, una
funcin o una referencia a una funcin. Como sabemos, en Javascript
una funcin es un elemento de "primer nivel", o sea, pueden ser
guardadas dentro de variables. Veamos como entra esto en juego
cuando hablamos de Objetos guardando funciones.
function calcularArea(radio) {
return radio * radio * Math.PI;
}
var circulo = {
radio : 9,
area : calcularArea(this.radio)
}

De esta manera, el objeto circulo posee un atributo llamado area que

contiene el resultado de llamar a la funcin calcularArea. Esto es...
guarda el RESULTADO de la funcin, pero no la funcin en si. Para que
el objeto guarde la funcin, podemos hacer lo siguiente:
var circulo = {
radio: 9,
area : calcularArea,
}

As, para conocer el rea de nuestro Objeto Crculo, simplemente

llamamos al mtodo que acabamos de crear.
var area = circulo.area(circulo.radio);

No les suena que hay algo raro ac? Si definimos el mtodo area como
la referencia a una funcin, entonces, nuestro mtodo no es ms que una
funcin global! No nos sirve tenerla de esta manera. Por eso, vamos a
definir los mtodos como realmente corresponde. Y aqu es donde entra
el concepto de this.
var circulo = {
radio : 9,
area : function() {
return this.radio * this.radio * Math.PI;
}
}

Qu funcin tiene el operador this aqu?

Imaginen a this como un parmetro implcito que se le pasa a cada
funcin, indicando en su valor, al contexto en el que se encuentra la
funcin. En este caso del ejemplo, this obtiene como valor una referencia
el objeto circulo. Por eso cuando nos estamos refiriendo
athis.radio Javascript sabe que no nos referimos a una
variable radio global, sino a la que est definida dentro de this.
Cuando definimos una funcin global, como el calcularArea del ejemplo
anterior, la variable thisapunta al contexto global, que es lo mismo
que window. Cmo pueden chequear esto rpidamente? Abran la
consola de alguno de sus navegadores y escriban:
function test() {
console.log(window == this);
}
test();

Un Objeto. Varias Instancias.

Cuando en Javascript creamos un objeto como hemos visto hasta ahora,
no estamos hablando de una clase. Estamos hablando de un Objeto,
listo, preparado para funcionar. Lo que en otros lenguajes
llamaramos una instancia. Pero esto no es del todo til si queremos

tener varias instancias de un mismo objeto al mismo tiempo. As que aqu

es donde entra en juego el operador new.
El operador new se aplica, por ms que parezca extrao, sobre una
funcin y no sobre un objeto. Por qu?, se preguntarn. Bsicamente,
porque Javascript utilizar esta funcin en particular
como constructor del Objeto que queremos instanciar, y nos devolver
un Objeto inicializado. Vamos a ver un ejemplo:
function Circulo() {}
var redondo = new Circulo();

Lo que estamos haciendo aqu es crear una instancia de un

tipo nuevo de Objeto llamado Circulo, y asignndoselo a la
variable redondo. Vamos un paso ms all:
function Circulo() {
this.radio = 2;

this.area = function() {
return this.radio * this.radio * Math.PI;
}

var redondo = new Circulo();

redondo.area() // devuelve 12.566370614359172

Aqui vemos nuevamente el uso de this para indicar que estamos con un
contexto nuevo. En este caso this no representa al objeto window ya que
estamos utilizando new. Ahora, this representa el contexto del
Objeto Circulo que estaremos devolviendo y asignando a la variable. As,
podemos contar con distintas instancias aunque utilicen todas el mismo
cdigo de inicializacin. Vamos con un ejemplo ms completo donde
paramos el parmetro radio:
function Circulo(radio) {
this.radio = radio;
this.area = function() {
return this.radio * this.radio * Math.PI;
}
}
c1 = new Circulo(3);
c2 = new Circulo(4);
c1.area() // devuelve 28.274333882308138
c2.area() // devuelve 50.26548245743669

Herencia. Prototype.
Una de las diferencias claves de Javascript con otros lenguajes de
programacin, es la manera en la que implementa la Herencia de
Objetos. En Javascript se utiliza la Herencia Prototpica, y esto implica
ciertas cosas:
* Un Objeto por defecto, siempre hereda sus mtodos de otro Objeto,
que se encuentra accesible a travs del atributo prototype.
* Uno puede cambiar, en tiempo de definicin, de qu tipo de Objeto se
hereda.
* La Herencia prototpica es una cadena, si se hereda de un Objeto, a su
vez ste heredar de otro objeto. Al final de la cadena, siempre se
heredar del Objeto Object.
Volviendo con los ejemplos anteriores, vamos a extender nuestro
Objeto circulo directamente modificando el Objeto prototype que hereda.
function Circulo(radio) {
this.radio = radio;

this.area = function() {
return this.radio * this.radio * Math.PI;
}

Circulo.prototype.diametro = function() {
return this.radio * 2;
}
Circulo.prototype.circunferencia = function() {
return Math.PI * this.diametro();
}
var circulo = new Circulo(3);
circulo.area() // devuelve 28.274333882308138
circulo.diametro() // devuelve 6
circulo.circunferencia() // devuelve 18.84955592153876

De esta manera, pudimos modificar agregando dos nuevos

mtodos, diametro y circunferencia, tan solo modificando el objeto
prototype. Pero si queremos que un objeto herede completamente los
mtodos de OTRO objeto, entonces la manera de llevar a cabo la
herencia es reemplazando el objeto prototype por completo. Veamos
esto en un ejemplo totalmetne distinto:

function humano() {
this.ojos = 2;
this.brazos = 2;
this.alimentacion = "omnivoro";
}
function freddito() {
this.alimentacion = "paleo";
this.conocimiento = Infinity;
}
freddito.prototype = new humano();
var Freddier = new freddito();
console.log(Freddier.brazos); // devuelve 2
console.log(Freddier.alimentacion); // devuelve "paleo"

Composicin de Objetos.
Para completar este repaso de cmo trabajar con Javascript orientado a
objetos, un tema que no es menor, la composicin de objetos.Ya
sabemos como crear clases, dotndolas de atributos y mtodos, como
extender un objeto de otro, y como llegar a tener nuestra funcionalidad
encapsulada. Pero an nos queda ver cmo podemos hacer que los
objetos trabajen juntos entre si. La manera en la que se crean estructuras
de objetos y se trabaja con ellos se llama Composicin y hay ciertos tipos
pre-definidos.
Composicin.
En este tipo de composicin, el Objeto principal o "padre" es quin define
o contiene los objetos internos o "hijos". Al eliminarse este objeto
principal, los objetos internos no tienen sentido de existencia por si
mismos, y son eliminados tambin. Un ejemplo de esto sera al decir El
Objeto A tiene un Objeto de clase B.
function Tentaculo() {}
function Pulpo() {
this.extremidades = [];

for(var i = 1; i <= 8; i++) {

this.extremidades.push(new Tentaculo());
}

var pulpopaul = new Pulpo();

console.log(pulpopaul.extremidades);

Asociacin.
En la Asociacin, se termina definiendo o componiendo un objeto
utilizando otros objetos, pero con una relacin distinta a la Composicin.
Aqu, al elminiarse uno de los Objetos, los dems an mantienen un
sentido y siguen su curso. Un ejemplo de esto sera decir El Objeto
A usa un Objeto de tipo B.
function Profesor() {
this.name = "Pablo Rigazzi";
}
function Curso (profesor) {
this.profesor = profesor;

this.saludar = function() {
console.log("Hola alumnos, soy el profesor " + this.profesor.name);
}

var yo = new Profesor();

var TeAmoJavascript = new Curso(yo);
TeAmoJavascript.saludar();

Polimorfismo.
Si bien ya vimos ejemplos de esto en otros ejemplos de este mismo
texto, ahora vamos a ponerle oficialmente un nombre. El Polimorfismo en
un lenguaje orientado a objetos, nos ofrece la oportunidad de que
distintos Objetos, puedan responder a mtodos o atributos del mismo
nombre, y por eso, puedan ser reemplazados por otros Objetos. En el
caso del Polimorfismo, la manera ms habitual de referirse es El Objeto
A es un subtipo o clase de Objeto B.
En el siguiente ejemplo, vamos a crear dos Objetos, con una interfaz
similar (los mtodos que contienen) y veremos como pueden ser
utilizados indistintamente, y Javascript reconoce perfectamente cul tiene
que utilizar en cada caso.
function expresarse( ser_vivo ) {
ser_vivo.hablar();
}
function Gato()
{
this.hablar = function() {
var parasiempre = '';
for(var i=0; i<1000; i++) {
parasiempre += 'nyan';
}

console.log(parasiempre);
}

function Humano()
{
this.hablar = function() {
console.log('Hola, soy un humano!');
}
}
function Freddier()
{
this.hablar = function() {
console.log('Christian, contexto!');
}
}
Freddier.prototype = new Humano();

Teniendo esta definicin de clases, y gracias al Polimorfismo, el siguiente

cdigo es vlido y se ejecuta correctamente:
var humano = new Humano();
var freddito = new Freddier();
var nyancat = new Gato();
expresarse(humano);
'Hola, soy un humano!'
expresarse(freddito);
"Christian, contexto!"
expresarse(nyancat);
Se imaginaran...