11. JS, Creando objetosCreando tus propios objetos en JavaScript

Si utilizas la sintaxis de literal de objeto, sólo podrás crear un objeto en JavaScript, pero… ¿cómo puedo crear más objetos que tengan las mismas características? La forma más fácil es utilizando una función constructora de objetos.

Constructores

Un constructor se forma con una función anónima que define un objeto y lo devuelve. Crea copias del objeto con sus propiedades concretas, y métodos.

Nota: los objetos creados con la función constructora se llaman instancias.

Continuando con el ejemplo del objeto coche del artículo anterior sería:

var constructor = function() {
   var obj = {
      marca: "Mercedes-Benz",
      modelo: "180d Sedán 7G-DCT",
      color: "blanco",
      peso: 1000,
      combustible: "diesel",
      mostrarModelo: function() {
         // Código a ejecutar
      },
      cambiarModelo: function(nuevoNombre) {
          // Código a ejecutar
      }
      };
   return obj;
};

var coche1 = constructor();
coche1.mostrarModelo();
// Salida: "180d Sedán 7G-DCT"

En este ejemplo, la función constructor hace de constructor de objetos. Dentro de la función crea un objeto obj que devuelve con la instrucción return. El valor se asigna a la variable coche1.

Nota: El objetivo de un constructor es hacer de fábrica de objetos

Con la función constructora anterior, puedes crear objetos o instancias de diferente color del objeto obj simplemente cambiando unos detalles. Vamos a verlo:

var constructor = function(colorInicial) {
   var obj = {
      marca: "Mercedes-Benz",
      modelo: "180d Sedán 7G-DCT",
      color: colorInicial,
      peso: 1000,
      combustible: "diesel"      
      };
   return obj;
};

var coche1 = constructor("blanco");
var coche2 = constructor("negro");
var coche3 = constructor("rojo");

En este ejemplo se crean 3 instancias de obj o tres coches Mercedes-Benz de color blanco, negro y rojo.

Si quieres poder cambiar todas las características sería así:

var constructor = function(marca, modelo, color, peso, combustible) {
   var obj = {
      marca: marca,
      modelo: modelo,
      color: color,
      peso: peso,
      combustible: combustible      
      };
   return obj;
};

var coche1 = constructor("Audi", "A3", "blanco", 1000, "diesel");
var coche2 = constructor("Renault", "Scenic", "negro", 1020, "gasolina");
var coche3 = constructor("Seat", "Alambra", "rojo", 1100, "electrico");

alert(coche2.combustible);
// Salida: "gasolina"

Nota: El nombre de la propiedad y el nombre asignado puede coincidir porque el sistema los interpreta como diferentes. Ejem. modelo: modelo

Objetos más seguros

Una de las ventajas de usar constructores es que puedes crear instancias de un objeto con propiedades y métodos privados, es decir, sólo se puede acceder a sus datos desde el mismo objeto y no desde cualquier parte del código.

Al igual que en las funciones, cuando declaras una variable con la palabra reservada var, haces que esa variable sea local, es decir, cuando sales del ámbito de la función esa variable no está visible para el resto del código.

De la misma forma, si coges el objeto anterior y pones en todas sus propiedades la palabra reservada var, haces sus propiedades automáticamente privadas y el acceso desde fuera del objeto imposible.

var constructor = function(marca, modelo, color, peso, combustible) {
   var obj = {
      var marca = marca;
      var modelo = modelo;
      var color = color;
      var peso = peso;
      var combustible = combustible;      
      };
   return obj;
};

 var coche1 = constructor("Audi", "A3", "blanco", 1000, "diesel"); 

Ahora si accedes al objeto coche1 como antes:

alert(coche1.modelo);

Daría un error porque la propiedad modelo es «privada» y no se puede acceder desde fuera. Bueno, más que privada es una variable local, por lo que es invisible desde fuera.

Nota: Recuerda que al declarar las propiedades como variables debes implementar var marca = marca; y no var marca: marca,

Operador new

Con la notación literal y los constructores ya puedes crear objetos individuales y múltiples instancias de un objeto, pero para aprovechar o más bien dicho, normalizar la sintaxis con otros lenguajes de programación orientada a objetos, en JavaScript también puedes hacer servir el operador new para crear instancias de tus objetos.

Por lo que la tercera forma de crear objetos es mediante este operador que lo antepondrás al nombre del tipo de objeto al crearlo.

var coche1 = new constructor ( "Audi", "A3", "blanco", 1000, "diesel" );

La única diferencia con respecto a las dos formas de crear objetos anteriores es que al crear el objeto tienes que hacer referencia a las propiedades y métodos con la palabra reservada this. Ya no es necesario devolver ningún objeto ni crear el objeto dentro de la función constructor.

var constructor = function(marca, modelo, color, peso, combustible) {
      this.marca = marca;
      this.modelo = modelo;
      this.color = color;
      this.peso = peso;
      this.combustible = combustible;
      this.mostrarModelo = function() {
         alert(this.modelo);
      };        
};

 var coche1 = new constructor("Audi", "A3", "blanco", 1000, "diesel"); 

Herencia en los objetos

Una de las características destacadas en JavaScript es que los objetos pueden crearse desde otros objetos ya creados. Gracias a la herencia los nuevos objetos creados pueden heredar sus propiedades y métodos.

JavaScript tiene un objeto global predefinido que se llama Object, el cual utiliza un método existente dentro del objeto que hace servir la características de prototipos para crear objetos a partir de otros. Es método se llama create y se utiliza así:

var vehiculo = {
   medio: "terrestre",
   combustible: "gasolina",
   puertas: "4",
   mostrarPuertas: function(){
      alert(this.puertas);
   },
   cambiarPuertas: function(nuevasPuertas) {
      this.puertas = nuevasPuertas;
   }
};

var avion = Object.create(vehiculo);
avion.cambiarPuertas(8);
avion.mostrarPuertas(); // Salida: 8
vehiculo.mostrarPuertas();  // Salida: 4

A partir de ahora, tanto el objeto avion como el objeto vehiculo comparten las mismas propiedades y métodos gracias al prototipado de objetos. Si añades más propiedades o métodos en el objeto vehiculo también se reflejara en el objeto avion, gracias a los prototipos.

Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!