Prototipos

Son muchas las dudas existentes entre distintos desarrolladores sobre si JavaScript es un lenguaje orientado a objetos. Lo que si sabemos con seguridad es que está basado en prototipos. Un prototipo es un objeto abstracto, capaz de contener variables que hacen las veces de propiedades y funciones que actúan como métodos.

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

VER EJEMPLO

Vamos a realizar un carrusel de fotos apoyándonos en las ventajas que nos sirven los prototipos en Javascript. Lo primero que tendremos que hacer es crear un objeto instanciable mediante el objeto Function() y crear el constructor dentro de está función con todas las propiedades y métodos que vamos a necesitar para construir nuestro carrusel de fotos:

//PROTOTIPO CARUSEL
var carrusel = function(){
   this.velocidad = 1000; //velocidad a la que se desplaza el carrusel (ms)
   this.posicion = 0; //posición del carrusel
   this.desplazamiento = 151; //desplazamiento del carrusel
   this.num_elementos = 1; //inicializamos a 1 el número de elementos del carrusel
   this.desplazar = function(movimiento){
	   instancia = this;
	     
	   $(".listado-carrusel").animate({
		  left: movimiento		
		}, instancia.velocidad, function() {
			
			//Controlamos el estado de los botones de navegación
			if(instancia.posicion == instancia.num_elementos - 1)
			  $(".btn_siguiente a").addClass("desactivado");
			if(instancia.posicion == 0)
			  $(".btn_anterior a").addClass("desactivado");  
			  
		});
   }   
}

Como podéis ver al inicio del constructor declaramos todas las propiedades (velocidad, posición, desplazamiento, número de elementos) y el método desplazar. Podríamos declarar todas las propiedades y métodos que quisiéramos consiguiendo así un carrusel mucho más sofisticado aunque por ahora con esto nos servirá para ver como funcionan los prototipos.

Una vez tenemos el constructor tan solo tenemos que llamarlo con el operador new.

var carrusel1 = new carrusel();	//Creamos el objeto carrusel1

Acabamos de crear el objeto “carrusel1″ a partir del objeto instanciable carrusel. A partir de aquí ejecutaremos nuestros eventos y asignaremos los valores a las propiedades de nuestro objeto carrusel1 tal que así:

carrusel1.num_elementos = $(".listado-carrusel li").length; //numero de elementos del carrusel

Cada vez que queramos desplazar el carrusel tan solo habrá que llamar al método desplazar

carrusel1.desplazar(movimiento); //desplazamos carrusel

A partir de aquí y apoyándonos en jQuery el resto es sencillo. A continuación os dejo el ejemplo y el código al completo.

//PROTOTIPO CARUSEL
var carrusel = function(){
   this.velocidad = 1000; //velocidad a la que se desplaza el carrusel (ms)
   this.posicion = 0; //posición del carrusel
   this.desplazamiento = 151; //desplazamiento del carrusel
   this.num_elementos = 1; //inicializamos a 1 el número de elementos del carrusel
   this.desplazar = function(movimiento){
	   instancia = this;
	     
	   $(".listado-carrusel").animate({
		  left: movimiento		
		}, instancia.velocidad, function() {
			
			//Controlamos el estado de los botones de navegación
			if(instancia.posicion == instancia.num_elementos - 1)
			  $(".btn_siguiente a").addClass("desactivado");
			if(instancia.posicion == 0)
			  $(".btn_anterior a").addClass("desactivado");  
			  
		});
   }   
}


$(document).ready(function()
{	
    var carrusel1 = new carrusel();	//Creamos el objeto carrusel1
	carrusel1.num_elementos = $(".listado-carrusel li").length; //numero de elementos del carrusel
	
	//EVENTOS
	$('.btn_siguiente a').click(function() {
		if(carrusel1.posicion == carrusel1.num_elementos - 1)
		  return false;	
		
		if($(".desactivado:visible").length > 0)
		   $(".desactivado").removeClass("desactivado");		
				
	    carrusel1.posicion++;
		var movimiento = -(carrusel1.desplazamiento * carrusel1.posicion); //calculamos posicion del carrusel	
		carrusel1.desplazar(movimiento); //desplazamos carrusel
		return false;
	});
	
	$('.btn_anterior a').click(function() {
		if(carrusel1.posicion == 0)
		  return false;
		
		if($(".desactivado:visible").length > 0)
		   $(".desactivado").removeClass("desactivado");	

        carrusel1.posicion--;
		var movimiento = -(carrusel1.desplazamiento * carrusel1.posicion);//calculamos posicion del carrusel
		carrusel1.desplazar(movimiento);//desplazamos carrusel
		return false;
	});
	
}); 

Métodos y propiedades privadas

Dentro del constructor de nuestro carrusel tan solo hemos utilizado propiedades y métodos públicos (Podíamos acceder a ellos desde distintos ámbitos) pero también tenemos la posibilidad de utilizar propiedades y métodos privados (solo son accesibles desde el constructor). Para declarar una propiedad privada hacemos uso de var. Si por alguna razón necesitáramos que nuestro método desplazar fuera privado lo deberíamos declarar tal que así:

function desplazar(movimiento)

Herencia

En javascript podemos conseguir heredar propiedades y métodos gracias a los prototipos. Por ejemplo supongamos que creamos el siguiente prototipo:

var carruseles = function(){
   this.visible = true;}

Vamos a hacer que carrusel herede el método visible de carruseles:

carrusel.prototype = new carruseles();
var carrusel2 = new carrusel();
alert(carrusel2.visible); //Retorna true

• Puedes seguir cualquier respuesta a esta entrada mediante la fuente RSS 2.0.
• Puedes dejar un comentario o enviar un trackback desde tu propio sitio.