Objetos Javascript

Objetos de la vida real, propiedades y métodos

En la vida real, un coche es un objeto. Un coche tiene propiedades como el color, el ancho, y métodos, como pararse o arrancar.

Todos los automóviles tienen las mismas propiedades, pero los valores de las propiedades difieren de un automóvil a otro.

Todos los automóviles tienen los mismos métodos, pero los métodos se realizan en diferentes momentos.

Objetos Javascript

Ya has aprendido que las variables JavaScript son contenedores para valores de datos.

Este código asigna un valor simple (Fiat) a una variable llamada car:

Ejm

var car = "Fiat";

Los objetos también son variables. Pero los objetos pueden contener muchos valores.

Este código asigna muchos valores (Fiat, 500, blanco) a una variable llamada auto.

Ejm

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Objetos Javascript</h2>
        <p id="demo"></p>
        
        <script>
			// CREAMOS UN OBJETO
			var car = {type:"Fiat", modelo:"500", color:"blanco"};
			
			// MOSTRAMOS DATOS DEL OBJETO CREADO
			document.getElementById("demo").innerHTML = "El tipo de coche es " + 
			car.type;
		</script>
    </body>
</html>

Los valores se escriben como nombre: pares de valores (nombre y valor separados por dos puntos).

Los objetos JavaScript son contenedores para valores con nombre llamados propiedades o métodos.

Definición de objeto

Definimos (y creamos) un objeto JavaScript con un objeto literal.

Ejm

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Los espacios y los saltos de línea no son importantes. Una definición de objeto puede abarcar varias líneas.

Ejm

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Propiedades de los objetos

Los pares nombre: valor en los objetos JavaScript se denominan propiedades.

Ejm

Propiedad	Valor asociado a la propiedad
firstName	John
lastName	Doe
age	50
eyeColor	blue

Acceso a las propiedades del objeto

Puedes acceder a las propiedades del objeto de dos maneras:

nombreObjeto.propiedadObjeto

nombreObjeto["propiedadObjeto"]

Ejm

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Objetos Javascript</h2>
        <p>Existen 2 maneras de acceder a las propiedades de un objeto</p>
        
        <p id="demo"></p>
        <p id="demo2"></p>
        
        <script>
			// CREAMOS UN OBJETO
			var person = {
				firstName: "John",
				lastName: "Doe",
				id: 5566
			}
			
			// MOSTRAMOS ALGUNOS DATOS DEL OBJETO
			document.getElementById("demo").innerHTML = person.firstName + " " +
			person.lastName;
			document.getElementById("demo2").innerHTML = person["firstName"] + " " +
			person["lastName"];
		</script>
    </body>
</html>

Métodos de objeto

Los objetos también pueden tener métodos.

Los métodos son acciones que se pueden realizar en objetos.

Los métodos se almacenan en propiedades como definiciones de funciones.

Property	Property Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + ” ” + this.lastName;}

Un método es una función almacenada como una propiedad.

Ejm

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

La palabra clave this

—

En una definición de función, this se refiere al “propietario” de la función.

En el ejemplo anterior, this es el objeto persona que “posee” la función fullName.

En otras palabras, this.firstName significa la propiedad firstName de este objeto.

Accediendo a los métodos del objeto

Puedes acceder a los métodos del objeto mediante la siguiente sintaxis.

nombreObjeto.metodoObjeto()

Ejm

name = person.fullName();

Si accedes a un método sin los paréntesis (), devolverá la definición de la función.

Ejm

name = person.fullName;

¡No declares cadenas, números y booleanos como objetos!

Cuando se declara una variable JavaScript con la palabra clave “new”, la variable se crea como un objeto:

var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object

Evita cadenas, números y objetos booleanos. Complican el código y ralentizan la velocidad de ejecución.