Objetos Literales y Prototipos en JavaScript

Curso Básico de Programación Orientada a Objetos con JavaScript

Contenido del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

17
Examen Final de Programación Orientada a Objetos en JavaScript
01:40 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:26

Objetos Literales y Prototipos en JavaScript

Curso Básico de Programación Orientada a Objetos con JavaScript

Clase 5 de 17

Clase 5 / 17

Recursos

¿Qué es un objeto literal en JavaScript?

Un objeto literal en JavaScript es una forma de crear objetos de manera sencilla utilizando llaves {}. Estos objetos pueden contener propiedades y métodos que representan características y acciones que los objetos deben tener. En términos generales, los objetos literales son la manera más sencilla de crear estructuras de datos organizadas en JavaScript.

Cómo crear un objeto literal

Crear un objeto literal es bastante sencillo:

const natalia = {
    name: "Natalia",
    age: 20,
    cursosAprobados: [
        "Curso definitivo de HTML y CSS",
        "Curso práctico de HTML y CSS"
    ]
};

Añadiendo métodos a los objetos literales

Además de las propiedades, los objetos literales pueden tener métodos, que son funciones que realizan acciones específicas. Por ejemplo, para agregar un curso a la lista de cursos aprobados:

natalia.aprobarCurso = function(nuevoCurso) {
    this.cursosAprobados.push(nuevoCurso);
};

¿Cómo funciona el prototipo en JavaScript?

En JavaScript, todos los objetos tienen un prototipo, que es un objeto del cual heredan propiedades y métodos. Este prototipo puede personalizarse mediante la creación de funciones constructoras que actúan como moldes para crear múltiples instancias con las mismas propiedades y métodos.

Creación de un prototipo utilizando funciones constructoras

Para crear un prototipo, podemos definir una función constructora:

function Student(name, age, cursosAprobados) {
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
}

// Método añadido al prototipo
Student.prototype.aprobarCurso = function(nuevoCurso) {
    this.cursosAprobados.push(nuevoCurso);
};

Instanciando un prototipo

Con el prototipo definido, podemos crear nuevas instancias de Student:

const juanita = new Student("Juanita Alejandra", 15, ["Introducción a los videojuegos", "Producción de videojuegos", "Creación de personajes"]);

Ahora, juanita tiene acceso al método aprobarCurso:

juanita.aprobarCurso("Curso de Unreal Engine");

¿Por qué utilizar prototipos en lugar de objetos literales?

El uso de prototipos tiene varias ventajas:

Reutilización del código: Permite definir métodos una sola vez en el prototipo, evitando la duplicación de código.
Memoria eficiente: Los métodos definidos en el prototipo se comparten entre todas las instancias, en lugar de ser replicados para cada una, lo que ahorra memoria.
Flexibilidad y mantenimiento: Agregar o modificar métodos a nivel del prototipo implica cambios automáticos en todas las instancias existentes, facilitando el mantenimiento.

Con esta explicación y ejemplos, queda claro que el manejo de objetos literales y prototipos en JavaScript no sólo es crucial para la organización del código, sino también para el uso eficiente de recursos y para acelerar el desarrollo. Anímate a practicar más para aprovechar al máximo estas técnicas y sigue avanzando en tu camino de aprendizaje en programación con JavaScript.

José Gregorio Estrada Meneses

Hace 5 años

¿Qué es un literal? La definición de literal alude a algo textual, por ejemplo, si declaramos una variable de la siguiente manera:

let colorDelSol = "Amarillo";

Podemos decir la variable colorDelSol tiene asignada un string literal ya que se asigna el valor textualmente.

Exactamente lo mismo ocurre con los objetos literales, por ejemplo:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};

Donde:

El nombre del objeto es perro y sus claves/valores se describen en la siguiente tabla:

Clave Valor Tipo de dato nombre Scott string color Cafe string edad 5 int macho true bolean

Los tipos de datos que puede almacenar un objeto pueden ser strings, enteros, boleanos, inclusive otros objetos.

Acceder a valores de un objeto Existen 2 maneras simples para poder acceder a los valores de un objeto:

Notación de punto Consiste en escribir el nombre del objeto seguido de un punto y el nombre de la propiedad a la cual se quiere acceder: objeto.clave

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};

console. info (perro.nombre); // Scott console. info(perro.edad); // 5 Notación de corchetes / llaves cuadradas o brackets Consiste en escribir el nombre del objeto anteponiendo entre corchetes la clave a la que se quiere acceder: objeto[clave]

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};


console.info(perro['nombre']); // Scott
console.info(perro['edad']);  // 5

Ambas maneras retornan los mismos resultados, por lo tanto se pueden considerar homónimas, pero en la práctica se acostumbra a usar más la notación de punto.

Métodos en un objeto Un objeto no solo se limita a la agrupación de claves valores, es posible también incorporar métodos de la siguiente manera:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   }

};

console.log(perro.ladrar()); // Scott puede ladrar

Inserción de nuevos campos a un objeto Para agregar nuevos campos al objeto solo basta con mencionar el nombre del objeto seguido de la propiedad nueva y el valor nuevo a insertar: perro.tamaño = "Grande";

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};

perro.tamaño = "Grande";
console.log(perro);
/*
[object Object] {
  color: "Cafe",
  edad: 5,
  ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },
  macho: true,
  nombre: "Scott",
  tamaño: "Grande"
}
*/

Con ellos conseguiremos agregar un nuevo valor al objeto.

Actualizar campos del objeto Basta con sobre escribir una propiedad ya existente, de la siguiente manera:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};

perro.edad = 8;
console.log(perro);
/*
[object Object] {
  color: "Cafe",
  edad: 8,
  ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },
  macho: true,
  nombre: "Scott"
}
*/

Eliminación de campos Para borrar una propiedad de un objeto se utiliza la palabra reservada delete de la siguiente manera: delete nombre_del_objeto.clave; Por ejemplo:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   }

};

delete perro.color;
console.log(perro);
/*
let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};
*/

José Luis Encastin Flores

Hace 5 años

Muy buen aporte Jorge. Muchas gracias.

Cesar Gabriel Mejias Farreras

Hace 5 años

Que buenisimo tu aporte. Creo que al final te equivocaste copiando el objeto porque no se elimino el atributo color.

Otra cosa, estuve probando el delete con el array y efectivamente lo borra pero tambien el indice; entonces quedaria algo tipo [ 0, 1, 3] de [ 0, 1, 2, 3]

Comentarios (128)128 comentarios

Martín Bustamante

Andrés Felipe Eslava Zuluaga

Albert K. Camargo Barreda

Juan Castro

Profesor

Mildred Zaragoza

Brandon Argel Verdeja Domínguez

Kevin Mejia

Raul Carrillo Garrido

Hace 4 años

Obed Paz

Fabian Flores

Griger Ratia

Maria Eugenia Conte

Angel David Contreras Barrios

Estiven Mahecha Henao

Ricardo Alfonso Chavez Vilcapoma

Hace 3 años

Jessie Buckland Pérez

Darly Lozano Cruz

Miguel Angel Reyes Moreno

Andrés Balam Gómez Pantoja

Kevin J. Zea Alvarado

Daniel Flores

Henry J. Perez

Gabriel Cordero

Silvia Corrales

Julian Franco

José Alberto Ramírez Quiroz

Luis Wuilfredo Blanco Delgado

Fernando Pioli Martínez

Camilo Alonso Hernandez Cediel

Wilmion Navarrete

Zajith Corro Viveros

Jeferson Stiven Parra Mahecha

JavaScript Orientado a Objetos

Fundamentos de Programación Orientada a Objetos en JavaScript

Programación Orientada a Objetos con JavaScript: Fundamentos y Aplicaciones

Conceptos Básicos de Programación Orientada a Objetos

Objetos, clases y prototipos

Objetos y prototipos en JavaScript: diferencias y usos

Objetos Literales y Prototipos en JavaScript

Clases en JavaScript: Sintaxis y Uso Práctico

Comparativa de Objetos Literales y Clases en JavaScript

Pilares de la POO: abstracción y encapsulamiento

Abstracción en Programación Orientada a Objetos con JavaScript

Programación Orientada a Objetos con JavaScript: Clases y Prototipos

Encapsulamiento en JavaScript: Uso de Getters y Setters

Encapsulamiento con Getters y Setters en JavaScript

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Pilares de la POO: herencia y polimorfismo

Herencia en Programación Orientada a Objetos: Tipos de Estudiantes

Implementación de Herencia en JavaScript con Clases

Polimorfismo en Programación Orientada a Objetos

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Próximos pasos

Examen Final de Programación Orientada a Objetos en JavaScript

Objetos Literales y Prototipos en JavaScript

Progreso del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

Recursos

Recursos