José Gregorio Estrada Meneses
Martín Bustamante
Hola, no entendí el ultimo ejemplo, Es decir, que con Object.create(obj1), creas un prototipo que se llama obj1?
Andrés Felipe Eslava Zuluaga
¿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:
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
Martín Bustamante
Hola, no entendí el ultimo ejemplo, Es decir, que con Object.create(obj1), creas un prototipo que se llama obj1?
Andrés Felipe Eslava Zuluaga
Albert K. Camargo Barreda
Al crear el prototype aprobarCurso, quería ahorrarme un par de palabras y use una arrow function. Por supuesto me mando error.
Student.prototype.aprobarCurso = (nuevo) => { this.cursosAprobados.push(nuevo) }
-Se debe a que las arrow function no tienen THIS. 🙂
Juan Castro
Profesor¡Exacto! Por eso recomendamos tomar primero el Curso de Closures y Scope. :D
Mildred Zaragoza
Gracias por tu respuesta, justo estuve haciendo lo mismo y no entendía porqué me lanzaba un error.
José Gregorio Estrada Meneses
José Luis Encastin Flores
Muy buen aporte Jorge. Muchas gracias.
Cesar Gabriel Mejias Farreras
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]
Obed Paz
Fabian Flores
¿De dónde son esos GIFS?
Obed Paz
Son de Devto (Dev community) . Puedes encontrar muchos articulos y blogs de la comunidad de developers ahi. Los gifs son especificamente de uno titulado asi: 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance Por alguna razon la seccion de comentarios aqui no me deja subir los enlaces.
Griger Ratia
Veo mucha luz en este curso. Estaba en la Escuela De JavaScript y este curso no está allí. Vine a la escuela de desarrollo web y si está. Cuando intenté ver el curso de JavaScript Profesional no entendía nada, pero Juan lo ha hecho mucho más fácil en este curso. Debería también estar este en la escuela de JavaScript.
Maria Eugenia Conte
Venía a consultar exactamente lo mismo. Me parece que tiene temas fundamentales para comprender del lenguaje y de la POO. Debe haber una razón por la cual no esta en la escuela de JavaScript.
Angel David Contreras Barrios
Me paso exactamente lo mismo. Tome el curso y lo aprobé, pero no entendí algunas cosas.. . Al terminar este de POO, veré de nuevo el Profesional de Js.
Estiven Mahecha Henao
Si no estoy mal la nueva sintaxis para crear clases en JS es asi:
Ricardo Alfonso Chavez Vilcapoma
No sé si sea nueva, porque el concepto de clases la introdujeron en ECMASCRIPT 6 (Junio 2015)
Jessie Buckland Pérez
12 videos menos para salir de la caverna....
Darly Lozano Cruz
Googleen todos los conceptos y busquenlos en w3school o mozilla Developer y el conocimiento se fija muy bien cuando hacen eso. ;D
Miguel Angel Reyes Moreno
Genial, no sabía que se podían declarar funciones de una manera más limpia en los objetos literales.
//* Objeto literal const ximena = { name: 'Ximena', age: 21, hermosa: true, cursosAprobados: [ "Curso de introducción al Marketing Digital", "Curso de Community Manager" ], aprobarCurso(nuevoCursito) { this.cursosAprobados.push(nuevoCursito); }, }; //* Prototipo function Student(name, age, cursosAprobados) { this.name = name this.age = age this.cursosAprobados = cursosAprobados }; //* Nueva manera de escribir funciones Student.prototype.aprobarCurso = function(nuevoCursito){ this.cursosAprobados.push(nuevoCursito) }; const miguel = new Student( "Miguel Ángel", 22, ['Básico de React', 'Profesional de JS'] );
Darly Lozano Cruz
JavaScript es a menudo descrito como un lenguaje basado en prototipos - para proporcionar mecanismos de herencia, los objetos pueden tener un objeto prototipo, el cual actúa como un objeto plantilla que hereda métodos y propiedades.
Un objeto prototipo del objeto puede tener a su vez otro objeto prototipo, el cual hereda métodos y propiedades, y así sucesivamente. Esto es conocido con frecuencia como la cadena de prototipos, y explica por qué objetos diferentes pueden tener disponibles propiedades y métodos definidos en otros objetos.
Bien, para ser exactos, los métodos y propiedades son definidos en la propiedad prototype, que reside en la función constructora del objeto, no en la instancia misma del objeto.
En JavaScript, se establece un enlace entre la instancia del objeto y su prototipo (su propiedad proto, la cual es derivada de la propiedad prototype sobre el constructor), y las propiedades y metodos son encontrados recorriendo la cadena de prototipos.
Nota: Es importante entender que, tanto el prototipo de la instancia de un objeto (al cual se accede mediante Object.getPrototypeOf(obj), o a través de la propiedad proto) como el prototipo que contiene el constructor (que se encuentra en la propiedad prototype del constructor) hacen referencia al mismo objeto.
Andrés Balam Gómez Pantoja
Duda existencial..... ¿Hay alguna diferencia si la etiqueta <script> se declara dentro del head?
Kevin J. Zea Alvarado
Sí.
Todo lo que está dentro del <script> se cargará antes de lo que viene en el <body>, y esto hará que se tarde más en cargar los componentes visuales de la página; es decir, todo el maquetado.
Es por eso que la recomendación es agregarlo antes de cerrar el <body> para que cargue toda la página, y luego el código del <script>.
Andrés Balam Gómez Pantoja
Super, muchas gracias, ahora me queda más claro!
Daniel Flores
Al fin estoy entiendo que era todo eso de object y proto que sale en la consola, lo había visto ya en varios cursos pero nunca tocaban ese tema.
Henry J. Perez
I know is a little bizarre, but this is the practice code that I made to test everything related to classes build with functions.
function Classer(namer) { this.name = namer; this.perro = '@perro'; this.ojo = () => 'go go power ranger'; } Classer.prototype.joeCarter = function (ohYeah) { return 'Oh Yeah! ' + ohYeah; } const literalObj = { name: 'center', joeCarter() { return 123; } }; const litClasser = new Classer('Tesla');
Gabriel Cordero
Mi nombre es Gabriel Cordero hoy es el día 🔸️119🔸️ de mi viaje para convertirme en desarrollador web de frontend en New York. Estoy grabando mi viaje porque se que lo conseguire, si les interesa este es mi ultimo video: https://youtu.be/egBUA32EJYU
Mis videos son en ingles ya que quiero practicarlo y mejorarlo.
Silvia Corrales
Oye, está muy cool lo que estas haciendo!!! Me gusta la idea para practicar ingles, aunque todavía no me atrevo porque mi pronunciación no es muy buena... Mucho exito en tu camino para convertirte en Frontend developer 🙌🏾
Julian Franco
De pronto para los que no entendieron la parte del this, les dejo este breve articulo a como yo lo entendi.
Objeto This
Es un objeto especial que hace referencia al contexto en el que se esta ejecutando la función.
Lo que hace es apuntar a la referencia del objeto literal creado ejemplo.
const nathy = { name: 'natalia', age: function () { document.addEventListener('click', (event){ this.name /*sin embargo esto no va a hace referencia al name del objeto nathy ya como que this apunta al contexto de referencia de la funcion this terminara apuntando a document.*/ }) } }
Es decir this apunta a la referencia del contexto del cuál se ejecute. Actualmente hay diferentes maneras con las (arroy funtions ) de apuntar directamente a la referencia del objeto y no a la referencia de donde se ejecuta dicho contexto.
const nathy = { name: 'natalia', age: function () { document.addEventListener('click', event => this.name) } }
El operador => de las arrow función trae implicitame un metodo que permite apuntar directamente al objeto literal nathy.
José Alberto Ramírez Quiroz
A un objeto tambien podemos entrar a traves de la notacion de corchetes [], esto es de gran ayuda si por ejemplo no sabemos que valor vamos a añadir, podria ser el caso de que una funcion reciba como argumento una nueva propiedad
Luis Wuilfredo Blanco Delgado
Creo que les puede ayudar un poco esta informacion POO MDN
Fernando Pioli Martínez
Muy bueno!
Camilo Alonso Hernandez Cediel
En mi opinion, y espero feedback 😇
Objetos literales : se crean apartar de una variable, su sintaxis para moldeo es diferente, y estos tienen comportamiento reservado...
prototipos , objetos clásicos, o instancias: es el molde general del que se crean los futuros objetos heredando su comportamiento, estos además de ser diferentes en sintaxis, pueden extender desde prototype, nuevos comportamientos diseñados desde fuera por nosotros, ala hora de visualizar no los muestra en objeto general, pero si en el proto
Wilmion Navarrete
Zajith Corro Viveros
Hola :hand:!
Creo que el problema viene por como funcionan las arrow function y el scope de this. Mi recomendación sería debe de usar la notación que tienes en la primera linea:
Student.prototype.aprobar = function (curso) { this.cursosAprobados.push(curso); };
Jeferson Stiven Parra Mahecha
Prototipos (Prototypes) JavaScript es un lenguaje basado en prototipos, por lo tanto entender el objeto prototype es uno de los conceptos más importantes que los profesionales de JavaScript necesitan saber. Este artículo te dará una breve descripción del objeto prototype a través de varios ejemplos. Antes de leer este artículo, deberás tener un entendimiento básico de la referencia this en JavaScript.
Objeto prototype En honor a la claridad, vamos a examinar el siguiente ejemplo:
function Punto2D(x, y) { this.x = x; this.y = y; }
Al declararse la función Punto2D, una propiedad predeterminada llamada prototype será creada para ella (ten en cuenta que, en JavaScript, una función es también un objeto). La propiedad prototype es un objeto que contiene una propiedad constructor y su valor es la función Punto2D: Punto2D.prototype.constructor = Punto2D. Y cuando tú llamas a Punto2D con la palabra reservada new, los objetos recién creados heredarán todas las propiedades de Punto2D.prototype. Para verificar esto, puedes agregar un método llamado mover en Punto2D.prototype de la siguiente manera:
Punto2D.prototype.mover = function(dx, dy) { this.x += dx; this.y += dy; } var p1 = new Point2D(1, 2); p1.mover (3, 4); console.log(p1.x); // 4 console.log(p1.y); // 6
El Point2D.prototype es llamado objeto prototipo o prototipo del objeto p1 y de cualquier otro objeto creado con la sintaxis new Point2D(...) . Puedes agregar tantas propiedades al objeto Point2D.prototype como quieras. Lo que suele hacerse es declarar métodos en Point2D.prototype y otras propiedades se declararán en la función constructora.
Los objetos integrados en JavaScript se construyen de manera similar. Por ejemplo:
El prototipo de los objetos creados con la sintaxis new Object() o {} es Object.prototype El prototipo de los arreglos creados con la sintaxis new Array() o [] es Array.prototype Y es igual con otros objetos integrados como Date y RegExp. Object.prototype es heredado por todos los objetos y no tiene prototipo (su prototipo es null)
Cadena de prototipos
El mecanismo de la cadena del prototipo es simple: cuando accede a una propiedad p en el objeto obj, el motor de JavaScript buscará esta propiedad dentro del objeto obj. Si el motor falla en la búsqueda, continúa buscando en el prototipo de objeto obj y así sucesivamente hasta llegar a Object.prototype. Si finalizada la búsqueda no se ha encontrado nada, el resultado será undefined. Por ejemplo:
var obj1 = { a: 1, b: 2 }; var obj2 = Object.create(obj1); obj2.a = 2; console.log(obj2.a); // 2 console.log(obj2.b); // 2 console.log(obj2.c); // undefined
En el fragmento de código anterior, la declaración var obj2 = Object.create(obj1) creará el objeto obj2 con el objeto prototipo obj1. En otras palabras, obj1 se convierte en el prototipo de obj2 en lugar de Object.prototype por defecto. Como puedes ver, bno es una propiedad de obj2, pero puedes acceder a ella a través de la cadena de prototipos. Sin embargo, para la propiedad c, se obtiene un valor undefined porque no se puede encontrar en obj1 y en Object.prototype.
@Martín Bustamante
El método Object.create() crea un objeto nuevo, utilizando un objeto existente como el prototipo del nuevo objeto creado.
const person = { isHuman: false, printIntroduction: function() { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); } }; const me = Object.create(person); me.name = 'Matthew'; // "name" is a property set on "me", but not on "person" me.isHuman = true; // inherited properties can be overwritten me.printIntroduction(); // expected output: "My name is Matthew. Am I human? true"
Acá está la fuente -> MDN: Object.creae()
¿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`) }, }; */
¡ Hola !
¿Porqué me da error cuando defino un método mediante prototipo como arrow function y no cuando defino por una función normal?
// Agrega a la lista Student.prototype.aprobar = function (curso) { this.cursosAprobados.push(curso); }; // Error Student.prototype.aprobar = (curso) => { this.cursosAprobados.push(curso); };
Hola,
Como dicen mis compañeros esto se debe a las arrow functions, las arrow functions no tiene su propio this y por consecuencia no se debe de usar como métodos.
Te dejo esta documentación donde se explica esta situación: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions