JavaScript Objetos
Objetos, propiedades y métodos de la vida real
En la vida real, un automóvil es un objeto.
Un automóvil tiene propiedades como peso y color, y métodos como arrancar y detenerse:
| Objeto | Propiedades | Métodos |
|---|---|---|
|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
Todos los coches tienen las mismas propiedades, pero los valores de las propiedades difieren de un coche a otro.
Todos los coches tienen los mismos métodos, pero los métodos se ejecutan en momentos diferentes.
Objetos de JavaScript
Ya aprendiste que las variables de JavaScript son contenedores de valores de datos.
Este código asigna un valor simple (Fiat) a una variable denominada automóvil:
let car = "Fiat";
Try it Yourself »
Los objetos también son variables. Sin embargo, pueden contener muchos valores.
Este código asigna muchos valores (Fiat, 500, blanco) a una variable denominada coche:
const car = {type:"Fiat", model:"500", color:"white"};
Try it Yourself »
Los valores se escriben como pares nombre:valor (nombre y valor separados por dos puntos).
Es una práctica común declarar objetos con la palabra clave const.
Obtenga más información sobre el uso de const con objetos en el capítulo: JS Const.
Definición de objeto
Define (y crea) un objeto JavaScript con un literal de objeto:
Ejemplo
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Try it Yourself »
Los espacios y los saltos de línea no son importantes. La definición de un objeto puede abarcar varias líneas:
Ejemplo
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Try it Yourself »
Propiedades de objetos
Los pares nombre:valores en los objetos de JavaScript se denominan propiedades:
| Propiedad | Valor de la propiedad |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Acceso a las propiedades de los objetos
Puede acceder a las propiedades de los objetos de dos maneras:
objectName.propertyName
o
objectName["propertyName"]
Los objetos de JavaScript son contenedores de valores nombrados llamados propiedades.
Métodos de objetos
Los objetos también pueden tener métodos.
Los métodos son acciones que se pueden realizar sobre los objetos.
Los métodos se almacenan en propiedades como definiciones de funciones.
| Propiedad | Valor de la propiedad |
|---|---|
| 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.
Ejemplo
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
En el ejemplo anterior, this se refiere al objeto persona.
I.E. this.firstName significa la propiedad firstName de this.
I.E. this.firstName significa la propiedad firstName de la persona.
¿Qué es this ?
En JavaScript, la palabra clave this hace referencia a un objeto.
El objeto que se elija depende de cómo se invoque (use o llame) this.
La palabra clave this hace referencia a diferentes objetos según cómo se utilice:
En un método de objeto, this hace referencia al objeto. |
Solo, this hace referencia al objeto global. |
En una función, this hace referencia al objeto global. |
En una función, en modo estricto, this es undefined. |
En un evento, this hace referencia al elemento que recibió el evento. |
Métodos como call(), apply() y bind() pueden hacer referencia this a cualquier objeto. |
Nota
this no es una variable, es una palabra clave. No puedes cambiar el valor de this.
Ver también:
La palabra clave this
En una definición de función, this hace referencia 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.
Obtenga más información sobre this en el Tutorial de JavaScript this.
Cómo acceder a métodos de objetos
Puede acceder a un método de objeto con la siguiente sintaxis:
objectName.methodName()
Si accede a un método sin los paréntesis (), devolverá la definición de función:
¡No declare cadenas, números ni valores booleanos como objetos!
Cuando se declara una variable de JavaScript con la palabra clave "new", la variable se crea como un objeto:
x = new String(); // Declara x como un objeto String
y = new Number(); // Declara y como un objeto Número
z = new Boolean(); // Declara z como un objeto Booleano
Evite los objetos String, Number y Boolean, ya que complican el código y reducen la velocidad de ejecución.
Aprenderá más sobre los objetos más adelante en este tutorial.
