Programación con funciones, clases y arreglos para artistas

Instancias en sí mismas

Cuando generamos un objeto a partir una clase lo que hacemos en realidad es crear una instancia de esa clase, eso significa reservar un espacio en la memoria del sistema para guardar ahí sus datos.

Podemos consultar la instancia mostrándola directamente en la consola:

class Circulo {
	constructor(x, y, d) {
	}

	draw(){
		//ellipse(x, y, d, d);
	}
}

var circulo = new Circulo(100, 100, 50);

function setup() {
  createCanvas(400, 400);
  print(circulo)
}

function draw() {
  background(220);
  circulo.draw();
}

Siendo la instancia la representación de un objeto no sería extraño que pudiéramos crearle manualmente una propiedad después de generarla y acceder a ella:

class Circulo {
	constructor(x, y, d) {
	}

	draw(){
		//ellipse(x, y, d, d);
	}
}

var circulo = new Circulo(100, 100, 50);
circulo.nombre = "Circulito"

function setup() {
  createCanvas(400, 400);
  print(circulo.nombre)
}

function draw() {
  background(220);
  circulo.draw();
}

Así pues sabemos que si creamos una propiedad en una instancia su valor se conserva y podemos seguir usándolo.

Pues para acceder a esa información dentro de los métodos la idea es la misma, hacer referencia a la instancia. ¿Cómo? Con una propiedad especial de las clases llamada this.

La propiedad this

Dentro de una clase la palabra this hace referencia a la propia instancia:

class Circulo {
	constructor(x, y, d) {
		this.nombre = "Circulito"
	}

	draw(){
		//ellipse(x, y, d, d);
	}
}

var circulo = new Circulo(100, 100, 50);

function setup() {
  createCanvas(400, 400);
  print(circulo.nombre)
}

function draw() {
  background(220);
  circulo.draw();
}

¿Véis? Es la misma idea pero con this podemos hacer referencia a la instancia desde dentro, representando al objeto en sí mismo.

Así pues la clave para manejar las propiedades comunes entre los métodos consiste en asignar los valores que enviamos a los métodos a la propia instancia y hacer referencia a ella para acceder a sus valores:

class Circulo {
	constructor(x, y, d) {
		this.x = x;
		this.y = y;
		this.d = d;
	}

	draw(){
		ellipse(this.x, this.y, this.d, this.d);
	}
}

var circulo = new Circulo(100, 100, 50);

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circulo.draw();
}

En este punto podemos reutilizar nuestra clase Circulo de una forma cómoda para crear más circulos sin repetir código:

class Circulo {
	constructor(x, y, d) {
		this.x = x;
		this.y = y;
		this.d = d;
	}

	draw(){
		ellipse(this.x, this.y, this.d, this.d);
	}
}

var circulo = new Circulo(100, 100, 50);
var circulo2 = new Circulo(200, 200, 50);
var circulo3 = new Circulo(300, 300, 50);

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circulo.draw();
  circulo2.draw();
  circulo3.draw();
}

¿Mucho mejor verdad? Podemos crear tantas clases, métodos e instancias como queramos, sin duda es una forma magnífica de estructurar nuestro código.