Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Función constructora

37/55
Recursos

Aportes 18

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Insights: * Todas las funciones tienen la propiedad **prototype** que permiten compartir y/o heredar propiedades y/o métodos. * Usamos **funciones constructoras** para **instanciar** multiples veces diferentes **objetos**. * Asignando los propiedades y/o métodos al **prototype** de la función constructora, aseguramos que las diferentes **instancias** puedan **acceder** a ellas.
Magistral la forma en la que el profe Diego explica, realmente es clara la estructura, recuerden que es necesario complementar cada lección con otros recursos, libros, artículos, y mucha práctica.
Una función constructora es una plantilla que te permite crear múltiples objetos similares. Es una función especial que, al usarla junto con la palabra clave `new`, construye nuevos objetos que siguen la misma estructura que defines dentro de la función Se utiliza cuando se necesita crear varios objetos con propiedades y comportamientos comunes, se define la estructura dentro de la función y luego creas instancias con new ```js // ------ Funcion constructora ------ function Estudiante(nombre,edad,grado){ this.nombre = nombre; this.edad = edad; this.grado = grado; this.saludar = function(){ console.log (`Hola, soy ${this.nombre}, tengo ${this.edad} y estoy en ${this.grado}`); }; } const estudiante1 = new Estudiante ("Luis", 24, "11°"); const estudiante2 = new Estudiante ("Maria", 22, "7°"); estudiante1.saludar(); estudiante2.saludar(); ``` * **Función constructora:** La función `Estudiante` es nuestra plantilla. Dentro de la función, usamos `this` para asignar los valores que se pasarán como argumentos (`nombre`, `edad`, `grado`). * **Método** `saludar`**:** Cada estudiante tendrá su propio método `saludar`, que utiliza las propiedades del objeto creado para personalizar el mensaje. * **Creación de instancias:** Cuando usamos `new`, creamos nuevos objetos (`estudiante1` y `estudiante2`). Estos objetos heredan las propiedades y métodos de la función constructora, pero los valores de esas propiedades cambian dependiendo de los datos que les pasamos (nombre, edad, grado).
porque no me esta funcionando esto chicos? me sale ese error. si me ayudan no entiendo porque me muestra ese error. ![](https://static.platzi.com/media/user_upload/image-5a7bd69e-d0e4-44a4-8e49-891a3be8dfc3.jpg)![](https://static.platzi.com/media/user_upload/image-7cf6409d-83b0-4347-832a-11c48aa4d063.jpg)
Mi ejemplo practico de esta clase 🧉 ![](https://static.platzi.com/media/user_upload/image-4affcf4a-1e4f-43ed-932c-50cf4560cd10.jpg)
En realidad la propiedad telefono existe en cada una de las instancias ![](https://static.platzi.com/media/user_upload/Screenshot%20from%202024-08-04%2000-24-41-68052325-d603-405c-b25f-c8a36f478d6a.jpg)
**RESUMEN:** ![](https://static.platzi.com/media/user_upload/image-f51c7e95-324f-4150-8998-f9ef995c0706.jpg)
Les quiero compartir un dato curioso, he redactado un resúmen del dato curioso y finalmente use IA para optimizar la legibilidad de mi texto. DATO CURIOSO: El orden de creación de instancias no afecta su acceso a los métodos añadidos al prototype de la función constructora. Aunque inicialmente creías que las instancias creadas antes de agregar un nuevo método al prototype no lo contendrían, esto no es cierto. Todas las instancias, sin importar cuándo fueron creadas, acceden automáticamente a los métodos del prototype, ya que están vinculadas dinámicamente a él. Esto también aplica si se eliminan métodos: los cambios en el prototype se reflejan inmediatamente en todas las instancias. ```js function Estudiante(nombre) { this.nombre = nombre; } // Creamos la primera instancia const estudiante1 = new Estudiante('José'); // Agregamos un método al prototype Estudiante.prototype.saludar = function () { console.log(`Hola, me llamo ${this.nombre}`); }; // Creamos una segunda instancia const estudiante2 = new Estudiante('María'); // Ambas instancias tienen acceso al nuevo método estudiante1.saludar(); // Output: 'Hola, me llamo José' estudiante2.saludar(); // Output: 'Hola, me llamo María' ```
Para agregar un nuevo parámetro a una función constructora sin modificar la función, puedes usar el prototipo. Primero, agrega la nueva propiedad al prototipo de la función constructora: ```javascript Persona.prototype.nuevaPropiedad = valorPorDefecto; ``` Luego, puedes asignar un valor a esa propiedad en cada instancia después de crearla: ```javascript const persona1 = new Persona("Juan", "Pérez", 30); persona1.nuevaPropiedad = "valor personalizado"; ``` Así mantienes la función constructora intacta y puedes agregar propiedades a las instancias según sea necesario.
```js //función constructora function Persona (nombre, apellido, edad){ this.nombre = nombre; this. apellido = apellido; this.edad = edad; } const persona1 = new Persona("Martha","Pallares", 25); console.log(`Nombre: ${persona1.nombre} \nApellido: ${persona1.apellido} \nEdad: ${persona1.edad} años`); ```
Rara vez comento en los cursos, pero en esta clase me quito el sombrero y agradezco al profesor, pude entender sin problemas este tema que es vital, en otros cursos no los comprendia. Esto fue espectacular, gracias Diego
**Ejemplo practico.** `// Función constructora para Libro` `function Libro(titulo, autor, año) {` ` this.titulo = titulo;` ` this.autor = autor;` ` this.año = año;` ` this.prestado = false;` `}` `// Añadimos métodos al prototipo de Libro` `Libro.prototype.prestar = function() {` ` if (!this.prestado) {` ` this.prestado = true;` `` console.log(`El libro "${this.titulo}" ha sido prestado.`);`` ` } else {` `` console.log(`El libro "${this.titulo}" ya está prestado.`);`` ` }` `};` `Libro.prototype.devolver = function() {` ` if (this.prestado) {` ` this.prestado = false;` `` console.log(`El libro "${this.titulo}" ha sido devuelto.`);`` ` } else {` `` console.log(`El libro "${this.titulo}" no estaba prestado.`);`` ` }` `};` `// Función constructora para Usuario` `function Usuario(nombre, id) {` ` this.nombre = nombre;` ` this.id = id;` ` this.librosEnPrestamo = [];` `}` `// Añadimos métodos al prototipo de Usuario` `Usuario.prototype.tomarPrestado = function(libro) {` ` if (libro.prestado) {` `` console.log(`Lo siento, "${libro.titulo}" ya está prestado.`);`` ` } else {` ` libro.prestar();` ` this.librosEnPrestamo.push(libro);` `` console.log(`${this.nombre} ha tomado prestado "${libro.titulo}".`);`` ` }` `};` `Usuario.prototype.devolverLibro = function(libro) {` ` const index = this.librosEnPrestamo.indexOf(libro);` ` if (index !== -1) {` ` libro.devolver();` ` this.librosEnPrestamo.splice(index, 1);` `` console.log(`${this.nombre} ha devuelto "${libro.titulo}".`);`` ` } else {` `` console.log(`${this.nombre} no tiene prestado "${libro.titulo}".`);`` ` }` `};` `// Creando instancias de Libro` `const libro1 = new Libro("Cien años de soledad", "Gabriel García Márquez", 1967);` `const libro2 = new Libro("El principito", "Antoine de Saint-Exupéry", 1943);` `// Creando instancias de Usuario` `const usuario1 = new Usuario("Ana", "U001");` `const usuario2 = new Usuario("Carlos", "U002");` `// Utilizando los objetos` `usuario1.tomarPrestado(libro1);` `usuario2.tomarPrestado(libro1); // Intentará prestar un libro ya prestado` `usuario2.tomarPrestado(libro2);` `usuario1.devolverLibro(libro1);` `usuario2.devolverLibro(libro2);` 1. Usamos funciones constructoras (`Libro` y `Usuario`) para crear "plantillas" de objetos. 2. Añadimos métodos a los prototipos de estas funciones constructoras, lo que permite que todas las instancias compartan estos métodos sin duplicar código. 3. Creamos instancias de `Libro` y `Usuario` usando el operador `new`. 4. Utilizamos los métodos definidos en los prototipos para interactuar con los objetos.
realmente me a gustado esta clase function Persona (nombre,apellidos,edad,telefono,direccion,sexo) {  this.nombre = nombre;this.apellidos = apellidos;this.edad = edad; this.telefono = telefono;this.direccion = direccion;this.sexo = sexo;} const persona1 = new Persona  ("juan","arteaga escobar",34,"3013879952","calle 18b # 45 c 24" ,"masculino");const persona2 = new Persona  ("diego"," escobar",24,"301456789","calle 18b # 45 c 24"); console.log(persona1);console.log(persona2); persona1.nacionalidad = "colombiana";  // agreramos mas propiedades a nuestra objecto personas como su nacioonaliodadpersona1.altura = " 1.45 metros"; delete persona2.nombre  // boramos la propiedad de el nombre Persona.prototype.sexo = "masculino"; console.log(Persona); console.log(persona1);
Para agregar otros parámetros sin usar el prototipo, puedes hacerlo directamente en la función constructora. Simplemente agrega los nuevos parámetros en la lista de parámetros y asigna su valor utilizando `this`. Por ejemplo, si quieres agregar una propiedad `genero`, la función se vería así: ```javascript function Persona(nombre, apellido, edad, genero) { this.nombre = nombre; this.apellido = apellido; this.edad = edad; this.genero = genero; // nuevo parámetro } ``` Así, al crear instancias de `Persona`, puedes pasar el nuevo parámetro: ```javascript const persona1 = new Persona('Juan', 'Pérez', 30, 'Masculino'); const persona2 = new Persona('Ana', 'Gómez', 25, 'Femenino'); ``` De esta manera, cada instancia tendrá su propio valor para `genero` sin necesidad de modificar el prototipo. Esto es ideal si necesitas propiedades específicas para cada objeto sin compartirlas entre instancias.
## Creación de un objeto simple en JavaScript * Vamos a comenzar creando un pequeño objeto utilizando una variable `let`. * Este objeto se llamará `persona` y será igual a unos corchetes `{}`. * Dentro de este objeto, comenzamos a crear las propiedades: * `nombre` con valor `"Diego"`. * `apellido` con valor `"de Granda"`. * `edad` con valor `35`. ## Dificultades al crear múltiples objetos * Si necesitas crear múltiples instancias de `persona`, copiar y pegar el código de cada objeto y cambiar sus valores no es eficiente. * Esto no es escalable si necesitas crear 150 personas, por ejemplo. * La solución es utilizar una **función constructora**. ## Función constructora en JavaScript * Una función constructora es una función que se utiliza para crear múltiples objetos. * Se inicia con la palabra reservada `function`. * La función constructora de objetos sigue la convención de comenzar con mayúscula. * En este caso, la función se llamará `Persona`. * La función recibe parámetros que serán las propiedades del objeto, como `nombre`, `apellido` y `edad`. function Persona(nombre, apellido, edad) { this.nombre = nombre; this.apellido = apellido; this.edad = edad; } * Dentro de la función, `this` se refiere al objeto que se está creando. * `this.nombre = nombre` asigna el valor del parámetro `nombre` a la propiedad `nombre` del objeto. ## Creación de instancias utilizando la función constructora * Para crear una nueva instancia, se utiliza la palabra reservada `new`. * Ejemplo para crear una instancia `persona1`: const persona1 = new Persona('Juan', 'Pérez', 20); * Se crea una nueva variable `persona1` que es una instancia del objeto creado con `Persona`. * Al usar `console.log(persona1)`, se imprimirá el objeto con las propiedades asignadas: `nombre: 'Juan'`, `apellido: 'Pérez'`, `edad: 20`. ## Agregar propiedades a instancias específicas * Se pueden agregar propiedades a instancias específicas sin afectar a otras instancias. persona1.nacionalidad = 'mexicano'; console.log(persona1.nacionalidad); // Output: mexicano * Sin embargo, esta propiedad no se compartirá con otras instancias. ## Agregar métodos a la función constructora * Para agregar un método que se comparta entre todas las instancias, se utiliza el prototipo de la función constructora. Persona.prototype.saludar = function() { console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`); }; * Ahora, todas las instancias de `Persona` pueden utilizar el método `saludar`. persona1.saludar(); // Output: Hola, me llamo Juan Pérez * Para crear otra instancia y utilizar el método `saludar`: const persona2 = new Persona('Diego', 'de Granda', 35); persona2.saludar(); // Output: Hola, me llamo Diego de Granda * De esta forma, se asegura que las nuevas propiedades o métodos se compartan entre todas las instancias. ## Resumen * La función constructora facilita la creación de múltiples objetos con las mismas propiedades y métodos. * Se pueden agregar propiedades y métodos a instancias específicas o a todas las instancias utilizando el prototipo. * Esto mejora la eficiencia y escalabilidad en la creación de objetos en JavaScript.
```js function persona(nombre, apellido, edad, sexo ){ this.nombre = nombre; this.apellido = apellido; this.edad = edad; this.sexo = sexo; } // Podemos seguir agregando y experimentando ```function persona(nombre, apellido, edad, sexo ){    this.nombre = nombre;    this.apellido = apellido;    this.edad = edad;     this.sexo = sexo;}
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-09-09%20190335-4afbc4cb-dbdb-4585-b75f-528e6202be80.jpg) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-09-09%20190355-774ebb71-414b-49ca-8f7b-22fa7b3daac1.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-08-27%20160958-3398e709-f3ad-42a6-8a27-09e1873481f2.jpg) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-08-27%20161021-68e3b9d7-378a-40ba-bc23-627b438bd6b7.jpg)