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.
Tabla de contenidos
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.
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
.
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"
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.
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!
Deja una respuesta