Introducción a JavaScript

1

Fundamentos de JavaScript para Principiantes

2

Instalación y Configuración de JavaScript en Visual Studio Code

3

Instalación y configuración de Visual Studio Code y Node.js en Windows

4

Variables y Buenas Prácticas en JavaScript

5

Tipos de Datos en JavaScript: Primitivos y Complejos

6

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

7

Números y Operaciones Matemáticas en JavaScript

8

Conversión de Tipos en JavaScript: Implícita y Explícita

9

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

10

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

11

Operadores Lógicos en Programación: AND, OR y NOT

12

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

13

Juego de Adivinanza: Programación con Estructuras Condicionales

14

Estructura y uso del condicional Switch en programación

15

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

16

Iteración con for-of en JavaScript para arrays y strings

17

Iteración sobre Objetos con forIn en JavaScript

18

Uso del ciclo while para iteración en programación

19

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

20

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

21

Diferencias entre Funciones y Métodos en JavaScript

22

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

23

Arrow Functions y Enlace Léxico en JavaScript

24

Scope y Contextos de Ejecución en JavaScript

25

Closures y Ámbito Léxico en JavaScript

26

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

27

Arrays: Propiedades, Acceso y Creación en Programación

28

Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos

29

Métodos push y pop para modificar arrays en JavaScript

30

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

31

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

32

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

33

Uso del método slice para extraer porciones de un array en JavaScript

34

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

35

Programación Orientada a Objetos en JavaScript: Conceptos y Práctica

36

Creación y Manipulación de Objetos en JavaScript

37

Función constructora y gestión de instancias en JavaScript

38

Clases en JavaScript: Creación y Uso de Objetos con Sintaxis Moderna

39

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

40

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

41

Métodos y herencia prototípica en JavaScript

42

Uso de "this" en Clases y Funciones Constructoras

43

Validación de Usuarios en una Red Social: Algoritmo Básico

44

Implementación de la Función Sign-In y Validación de Usuario

Asincronía en JavaScript

45

Programación Síncrona y Asíncrona en JavaScript

46

Promesas en JavaScript: Asincronía y Manejo de Estados

47

Uso de Async/Await para Promesas Asíncronas en JavaScript

48

Peticiones asíncronas con for await en JavaScript

49

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

50

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

51

Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE

52

Envío de Datos al Servidor con JavaScript y Fetch API

53

Eliminar Posts con JavaScript y Delegación de Eventos

54

Manejo de IDs en JavaScript para eliminar artículos del DOM

55

Actualizaciones y Nuevas Funciones en JavaScript

No tienes acceso a esta clase

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

Uso de "this" en Clases y Funciones Constructoras

42/55
Recursos

¿Qué es la palabra reservada "this" en JavaScript?

La palabra reservada "this" es una de las herramientas más importantes y útiles al trabajar con clases y funciones constructoras en JavaScript. "This" hace referencia directamente al objeto o clase que se está construyendo. En programación orientada a objetos, las clases actúan como plantillas para crear múltiples instancias de objetos, y "this" permite acceder a los parámetros definidos dentro del constructor de una clase para definir propiedades de las instancias.

¿Cómo utilizar "this" dentro de una clase?

Para comprender cómo "this" opera dentro de una clase, vamos a explorar su uso mediante la creación de una clase llamada Persona. Aquí se explica cómo "this" permite interactuar con los valores inyectados en el constructor:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
}

En este ejemplo, this.nombre y this.edad indican que cada instancia de Persona tendrá propiedades nombre y edad, cuyas valores serán los que se pasen al crear las instancias.

¿Cómo crear instancias y utilizar "this"?

Para crear una instancia de la clase Persona, utilizamos la palabra reservada new, que construye una nueva instancia de la clase con los valores proporcionados:

let persona1 = new Persona("Alice", 25);

Aquí, al emplear new Persona("Alice", 25), se inyectan "Alice" y 25 como nombre y edad respectivamente, a los parámetros del constructor, asignándolos a las propiedades nombre y edad del objeto persona1.

¿Cómo añadir métodos que utilicen "this"?

Además de establecer propiedades, "this" se utiliza frecuentemente en métodos de una clase para trabajar con las propiedades de instancia. Observe cómo se añade un método a la clase Persona:

Persona.prototype.nuevoMetodo = function() {
  console.log(`Mi nombre es ${this.nombre}`);
};

Este método, al ser llamado, accederá a la propiedad nombre de la instancia a través de this y permitirá imprimir el nombre almacenado:

persona1.nuevoMetodo(); // Salida: Mi nombre es Alice

El uso de this.nombre en el método nuevoMetodo asegura que siempre haga referencia a la propiedad nombre de la instancia actual, encapsulando así correctamente la funcionalidad dentro de la clase.

Recomendaciones al utilizar "this"

  • Claridad y contexto: Asegúrese de comprender en qué contexto se utiliza "this", ya que su valor puede cambiar dependiendo de cómo se llame a una función o método.
  • Constructores y métodos encadenados: Use "this" para retornar el objeto de la instancia misma, lo que permite encadenar métodos y operaciones que siempre refieren al objeto actual.
  • Arrow functions: Tenga cuidado al utilizar funciones flecha (arrow functions) con "this", ya que en este caso "this" no hace referencia al objeto de instancia, sino al "this" del contexto léxico más cercano.

Como conclusión de las instrucciones, hemos visto cómo "this" proporciona una referencia central a las propiedades de las clases y sus instancias, lo que es esencial para la programación orientada a objetos en JavaScript. ¡Sigue practicando y explorando nuevas formas de aplicar "this" en tus proyectos para mejorar tus habilidades de programación!

Aportes 23

Preguntas 0

Ordenar por:

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

Siento que esta clase debio ubicarse mucho antes en el curso, explica cosas que ya se usaron (sin explicar).
esta clase deberia estar antes
`this` se refiere y/o apunta a las instancias que se crean a partir de una clase o función constructora. Nos permite acceder a las propiedades y métodos de esa instancia, facilitando la manipulación del estado del objeto.
La verdad que me obligue a ver de nuevo este curso y valió totalmente la pena, ahora me siento mas fresco y encaminado con JS, como que me sirvió para sacarme muchas dudas que tenia! Gracias!
Oigan, llevamos el this usandolo desde clases atras, creo que debieron de dar esta explicacion desde un comienzo, me siento extraño que apenas lo aborden así.
esta clase deberia esta al menos 2 videos antes.
Ya es aburrido siempre los mismos ejemplos de Persona o Animal..... por favor pueden ser más dinámicos, buscar ejemplos con IA si es que les da pereza.
creo que esta en des orden los videos no?, porque ya entramos a ver constructores, y ha tenido que seguir con esta explicación, pero bueno, entendible. gracias.
Sí, es correcto. Usamos `this` para referenciar el objeto actual dentro de una clase, evitando confusiones entre el nombre de la clase y otras variables. Esto asegura que el código sea más claro y legible, especialmente en contextos con múltiples variables.
Veo que han pasado por alto algunos detalles que me parecen importantes respecto al uso de clases en JS y a la POO en general y que al menos a mi me causaron confusión hace un par de años cuando comenzaba pero me han sido muy útiles en la práctica laboral. 1. En el método constructor se definen los **Elementos Mínimos Necesarios** para nuestra clase, es decir, se pueden definir más atributos dentro de la clase pero que no entren como parámetros obligatorios del constructor. 2. El nombre de los parámetros de la función constructor, **es independiente del nombre de la propiedad** que se está definiendo para la clase 3. Se pueden definir propiedades dentro de la clase **que usen otros parámetros o propiedades** previemante definidos. 4. Los métodos **también pueden recibir parámetros de entrada e interactuar** con los demás elementos de la clase.![](https://static.platzi.com/media/user_upload/image-4084fda0-2bc9-436a-ac89-0202b7f316a8.jpg)
Definitivamente muy buenos los cursos y todo pero la logística en el orden de temas está pésimo, he aprendido más resumidamente y con ejemplos en chatgpt directamente que en las horas invertidas en este curso. Usen ejemplos prácticos, válganse de esquemas y ordenen bien la relación de cada clase. Si fuera el servicio gratuito uno lo deja pasar pero esto es un servicio pago.
Esto ya lo explicaron en videos atrás, debieron abarcar algo nuevo como bind, call y esos que aun no domino
Esta clase debeia estar antes, pero sirvio mucho para las dudas de porque this funciona asi Gracias!
En este curso, la Programación Orientada a Objetos se da de forma muy superficial. Si desean profundizar tienen el Curso de Programación Orientada a Objetos en Javascript en la que se enseña de forma mas clara todo el contenido de POO que vemos en este curso, les dejo el enlace al curso aqui :) <https://platzi.com/cursos/javascript-poo-intermedio/> Les recomiendo repasar y practicar lo dado en este curso respecto a POO y luego realizar el curso :)
La palabra reservada `this` en JavaScript es crucial porque permite referirse al contexto del objeto actual dentro de métodos y constructores. Facilita el acceso a las propiedades y métodos del objeto, lo que es esencial en la Programación Orientada a Objetos (POO). Sin `this`, sería difícil gestionar instancias y sus datos de manera eficiente.
Hold on... en las clases anteriores usamos this y ¿Me lo explcias en la clase 42?¿Cuando ya lo usamos unas 12 veces? Dannggg
Encontré esta guía sobre cómo usar el this con los métodos call, apply y bind [Uso del this (call, apply, bind) | Make It Real](https://guias.makeitreal.camp/docs/javascript/avanzado/uso-this)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-02-01%20194858-7bdcdcbc-becc-4bce-9a7f-8b0b10cf9d8c.jpg)
## Uso de "this" en clases y funciones constructoras en JavaScript * La palabra reservada "this" es crucial en la programación orientada a objetos en JavaScript. * Se utiliza principalmente en el contexto de clases y funciones constructoras. * "This" se refiere al objeto actual o a la instancia de la clase que se está construyendo. ## Funcionalidad de "this" en el constructor * En una clase, el constructor es un método especial utilizado para inicializar objetos. * Los parámetros del constructor se asignan a las propiedades del objeto utilizando "this". * Ejemplo de uso:class Persona { constructor(nombre, edad) { this.nombre = nombre; this.edad = edad; } } const persona1 = new Persona("Alice", 25); * En este ejemplo, "this.nombre" y "this.edad" asignan los valores proporcionados a las propiedades del objeto. ## Creación de métodos que utilizan "this" * Los métodos definidos dentro de la clase pueden acceder a las propiedades del objeto usando "this". * Ejemplo de un método que utiliza "this":Persona.prototype.nuevoMetodo = function() { console.log(`Mi nombre es ${this.nombre}`); }; persona1.nuevoMetodo(); // Imprime "Mi nombre es Alice" * Aquí, "this.nombre" se refiere a la propiedad "nombre" de la instancia actual (persona1). ## Resumen del uso de "this" * "This" hace referencia a la instancia del objeto dentro del contexto de la clase o función constructora. * Permite acceder y manipular las propiedades del objeto de forma dinámica y contextual. * Es esencial para crear métodos que operan sobre las propiedades específicas de una instancia. ## Próximos pasos * Practicar la creación de clases y el uso de "this" en diferentes contextos. * Explorar más ejemplos y ejercicios para dominar el uso de "this" en JavaScript. * Continuar aprendiendo sobre la programación orientada a objetos y cómo "this" juega un papel fundamental en la construcción y manipulación de objetos.
este fue mi resumen de la clase: `class Persona {` `constructor(``nombre``, ``edad``){        ``this``.nombre = ``nombre``;` `this``.edad = ``edad` `}` `}` `const persona1 = new Persona('Diego', 20)` `console.log(persona1)` ``persona1.nuevoMetodo = function(){    console.log(`mi nombre es: ${```this``.nombre} y mi edad es: ${``this```.edad}`)}persona1.nuevoMetodo()``
* Cuando `this` se usa dentro de un método de un objeto, hace referencia al propio objeto. ```js const objeto = { nombre: "Objeto", mostrarThis: function() { console.log(this); } }; objeto.mostrarThis(); // Imprimirá el objeto mismo. ```*this* depende del contexto en el que lo estemos usando no es lo mismo usar en un objeto que en una funcion
Hace tiempo vi alguien preguntandose que era this y porque se usaba, espero que allá llegado hasta aquí sin saberlo pero al final lo haya aprendido(esta clase le pudo haber ayudado en ese momento, no ahora XD)
this es para especificar el contexto en que se estan utilizando las variables, en el constructor class Persona usa this para referenciar a una propiedad de la clase evidentemente la forma larga es ```js class Persona{ nombre edad constructor(nombre , edad){ this.nombre = nombre, this.edad = edad } } ```y por eso el uso del this especificando esas propiedades, sin embargo el usa this en el constructor para abreviar la construccion de la clase