Contenido principal

Funciones estáticas contra métodos de instancia

Antes de llegar al Algoritmo #3 (acelerar hacia el ratón), necesitamos cubrir un aspecto muy importante sobre trabajar con vectores y el objeto PVector: la diferencia entre usar funciones estáticas e instancias de métodos.

Olvidándonos acerca de los vectores por un momento, echa un vistazo al siguiente código:

var x = 0;
var y = 5;
x = x + y;

Muy sencillo, ¿verdad? x tiene el valor de 0, le sumamos y, y ahora x es igual a 5. Podríamos escribir el código correspondiente muy fácilmente con base en lo que hemos aprendido sobre PVector.

var v = new PVector(0,0);
var u = new PVector(4,5);
v.add(u);

El vector v tiene el valor de (0,0), le sumamos u y ahora v es igual a (4,5). Fácil, ¿verdad?

Echemos un vistazo a otro ejemplo de algunas matemáticas sencillas:

var x = 0;
var y = 5;
var z = x + y;

x tiene el valor de 0, le sumamos y y almacenamos el resultado en una nueva variable z. El valor de x no cambia en este ejemplo, ¡y tampoco el de y! Esto puede parecer como un punto trivial, y uno que es muy intuitivo cuando se trata de operaciones matemáticas con números. Sin embargo, no es tan obvio con operaciones matemáticas en PVector. Vamos a intentar escribir el código con base en lo que sabemos hasta ahora.

var v = new PVector(0,0);
var u = new PVector(4,5);
var w = v.add(u); // ¡Que no te engañen; ¡¡¡esto es incorrecto!!!

Lo anterior podría parecer una buena suposición, pero simplemente no es la forma en que el objeto PVector funciona. Si nos fijamos en la definición de add()...

PVector.prototype.add = function(v) {
    this.x = this.x + v.x;
    this.y = this.y + v.y;
 };

...vemos que este código no logra nuestro objetivo. En primer lugar, no regresa un nuevo PVector (no hay ninguna declaración return) y en segundo lugar, cambia el valor del PVector sobre el cual es llamado. Para poder sumar dos objetos PVector y regresar el resultado como un nuevo PVector, debemos usar la función "estática" add().

Una función "estática" es una función que está definida sobre un objeto, pero no cambia las propiedades del objeto. Entonces ¿por qué definirla sobre el objeto? Por lo general, tiene algo que ver con el objeto, así que es lógico asociarla a él. Trata al objeto más como un espacio de nombres (namespace). Por ejemplo, todas las funciones estáticas en PVector realizan algún tipo de manipulación en objetos PVector que se le pasan y siempre regresan algún valor. También podríamos definir esas funciones globalmente, pero de esta manera, evitamos funciones globales y tenemos mejores formas de agrupar funcionalidad relacionada.

Vamos a contrastar. Aquí está cómo utilizamos la instancia del método add():

v.add(u);

Esa línea de código modificaría a v, así que no necesitaríamos guardar un valor de regreso. Por el contrario, aquí está cómo usamos la función estática add():

var w = PVector.add(v, u);

Si no guardáramos el resultado de esa función en una variable, esa línea de código sería inútil, porque la versión estática no cambia a los propios objetos. Las funciones estáticas de PVector nos permiten realizar operaciones matemáticas genéricas sobre objetos PVector sin tener que ajustar el valor de uno de los PVectors de entrada.

Aquí está cómo escribiríamos la versión estática de add():

PVector.add = function(v1, v2) {
  var v3 = new PVector(v1.x + v2.x, v1.y + v2.y);
  return v3;
};

Hay varias diferencias aquí:

Definimos la función directamente en el objeto, no en su prototipo
Nunca accedemos a la palabra clave this dentro de la función
Regresamos un valor de la función

El objeto PVector tiene versiones estáticas de add(), sub(), mult() y div(). También tiene otras funciones estáticas adicionales que no existen como instancias de métodos, como angleBetween(), dot() y cross(). Nos encontraremos utilizando estas funciones a medida que continuemos haciendo programas con PVector.

Este curso de "Simulaciones Naturales" es un derivado de "La Naturaleza del Código" por Daniel Shiffman, usado bajo una Licencia Creative Commons Reconocimiento-NoComercial 3.0 Unported.

¿Quieres unirte a la conversación?

Inicia sesión

Ordenar por:

julio.casquero
Publicado hace hace 10 años. Enlace directo a la publicación “como se hace esto no ente...” de julio.casquero
como se hace esto no entendi
Botón que navega a la página de registroComentar en la publicación “como se hace esto no ente...” de julio.casquero
(5 votos)
Respuesta
Batista Oliver Henriquez
Publicado hace hace 3 años. Enlace directo a la publicación “Desafío Automóvil que Fre...” de Batista Oliver Henriquez
Desafío Automóvil que Frena:

var Car = function() {
this.position = new PVector(width/2, height/2);
this.velocity = new PVector(0, 0);
this.acceleration = new PVector(0, 0);
};

Car.prototype.update = function() {

if(this.velocity < 0){
this.velocity.add(this.acceleration);
} else {
this.velocity.add(this.acceleration);
this.velocity.limit(10);
this.position.add(this.velocity);
println(this.velocity);
}
};

Car.prototype.display = function() {
stroke(0);
strokeWeight(2);
fill(255, 0, 0);
rect(this.position.x-52, this.position.y-59, 60, 60);
rect(this.position.x-74, this.position.y-30, 100, 31);
fill(92, 92, 92);
ellipse(this.position.x, this.position.y, 30, 26);
ellipse(this.position.x-50, this.position.y, 30, 30);
};

Car.prototype.checkEdges = function() {
if (this.position.x > width) {
this.position.x = 0;
}
else if (this.position.x < 0) {
this.position.x = width;
}
};

var car = new Car();

draw = function() {
background(255, 255, 255);

if (keyIsPressed && keyCode === RIGHT){
car.acceleration.set(0.02, 0);
} else if(keyIsPressed && keyCode === LEFT){
car.acceleration.set(-0.2, 0);
} else {
car.acceleration.set(0, 0);
}

car.update();
car.checkEdges();
car.display();
};
Botón que navega a la página de registroBotón que navega a la página de registro
(3 votos)
Respuesta

¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.

Programación de computadoras

Curso: Programación de computadoras > Unidad 5

¿Quieres unirte a la conversación?