19/01/13 Programación orientada a objetos (OOP) con Javascript

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/ 1/6

¿Qué quieres buscar? BuscarBuscar

» Tutoriales / Programación orientada a objetos (OOP) con Javascript

Programación orientada a objetos (OOP) con Javascript

Por Lunatic Lycanthrop el 09 de Octubre de 2007 con 112,463 visitas HTML, CSS y Javascript Otros tutoriales por Lunatic Lycanthrop.

JavaScript es un lenguaje deprogramacion/scripting ampliamentesubestimado e infravalorado. La principal razónde esto es por como surgió: Fue desarrolladoprimero para un solo navegador (NetscapeNavigator) pero pronto, al ver su potencial, fueintegrado a la mayoría de navegadores web porsus fabricantes.

Como suele suceder con los lenguajes decreación web, pronto surgió el caos:Extensiones, atributos o métodos no estandaresfueron implementados por uno u otronavegador, causando que muchas veces se tuviera que crear un código dos veces, para quecorriera en cualquier escenario. Así, gracias a esta falta de estandarización, muchos tomaron alJavaScript 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 enclases, sino en prototípos (más adelante la explicacion). Para muchos hardcoders queprograman en Java o C++ es preferible la construcción de objetos con clases, por ventajas queya conocemos, y un lenguaje que no las posea no es tan extensible o usable. Además, laextrema simplicidad del JS y su mal uso han originado horrores que todos hemos sufrido(popups, SnapShots, textos parpadeantes, propagandas dinamicas, etc). Y principalmente a esole debemos el preconcepto hacia el JS.

Sin embargo, gracias a que el ECMAscript es basado en prototípos, el JavaScript tambien lo eslo que lo convierte en un lenguaje orientado a objetos (OOP, por Object OrientedProgramming o POO, en español, por Programación Orientada a Objetos). Este tutorialpretende 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, capazde 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 deobjetos.

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

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

Creación del objeto

Foros Blog Tutoriales Cursos Videotutoriales Comic

Publica un tutorial ¿Qué es Cristalab? Tags Ejemplos Contáctanos Anime

o Buscar..¿Olvidaste tu usuario o clave? EntrarEntrarUsuario Contraseña registrate

19/01/13 Programación orientada a objetos (OOP) con Javascript

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/ 2/6

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 queidentifique el objeto.

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

Hay dos formas de definir la funcion constructora: Definir una funcion o definir una variable cuyocontenido sea una función. Puede parecer redundante, 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 :D

Propiedades del objeto

Como vimos anteriormente, las propiedades del objeto se definen en forma de variables. Estasvariables deben estar situadas dentro de la funcion constructora, marcadas con "this", parapoder ser accesadas como parte del objeto. Las variables reciben parametros que se envian alcrear 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 propiedadesbásicas... digamos que su nombre, su color, y su edad. Entonces estas propiedades serán lasque 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 sonconocedores de la OOP ya deben estar pensando... ¿Y el strict data typing?. El script datatyping es lo que regula el tipo de datos que entran a un objeto, y asi mismo el cómo secomportan. Por lo general, los lenguajes basados en clases son muy estrctos con respecto a lostipos de datos que se usan.

Por fortuna, en JS podemos emular el SDT, asignando los tipos de variables de entrada y (sieres 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ñodetalle. ¡Usar el objeto! Asi que vamos a crear un gato nuevo, y a asignarle las propiedades queya vimos arriba:

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

Con esto hemos creado una instancia de nuestro objeto, un simpatico "Gato" que se llama

19/01/13 Programación orientada a objetos (OOP) con Javascript

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/ 3/6

Michifu, tiene dos años y es ... azul. Azul? Lo importante es que el código funcione, no? :P

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 elcolor 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 dentrodel objeto. Hay varios metodos para crear un método nuevo: Extendiendo el prototípo, creandouna variable tipo funcion, o vinculando una funcion externa al objeto. Veamos todos los casos, yde paso creemos un par de "acciones" para nuestro gato. En los comportamientos basicos delgato, encontramos comer y descansar, asi que:

Nota: Lo que está en corchetes cuadrados [ ] no es código. No lo coloques.Es simplemente una guía para que entiendas por donde va el código y cualserá su resultado.

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 aumentarlemetodos 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");

Te puede interesar

Cantidad de decimales en un Number enJavascript

HTML más simple y reusable con MWML:Minimal Web Meta Language

MVC y programación orientada a objetosen Javascript

Programación orientada a objetos enJavascript

MVC en Javascript, con AJAX y jQuery, Parte 2:

19/01/13 Programación orientada a objetos (OOP) con Javascript

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/ 4/6

//[...]

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 normalen 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 dosconstructoras 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 ciertovar 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) //Creamos una variable privada sin asignarle "this" a esta this.nombre = nombre; // Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal var frecuencia = "moderada"; 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". Paracomprobar que la variable sea privada, ejecutemos alert(Michin.frecuencia), lo que devuelveundefined

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);

Controladores

Programación Orientada a Eventos y suPropagación en AS3

10 secretos de CSS3 que tal vez noconocías

Singleton y funciones estáticas en AS3

Fuentes con calidad en IE7 e IE8 usandofont­face y jQuery

Aplicación básica con NodeJS, Express,Jade y Stylus

« Regresar a los tutoriales

19/01/13 Programación orientada a objetos (OOP) con Javascript

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/ 5/6

Instalar node.js, Jade, Stylus y CoffeeScripten Windows

Recepción de parámetros en una funciónestilo TwenMax/TweenLite en AS3

La revolución de Javascript

Envia un comentario (0)

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 anuestros 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 esteclabbers = Array("Freddie", "Mx", "Neo_JP", "Zarzamora", "Mx", "Mx");//Y luegoclabbers.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 sevuelve 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 valorde retorno a cada funcion (como Void usamos True o False) y comprobar si los tipos de datosson correctos con condicionales.

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

TwittearTwittear 19 Me gusta A 51 personas les gusta esto. Sé el primero de tus amigos.

javascript poo

Bridge Java and .NETwww.CodeMesh.com

Extreme performance, trivial deployment, drop­dead easy

19/01/13 Programación orientada a objetos (OOP) con Javascript

www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/ 6/6

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedeshacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quierespublicar tu URL y avatar?

Inicia sesiónInicia sesión

¿No estás registrado aún pero quieres hacerloantes de publicar tu comentario?

RegistrateRegistrate

Blog Foros Tutoriales Tutoriales de Flash Ejemplos .fla Anime Videotutoriales Cursos Curso de Flash Curso de HTML Tags