JavaScript Objects

JavaScript Objects

Contenido original de W3Schools


Objetos, propiedades y métodos de la vida real

En la vida real, un coche es un objeto.

Un automóvil tiene propiedades como peso y color, y métodos como arrancar y detener:

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 realizan en diferentes momentos.


Objetos JavaScript

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

Este código asigna un valor simple (Fiat) a una variable denominada auto:

let car = "Fiat";

Ver ejemplo


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 denominada coche:

const car = {type:"Fiat", model:"500", color:"white"};

Ver ejemplo

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

Usted define (y crea) un objeto JavaScript con un objeto literal:

Ejemplo:

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

Ver ejemplo


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

Ejemplo:

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

Ver ejemplo


Propiedades del objeto

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

PropiedadValor propiedad
firstNameJohn
lastNameDoe
age50
eyeColorblue

Accediendo a las propiedades del objeto

Puede acceder a las propiedades del objeto de dos maneras:

objectName.propertyName

O

objectName["propertyName"]

Ejemplo 1:

person.lastName;

Ver ejemplo


Ejemplo 2:

person["lastName"];

Ver ejemplo

Los objetos JavaScript son contenedores de valores con nombre llamados propiedades.


Métodos de objetos

Los objetos también pueden tener métodos.

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

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

PropiedadValor propiedad
firstNameJohn
lastNameDoe
age50
eyeColorblue
fullNamefunction() {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 person.

I.E. this.firstName significa la propiedad firstName de this.

I.E. this.firstName significa la propiedad firstName de person.


¿Qué es this?

En JavaScript, la palabra clave this se refiere a un objeto.

Qué objeto depende de cómo this se invoca (usado o llamado).

La palabra clave this se refiere a diferentes objetos dependiendo de cómo se use:

En un método de objeto, this se refiere al objeto.
Por sí solo, this se refiere al objeto global.
En una función, this se refiere al objeto global.
En una función, en modo estricto, this es indefinido.
En un evento, this se refiere al elemento que recibió el evento.
Métodos como call(), apply() y bind() pueden referir a this a cualquier objeto.

Nota: this no es una variable. Es una palabra clave. No puedes cambiar el valor de this.


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.

Aprende más sobre this en: The JavaScript this Tutorial


Accediendo a métodos de objetos

Se accede a un método de un objeto con la siguiente sintaxis:

objectName.methodName()

Ejemplo:

name = person.fullName();

Ver ejemplo


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

Ejemplo:

name = person.fullName;

Ver ejemplo


No declare cadenas, números y 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();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Evite los objetos de cadena, numéricos y booleanos. Complican su código y ralentizan la velocidad de ejecución.

Aprenderás más sobre objetos más adelante en este tutorial.


Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!