Definición de objetos en JavaScript

En este tutorial aprenderemos cómo definir objetos, así como definir sus propiedades y funciones en JavaScript.

Objetos definidos por el usuario

La forma más simple es instanciar un objeto de tipo Object y agregarle propiedades dinámicamente

var coche1 = new Object();
coche1.marca = "Seat";
coche1.modelo ="Leon";
coche1.color ="Negro";

Estas propiedades sólo se agregan al objeto en cuestión, y si instanciamos nuevos objetos no tendrán estas propiedades

//Instanciamos el objeto
var coche1 = new Object();
//Declaramos la propiedad marca
coche.marca = "Seat";
//Instanciamos otro objeto
var coche2 = new Object();
//Podemos acceder a la propiedad marca de coche1
alert(coche1.marca);
//El resultado es Seat
//Pero el objeto coche2 no tiene la propiedad marca
alert(coche2.marca);
//El resultado es undefined

También podemos darle valor a las propiedades con corchetes, como si se tratara de un Array asociativo

coche1["marca"] = "Seat";
coche1["modelo"] = "Leon";
coche1["color"] = "Negro";

Objetos en JavaScript

En JavaScript casi todo es un objeto o se trata como tal, podemos crear objetos usando un inicializador de objeto, con la notación literal

<script>
    var objeto = {
        propiedad1 : valor, //propiedad1 puede ser un identificador
        2 : valor, //también puede ser un número
        "propiedad n" : valor, //y también una cadena
    }
</script>

Ejemplo

// Creación del objeto de forma literal
var persona = {nombre: "Isaac", edad: 28};
// Podemos acceder a sus propiedades
alert(persona.nombre);
// Y modificarlas
persona.nombre = "Isaac Peral";

Creación de objetos usando el constructor

<script>
    function Coche(marca, modelo, color) {
        this.marca = marca;
        this.modelo = modelo;
        this.color = color;
    }
</script>

Crear instancias de un objeto

var coche1 = new Coche("Seat","Leon","Negro");
var coche2 = new Coche("Ford","Fiesta","Blanco");

Una propiedad de un objeto puede ser al mismo tiempo un objeto

Veamos un ejemplo

//Creación de un objeto Conductor
function Conductor(nombre,telefono) {
    this.nombre = nombre;
    this.telefono = telefono;
}
//Instanciamos un objeto de tipo Conductor
conductor1 = new Conductor("Juan","5454545454");
//Creamos el objeto Coche incluyendo la propiedad conductor, 
//que será un objeto de tipo Conductor
function Coche(marca,modelo,color,conductor) {
    this.marca = marca;
    this.modelo = modelo;
    this.color = color;
    this.conductor = conductor;
}
//Al instanciar un nuevo objeto de tipo Coche incluimos un conductor
var coche1 = new Coche("Seat","Leon","Negro",conductor1)

Acceder a las propiedades de un objeto

//coche1.marca
//coche1.color
alert("El color de coche1 es: "+coche1.color);

Podemos incluir una propiedad nueva en un objeto sin tener que volver a crearlo

coche1.tipo = "turismo";

Definición de funciones o métodos asociados a un objeto

Podemos crear primero el método y despues asociarlo al objeto de este modo

//Creamos el método cambiar color
function cambiarColor(nuevoColor) {
    this.color = nuevoColor;
}
//Lo incluimos en la definición del objeto
function Coche(marca,modelo,color,conductor) {
    this.marca = marca;
    this.modelo = modelo;
    this.color = color;
    this.conductor = conductor;
    this.cambiarColor = cambiarColor;
}

Llamamos al método cambiar color de este modo

coche1.cambiarColor("Azul");

Podemos crear métodos en la definición del objeto de este modo

function Coche(marca,modelo,color,conductor) {
    this.marca = marca;
    this.modelo = modelo;
    this.color = color;
    //Definición del método cambiarColor
    this.cambiarColor = function(nuevoColor) {
        this.color = nuevoColor;
    }
}

Definir objeto en su prototype

function Coche(marca,modelo,color,conductor) {
    this.marca = marca;
    this.modelo = modelo;
    this.color = color;
    //Definición del método cambiarColor
    Coche.prototype.cambiarColor = function(nuevoColor) {
        this.color = nuevoColor;
    }
}

Cuando definimos el método dentro del constructor, cada vez que se instancia un nuevo objeto se crea un nuevo objeto de tipo función. De modo que si creamos tres instancias del objeto Coche se cargarán en memoria 3 métodos cambiaColor que hacen lo mismo.

Si por el contrario definimos el método en el prototype , el objeto de tipo función se creará sólo una vez y todas las instancias de tipo Coche apuntarán a él, consumiendo menos memoria.

Más tutoriales de JavaScript

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo