Clases y objetos con Mootools II

3 de July, 2007

Continuando con la entrada anterior sobre clases y objetos con Mootools, ahora le toca el turno a las funciones extend e implement.

Extend

Extend nos permite aplicar herencia de clases muy fácilmente. Retorna una copia de la clase a la cual se la aplicamos:

1
2
3
4
5
6
7
8
9

//Clase padre
var Padre = new Class
({
});
 
//Clase hija
var Hija = Padre.extend
({
});

Ahora Hija es una copia de Padre. Un ejemplo mas práctico:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//Clase padre
var Vehiculo = new Class
({
	ruedas:4,
	nombre: 'Base',
	encender: function()
	{
		alert('Vehiculo "' + this.getNombre() + '" encendido');
	},
	getNombre: function()
	{
		return this.nombre;
	}
});
 
//Clase hija
var Auto = Vehiculo.extend
({
	nombre: 'Auto',
});
 
var boby = new Auto();
boby.encender();

Ver ejemplo funcionando

Como se puede apreciar nuestra clase Auto hereda todos los métodos y propiedades de la clase Vehiculo salvo la propiedad nombre que se sobrescribe.

También podríamos sobrescribir el método encender para agregarle funcionalidades:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Clase hija
var Auto = Vehiculo.extend
({
	nombre: 'Auto',
	encender: function()
	{
		alert('Vehiculo "' + this.getNombre() + '" encendido');
		this.acelerar();
	},
	acelerar:function()
	{
		alert(this.getNombre() + ' esta acelerando!');
	}
});

Ver ejemplo funcionando

Podemos aprovechar los métodos que sobrescribimos utilizando la función parent(), de esta manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Clase hija
var Auto = Vehiculo.extend
({
	nombre: 'Auto',
	encender: function()
	{
		this.parent(); // Llama al metodo encender de la clase Padre, en este caso de Vehiculo
		this.acelerar();
	},
	acelerar:function()
	{
		alert(this.getNombre() + ' esta acelerando!');
	}
});

Ver ejemplo funcionando

Implement

Con extend duplicamos clases y a partir de las resultantes vamos agregando funcionalidades, con implement lo que hacemos es agregar funcionalidades/métodos a una clase en particular sin duplicarla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var Vehiculo = new Class
({
	ruedas:4,
	nombre: 'Base',
	encender: function()
	{
		alert('Vehiculo "' + this.getNombre() + '" encendido');
	},
	getNombre: function()
	{
		return this.nombre;
	}
});
 
Vehiculo.implement
({
	acelerar: function()
	{
		alert('Base esta acelerando');
	}
});
 
var boby = new Vehiculo();
boby.encender();
boby.acelerar();

Ver ejemplo funcionando

El/los métodos que implementamos pasan a formar parte de nuestra clase. Si implementamos un método que ya existe, lo sobrescribimos, pero en este caso no podremos reutilizarlo con parent.

1
2
3
4
5
6
7
8
9
10

Vehiculo.implement
({
	encender: function()
	{
		alert('Este Vehiculo no enciende');
	},
});
 
var boby = new Vehiculo();
boby.encender();

Ver ejemplo funcionando

Podes descargarte todos los ejemplos desde aqui.

Relacionado

Mootools en Español

Popularity: 2% [?]

Otros artículos

Suscríbete para seguir el blog Escrito por Archivado en Mootools en español
No hay comentarios »

Deja tu comentario

XHTML: Puedes usar estos tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

El blog funciona con Wordpress y Simpla theme