Objetos JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

En JavaScript, los objetos son los reyes. Si comprende los objetos, comprende JavaScript.

En JavaScript, casi "todo" es un objeto.

  • Los booleanos pueden ser objetos (si se definen con la palabra clave new)

  • Los números pueden ser objetos (si se definen con la palabra clave new)

  • Las cadenas pueden ser objetos (si se definen con la palabra clave new)

  • Las fechas son siempre objetos.

  • Las matemáticas son siempre objetos.

  • Las expresiones regulares son siempre objetos.

  • Las matrices son siempre objetos.

  • Las funciones son siempre objetos.

  • Los objetos son siempre objetos.

Todos los valores de JavaScript, excepto los primitivos, son objetos.

Primitivas de JavaScript

Un valor primitivo es un valor que no tiene propiedades ni métodos.

3.14 es un valor primitivo

Un tipo de datos primitivo son datos que tienen un valor primitivo.

JavaScript define 7 tipos de tipos de datos primitivos:

Ejemplos

    

  • string
    • 

  • number
    • 

  • boolean
    • 

  • null
    • 

  • undefined
    • 

  • symbol
    • 

  • bigint
    •

Inmutable

Los valores primitivos son inmutables (están codificados y no se pueden cambiar).

si x=3,14, puedes cambiar el valor de x, pero no puedes cambiar el valor de 3,14.

ValueTypeComment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull (object)null is always null
undefinedundefinedundefined is always undefined

Los objetos son variables

Las variables de JavaScript pueden contener valores únicos:

Ejemplo

let person = "John Doe";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let person = "John Doe";
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

Las variables de JavaScript también pueden contener muchos valores.

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

Los valores de los objetos se escriben como pares nombre:valor (nombre y valor separados por un colon).

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

<p id="demo"></p>

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Un objeto JavaScript es una colección de valores con nombre

Es una práctica común declarar objetos con la palabra clave const.

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Propiedades del objeto

Los valores nombrados, en objetos JavaScript, se denominan propiedades.

firstName

John

lastName

Gama

age

50

eyeColor

azul

Los objetos escritos como pares de nombre y valor son similares a:

  • Matrices asociativas en PHP

  • Diccionarios en Python

  • Tablas hash en C

  • Mapas hash en Java

  • Hashes en Ruby y Perl

Métodos de objetos

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

Las propiedades de los objetos pueden ser tanto valores primitivos como otros objetos y funciones.

Un método de objeto es una propiedad de objeto que contiene una función definición.

firstName

John

lastName

Gama

age

50

eyeColor

azul

fullName

función() {devolver este.primerNombre + " " + este.apellido;}

Los objetos JavaScript son contenedores de valores con nombre, llamados propiedades y métodos.

Aprenderá más sobre los métodos en los próximos capítulos.

Creando un objeto JavaScript

Con JavaScript, puedes definir y crear tus propios objetos.

Hay diferentes formas de crear nuevos objetos:

  • Cree un único objeto, utilizando un objeto literal.

  • Cree un único objeto, con la palabra clave new.

  • Defina un constructor de objetos y luego cree objetos del tipo construido.

  • Cree un objeto usando Object.create().

Usando un objeto literal

Esta es la forma más sencilla de crear un objeto JavaScript.

Usando un objeto literal, usted define y crea un objeto en uno declaración.

Un objeto literal es una lista de pares nombre:valor (como edad:50) dentro de llaves {}.

El siguiente ejemplo crea un nuevo objeto JavaScript con cuatro propiedades:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

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"
};

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Este ejemplo crea un objeto JavaScript vacío, y luego agrega 4 propiedades:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Usando la palabra clave JavaScript nueva

El siguiente ejemplo crea un nuevo objeto JavaScript. usando nuevo objeto(), y luego agrega 4 propiedades:

Ejemplo

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Los ejemplos anteriores hacen exactamente lo mismo.

Pero no es necesario utilizar new Object().

Para mayor legibilidad, simplicidad y velocidad de ejecución, utilice el método literal de objeto.

Los objetos JavaScript son mutables

Los objetos son mutables: se abordan por referencia, no por valor.

Si la persona es un objeto, la siguiente declaración no creará una copia de la persona:

const x = person;  // Will not create a copy of person.

El objeto x no es una copia de la persona. es persona. Tanto x como persona son el mismo objeto.

Cualquier cambio en x también cambiará de persona, porque x y persona son el mismo objeto.

Ejemplo

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

<p id="demo"></p>

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

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>