Crear objetos en javascript
Los objetos en JavaScript, al igual que en muchos otros lenguajes de programación, son una manera eficiente de organizar los datos ( variables y funciones ).
De hecho dentro de un objeto las variables llevan el nombre de propiedades, y las funciones se llaman métodos.
Hay varias maneras de crear un objeto en JavaScript. Podemos crear un objeto utilizando la notación literal o utilizando un constructor y la palabra clave new
.
Crear un objeto. Notación literal
Para dibujar una pelota en el canvas primero tenemos que decidir la posición ( x
, y
), el radio y el color de la pelota:
var x = 150; var y = 150; var radio = 25; var color ="tomato";
Ahora podemos dibujar la pelota:
(function dibujar(x,y,r,color){ ctx.fillStyle = color; ctx.beginPath(); ctx.arc( x, y, r, 0, 2*Math.PI ); ctx.fill(); })(x,y,radio,color);
See the Pen Objetos en canvas #0 by Gabi (@enxaneta) on CodePen.
Lea más acerca de funciones anónimas auto-ejecutables.
Pero hay situaciones cuando queremos dibujar más de una pelota, y queremos animar las pelotas, y cada pelota tiene su posición y su color y su velocidad en x e y, y a lo mejor queremos darlas una aceleración, y actualizarlas con cada fotograma. Y todo vuelve a ser muy complicado. La solución es organizarnos mejor, y para esto necesitamos utilizar objetos.
var pelota = {};
Y ¡ya lo tenemos! var pelota
es un objeto y lo podemos demostrar.
if (pelota.constructor == Object){console.log("es verdad");}// devuelve "es verdad"
Para popular el objeto pelota
con propiedades y métodos podemos escribir:
var pelota = {}; pelota.x = 150; pelota.y = 150; pelota.radio = 25; pelota.color ="tomato"; pelota.dibujar = function(){ ctx.fillStyle = pelota.color; ctx.beginPath(); ctx.arc( pelota.x, pelota.y, pelota.radio, 0, 2*Math.PI ); ctx.fill(); }
o podemos crear un objeto que ya tiene todas las propiedades y métodos desde el inicio:
var pelota = { x: 150, y: 150, radio: 25, dibujar:function(){ ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x,this.y,this.radio,0,2*Math.PI); ctx.fill(); } }
observe por favor la sintaxis utilizada:
propiedad : valor, método : function(){ . . . },
Y si más tarde queremos añadir otra propiedad lo podemos hacer fácilmente:
pelota.color ="tomato";
También podemos añadir un nuevo método:
pelota.actualizar = function(){ pelota.x += 50; ctx.clearRect(0,0,cw,ch); pelota.dibujar(); }
o podemos utilizar la palabra clave this
que en este caso se refiere a la pelota
:
pelota.actualizar = function(){ this.x += 50; ctx.clearRect(0,0,canvas.width,canvas.height); this.dibujar(); }
See the Pen Objetos en JS Notación literal #1* by Gabi (@enxaneta) on CodePen.
La palabra clave this
Hay muchas cosas que decir sobre la palabra clave this. Esto es solo una clarificación.
Si declaro una nueva variable, por ejemplo:
var test = 2345;
Y después escribo
console.log(this.test);
En la consola del navegador aparece 2345, porque this
en este caso es el objeto Window
. Y lo podemos demostrar sacando this
en consola
console.log(this); // el resultado de esto es el objeto Window
Por de otra parte si hago lo mismo dentro de un objeto
var obj = { f: function(){ console.log(this) // el resultado de esto es el objeto mismo } } obj.f();
El resultado de esto es el objeto mismo, porque ahora this
se refiere al objeto obj
.
Crear un objeto utilizando la palabra clave new
También podemos crear un nuevo objeto utilizando la palabra clave new
.
var pelota = new Object();
Asimismo podemos crear una función que construye un nuevo objeto. Por tradición las funciones constructoras tienen un nombre que empieza con mayúscula:
function Pelota(){}
Y ahora podemos fácilmente crear una nueva pelota de esta manera:
var pelota = new Pelota();
La variable pelota
es un objeto aunque no muy interesante, ya que se trata de un objeto vacío. para demostrar que se trata de un objeto podemos utilizar la palabra clave instanceof
de esta manera:
console.log(pelota instanceof Object);// devuelve true
También:
console.log(pelota instanceof Pelota); // devuelve true
Para crear un objeto como es debido tenemos que darle propiedades y métodos. Para esto utilizamos la palabra clave this
:
function Pelota(x,y){ this.x = x; this.y= y; this.radio= 25; this.color="tomato"; // esto crea un nuevo método this.dibujar = function(){ ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x,this.y,this.radio,0,2*Math.PI); ctx.fill(); } } // crea un nuevo objeto pelota con el centro en x=150, y = 150 var pelota = new Pelota(150,150);
Si necesitamos añadir un otro método una vez creado el nuevo objeto tenemos que utilizar la palabra clave prototype
Pelota.prototype.actualizar = function(){
this.x += 50;
ctx.clearRect(0,0,cw,ch);
this.dibujar();
}
See the Pen Objetos en JS La palabra clave new #2 by Gabi (@enxaneta) on CodePen.
Un ejemplo básico que utiliza objetos: Animar particulas en canvas.