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
O
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.