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.

w3.unpo<code>todo