Programación Orientada a Objetos en JavaScript

Publicado por Iván Gajate el 25 de octubre de 2012 en Desarrollo Web, JavaScript

Para poder hacer una programación orientada a objetos en JavaScript primero tenemos que entender que TODO lo que declaremos se guarda en el espacio global, es como si en Flash lo guardásemos todo el en root (!!).
Por eso para evitar problemas vamos a meter nuestro código dentro de una función, como si fuese una clase de ActionScript (al ser una función no se ejecutará hasta que la llamemos por primera vez).
Además, podemos guardar esta “clase” en una variable y de esta manera instanciarla tantas veces como queramos:

var Cuadrado = function(){
	alert("Soy un cuadrado!!");
};
 
var unCuadrado = new Cuadrado();
var otroCuadrado = new Cuadrado();
var untercerCuadrado = new Cuadrado();

 

Todas las variables que declaremos dentro de esa función no entrará en conflicto con ninguna variable de fuera, y a su vez, desde fuera se podrá preguntar por las variables de dentro:

var unNumero = 0;
 
var Cuadrado = function(){
	this.unNumero = 5;
	var otraVariable = "Foo";
};
 
var unCuadrado = new Cuadrado();
 
alert(unNumero); // 0
alert(unCuadrado.unNumero); // 5
alert(unCuadrado.otraVariable); // undefined

En este ejemplo “declaramos” la variable unNumero en “this“, que hace referencia al propio objeto creado. De hecho, ese this es lo que devuelve la función cuando hacemos un new Cuadrado() y lo que se almacena en la variable unCuadrado.
Todo lo que no esté declarado en this se ejecuta dentro de la función pero no es accesible desde fuera como en el caso de otraVariable.

Sin embargo, podemos devolver cualquier cosa, por ejemplo un objeto creado por nosotros:

var Cuadrado = function(){
	var _api = {};
	_api.unNumero = 5;
 
	var otraVariable = "Foo";
 
	return _api;
};
 
var unCuadrado = new Cuadrado();
 
alert(unCuadrado.unNumero); // 5
alert(unCuadrado.otraVariable); // undefined

Hemos creado un objeto vacío llamado _api que devuelve la función, y con él todas las variables (y métodos) que hayamos declarado dentro. El resto de variables siguen teniendo como ámbito nuestro nuevo objeto pero no son accesibles desde fuera de este.
¡Ya tenemos métodos públicos y privados! 🙂
En efecto, con este sistema es fácil encapsular nuestros métodos privados para hacer mas robusta nuestra clase, y solo dejar visible ciertos métodos públicos que queramos (de ahí el nombre de la variable 🙂

Solo nos queda un detalle: debido a la “peculiar” manera en que se generan los objetos en JavaScript (magia dice Isra 😉 es mas que aconsejable utilizar un método init declarado al principio de nuestra clase y llamado justo antes del final. De esta manera nos aseguramos que cuando accedemos al objeto éste está perfectamente montado y podemos acceder a sus variables y métodos sin problemas.
Quedaría tal que así:

var Cuadrado = function(){
	var _api = {};
	_api.unNumero;
 
	function init(){
		_api.unNumero = 5;
	}
 
	// Este metodo es publico
	_api.metodoPublico = function(){
		alert("Soy un Cuadrado!");
	}
 
	// Metodo privado, solo accesible desde dentro del objeto
	function metodoPrivado(){
		//
	}
 
	init();
	return _api;
};
 
var unCuadrado = new Cuadrado();
 
alert(unCuadrado.unNumero); // 5
unCuadrado.metodoPublico(); // Soy un Cuadrado!

Esto (menos las tres ultimas lineas) lo guadamos en un archivo independiente llamado Cuadrado.js, lo importamos en nuestro html con la etiqueta script

<script type="text/javascript" src="js/Cuadrado.js"></script>

y ya tenemos nuestra estructura de clases lista para darle caña! 🙂

PD: Mi agradecimiento a Isra y Javi que han tenido la paciencia de enseñarme esta forma de trabajar que tanto me reconforta… 😉

 

3 comentarios para “Programación Orientada a Objetos en JavaScript”

  1. […] ya vimos cuando explicamos los patrones de diseño, todas las variables que creemos fuera de una función van al ámbito global (root en […]

  2. Hola!
    efectivamente ese primer código es extremadamente sencillo, no tiene utilidad real, solo trata de explicar como instanciar varios objetos a partir de una función 🙂

  3. Hola. Llegué aquí de casualidad…

    Todo bien, pero no le veo sentido al primer código:

    var Cuadrado = function(){
    	alert("Soy un cuadrado!!");
    };
     
    var unCuadrado = new Cuadrado();
    var otroCuadrado = new Cuadrado();
    var untercerCuadrado = new Cuadrado();
    

    A mi parecer se está declarando una ‘clase’ Cuadrado de forma incorrecta. Un alert sin mas no tiene sentido, no está dentro de una función que se llame, ni se está guardando en una variable la llamada a un alert… :S

    Saludos