Entradas con la etiqueta ‘poo’

JS – Métodos Estáticos en JavaScript

Publicado por Iván Gajate el 26 de octubre de 2014 en JavaScript | Los comentarios están cerrados.

A veces podemos necesitar que una clase que instanciemos muchas veces guarde alguna variable o método a nivel de clase, no a nivel de instancia (variables estáticas).
Podemos usar las clausuras para ello:

http://jsfiddle.net/yporqueno/h1n2gk2d/

var Persona = function (){
    // Variable de clase (estatica)
    var count = 0;
 
    // Constructor de la clase Persona
    var fn = function(){
        var _api = {};
        _api.saluda = function(){
            alert('Hola #'+count);
        };
        count++;
        return _api;
    };
 
    // Metodo estatico de Persona
    fn.getCount = function(){
        alert('Numero de personas '+count);
    }
 
    return fn;
}();

De esta manera la variable «count» solo se crea una vez, y queda accesible para cada instancia que creemos de la clase Persona.
Ahora podemos crear tantas instancias como queramos de Persona y acceder al conteo que lleva la clase de forma centralizada.

var manolo = new Persona();
manolo.saluda();
 
var pepe = new Persona();
pepe.saluda();
 
// Metodo estatico de la clase Persona
Persona.getCount();

Gracias Javi por la idea!! 🙂

Programación Orientada a Objetos en JavaScript

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

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… 😉