Introducción al curso

1

¡Alto! Tenemos una nueva versión de este curso para ti

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

¿Cuándo hace falta poner el punto y coma al final de la línea?

No tienes acceso a esta clase

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

El contexto de las funciones: quién es this

26/55
Recursos

En esta clase explicamos por qué al introducir el arrow function salió un error. El error del contexto de this en JavaScript es uno de los errores más comunes.

Recuerda que dentro de la arrow function, this está haciendo referencia al espacio global, a windows.

Aportes 227

Preguntas 29

Ordenar por:

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

acá están los apuntes de esta clase, intentare mejorarlos para simplificarlos y compartir con ustedes el documento word, al final de este curso para que tengan un complemento, recordar que esto debemos aprenderlo de memoria debido a que son los fundamentos, así que no solo te quedes con los videos, si no quieres tomar apuntes, acá los comparto contigo, lo importante es que siempre los leas y practiques bastante para crear una base solida.

EL CONTEXTO DE LAS FUNCIONES: Quien es this
Ahora bien, quedamos en la clase anterior en un error, ahora para solventarlo, vamos a analizar el código.
Siguiendo los procedimientos realizados en la anterior clase, lo que hicimos para que dejara de funcionar el código fue pasar la funcion a un arrow function. Por lo que para solventar esto usaremos una herramienta de la que obtuvimos conocimientos en clases anteriores, la cual es llamada “debugger”;

persona.prototype.soyAlto = () => {
    debugger
    return this.altura >= 1.80
}

Y trataremos de acceder a la función soy alto en la consola, que pasara aca, aca el código va a parar donde colocamos la opción debugger, allí echaremos un vistazo a “this” y nos mostrara que this es “window” y window es el objeto global dentro del navegador, aca están todos los atributos que están en window, entonces si nos fijamos en todo completo, es decir “this.altura” nos dira undefined por lo que undefined nunca va a ser igual a 1.80 por eso es que todas las personas que no son altas, esta condición nunca se va a dar.

Ahora ¿Qué es lo que pasa aca con las arrow funcitons?, primero que nada, esto de que this no es lo esperábamos que fuese es uno de los errores más comunes de javascript. Ahora vamos a lo que venimos, a explicar el porque;

persona.prototype.soyAlto = () => {
    debugger
    return this.altura >= 1.80
}

Acá como podemos observar esta arrow function, cumple con el primer objetivo, el cual es asignar la funcion, pero a su vez cambia el this dentro de la funcion, lo que hace es que this va a puntar al valor del this que este fuera de la funcion, por lo que ya llegado a este punto y explicado lo anterior con la consola respecto a Window, este toma el valor de this en el espacio global, es decir toma el valor del this que es window y como le estamos diciendo que tome el valor de “this.altura” su valor será undefined porque el window no existe un valor asignado a “this.altura”
Por ello cuando usemos this, debemos usar funciones normales, o al menos por el momento, mas adelante veremos como solucionar realmente este problema o como trabajar aca con las arrow functions.

Jaja que tortura…hace horas que hago pruebas de por qué no me funcionaban las funciones dentro del objeto (ya que las pongo todas con arrow para acostumbrarme) y no seguía con los vídeos porque quería descubrir que había mal en mi código antes de seguir, y aquí me lo están dando masticado. Gracias por la explicación! ahora me queda todo más claro!

en conclusion: no se puede usar prototipos en arrow functions

Lo entendí como:
“Dentro de una arrow function, this hace referencia al objeto window, y no al parámetro que es enviado a la función”

Tengo la siguiente duda si tuviésemos una función

function Persona  (nombre, apellido, altura) {
	this.nombre = nombre
	this.apellido = apellido
	this.altura = altura
	this.soyAlto = () => this.altura > 1.8
}

entonces el this si haría referencia a persona, que me parece a mi que es el objeto “superior” en la jerarquía de objetos…

lo que no estoy seguro es si hacer esto dentro de la función es válido, o si es la manera correcta de hacerlo, ya que hice lo siguiente

function Persona  (nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
    this.soyAlto = () => this.altura > 1.8
}

function Persona2 (nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura

}

Persona2.prototype.soyAlto2 = function() {return this.altura > 1.8}

var roberto = new Persona('Roberto', 'Bock', 1.84)
var roberto2 = new Persona2('Roberto', 'Bock', 1.84)

y al imprimir la variable roberto, la función soyAlto me aparece como un atributo pero, en el protitpo no me sale nada, solo el constructor. Pero al imprimir la variable roberto2 la función soyAlto no me sale como atributo pero si en el prototipo.

Hay alguna implicación al hacerlo de una manera u otra?

Facil, no uses las funciones flechas con this…

Nota: usar mas el debugger

¿Para qué sirve el debugger?

Pasa que cuando hacemos referencia a “this” en una arrow function, estamos haciendo una referencia a un componente global. Es decir, si definimos una variable altura en un contexto global, la arrow function apuntara a ella.
El el siguiente ejemplo, da verdadero.
Slds

function Persona(nombre, apellido, estatura){
  this.nombre = nombre
  this.apellido = apellido
  this.estatura = estatura
}

var altura = 2.5
Persona.prototype.esAlta = () => {
  return this.altura > 1.8
}

var carlos = new Persona('Carlos', 'Orellana', 1.82)

//Esto retorna true
carlos.esAlta()

Resumen de la Clase
Contexto de funciones y keyword ‘this’

Al cambiar una función por un arrow function en el código nos comenzó a arrojar valores ‘undefined’.
Al debbuguear nos muestra que this === window y no es la persona
’this’ en el espacio global es el objeto ‘window’
**Los arrow function refieren siempre al ‘this’ del ‘window’ **y no del prototipo.

jaja aqui esta la respuesta a mi pregunta de hace dos videos🤦‍♂️

De la siguiente manera creo que pude entenderlo…
En las “arrow function” ‘this’ hace referencia al scope globlal, es decir a las variables globales, mientras que en “function” ‘this’ hace referencia al prototipo que le indiquemos.

// Este this hace referencia al objeto Persona
Persona.prototype.saludar = function() {
  console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`);
}


//Este this hace referencia al scope global
Persona.prototype.soyAlto = () => {
  return this.altura > 1.8
}


var altura = 1.81
// sacha.soyAlto() ---> true```

Mi mente ha explotado!

yo intente hacerlo con arrow funcitons antes de llegar a esta clase y me frustre tantooooooo

Justo me pasó en el ejercicio de la clase anterior que intenté hacerlo con arrow function y me sentí mal creyenedo que no había entendo como hacerla, jeje.

que tan usadas son las declaraciones de clase de esta forma:

he visto varias ultimamente

class Persona {
  constructor(nombre, apellido, altura) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;
  }
  saludar() { return console.log(`hola me llamo ${this.nombre} ${this.apellido}`); }
  soyAlto() { return this.altura > 180; }
}

Al escribir this dentro de una arrow function. This ya no se referirá a nuestro prototipo, se referirá a window. Y como nombre o altura o apellido no están definidos en window, nos suelta: undefined.

Entonces esto quiere decir que cuando llamemos a aun prototipo o clase no la podemos llamar con una arrow function si no con una function anonima

This en el ámbito global es “Window”

Dentro de la arrow function, this está haciendo referencia al espacio global, a “windows”.

En la clase anterior se quiso establecer que las funciones las usemos con arrow function, pero al hacerlo no nos estaba mostrando el resultado correcto y esto ¿Por qué?

  • Porque al retornar this en una arrow function estamos haciendo referencia al objeto global window por eso tendremos siempre undefined

  • La solución por el momento es dejar el código sin las arrow function

3. El contexto de las funciones: quién es ‘this’

En esta clase aprendimos que this va cambiando de acuerdo donde esté, en el caso de las arrow functions si usamos this dentro de la función, pues apuntará al objeto global (window en el navegador).

Les comparto el código de la clase:

//Esta es la función constructora
function Persona(nombre, apellido, altura) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;
}
//No usar arrow functions si vamos a usar this
Persona.prototype.saludar = function() {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}.`);
}
//Aquí agrego nueva función al prototype de persona llamada "esAlto"
Persona.prototype.soyAlto = function() {
    return this.altura > 1.8;
}
//Aquí creamos un nuevo objeto con el prototipo de "persona",
//la cual es una función constructora
var sacha = new Persona('Sacha', 'Lifszyc', 1.72);
var erika = new Persona('Erika', 'Luna', 1.85);
var arturo = new Persona('Arturo', 'Martinez', 1.69);
sacha.saludar();
erika.saludar();
arturo.saludar();

sacha.soyAlto();
erika.soyAlto();
arturo.soyAlto();

Así mismo comparto también este meme, que ahora cobra bastante sentido “this is the difference between normal functions and arrow functions…”

justamente la inquietud que tuve en la clase pasada

CLASEZONONONONON, estos conceptos tan “secretos” (porque no se ven a primera vista) son los que me gustan más

Yo en la primer clase de clases con el metodo Saludar intente hacerlo con arrow functions y no me funciono, no me puse a investigar por que pero que buena clase ésta!

Yo creo que en este caso, no conviene ponerla como arrow function. Solo porque es más legible.

Wooow esta clase esta buenisima!!!

Esta es la forma correcta de usar arrow function con prototipos:

function Persona(nombre, apellido, altura) {
  this.nombre = nombre;
  this.apellido = apellido;
  this.altura = altura;
  //Esto es la forma correcta de usar arrow function 
  //en un prototipo
  this.soyAlto = () => this.altura > 1.8; 
}
var platzi = new Persona('Platzi', 'Cursos', 1.86);
console.log(platzi.soyAlto());

Una muy buena clase para entender lo de el this.!!

Este código funciona, ahora estoy un poco confundido.

function Persona(nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}

Persona.prototype.saludar = function(){
    console.log(`Hola soy ${this.nombre} ${this.apellido}`)
}
Persona.prototype.soyAlto = () => this.altura > 1.69

var persona = new Persona("Carlos", "Sanchez", 1.44)

Yo realice la siguiente implementación:

function Persona(nombre, apellido, altura){
        this.nombre = nombre
        this.apellido = apellido
        this.altura = altura
        this.saludar = () => 
                `Hola  mi nombre es ${this.nombre} ${this.apellido}`
        this.soyAlto = () => 
                this.altura > 1.80

        return this
}

Cual es la diferencia entre esta implementación y la que realiza Sacha?

saludos.

buena tarde comparto mi actividad

//definir un prototipo

function persona(nombre, apellido,altura) {
this.nombre = nombre
this.apellido = apellido
this.altura = altura

}

persona.prototype.saludar = function() {

  console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}
/*var lina = new persona('Lina' ,'Rueda', 1.65)
var erika = new persona('Erika' ,'Torres', 1.80)
var arturo = new persona('Arturo' ,'Garzón', 1.75)

*/persona.prototype.esalta = function () {

  varsize = this.altura
  return this.altura>1.8
}
var lina = new persona('Lina' ,'Rueda', 1.65)
var erika = new persona('Erika' ,'Torres', 1.80)
var arturo = new persona('Arturo' ,'Garzón', 1.75)

Cuando uso el debugger y senalo a cualquier this, siempre me bota el window , no deberia botarme el atributo?

IMPORTANTE:

Cuando this está escrita dentro de una arrow function no hace referencia al parámetro al que se le pasa a la función, hace referencia al objeto Window

El error del contexto de this en javascrip es uno de los errores más comunes.

Recuerda que dentro de la arrow function, this está haciendo referencia al espacio global, a windows.

Tengan en cuenta que uso de la arrow function genero que this apuntara a window porque el código no estaba envuelto en ningún scope. Las Arrow Function siempre apuntan a su scope parent, el ejercicio que hizo Sacha perfectamente hubiera sido valido si nuestro prototipo hubiera estado escrito con la sintaxis ES6 : )

Ejemplo:

class Person {
  constructor(name, lastName) {
      this.name = name;
      this.lastName = lastName;
    }
   sayHello = () => {
     return `Hola, me llamo ${this.name} ${this.lastName}`
    }
}

const sacha = new Person("Sacha", "Morales");
console.log(sacha.sayHello()); // Hola, me llamo Sacha Morales

El dodigo

//Returna la comparacion de una altura con promedioAltos
const promedioAltos = 1.8;
const esAlto = ({altura}) => altura > promedioAltos;

//Creaa una persona, con el PROTOTIPO de, justamente "Perosonsa" 
function Persona(nombre, apellido, altura) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;
}

//ATRIBUTO saludar, dentro del PROTOTIPO de persona
Persona.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

//En una arrow function, el this apunta a el objeto global
//En este caso apunt a WINDOWS, y this.altura es UNDEFINED
Persona.prototype.soyAlto = function () {
    return this.altura > promedioAltos;
}

//IMPORTANTE LA PALABRA NEW, sino
//es undefined,
var sacha = new Persona('Sacha', 'Lifszyc', 1.56);
var erika = new Persona('Erika', 'Luna', 1.84);
var arturo = new Persona('Arturo', 'Martinez', 1.83);```

Interesante el uso del this con las arrow functions, es bueno saber este tipo de detalles.

excelente clase,

Mas claro que nunca el this, solo un consejo que me ayudado yo antes hacia los ejercicios junto con Sasha ahora lo que hago es ver muy bien la explicación y luego trato de hacerlo según mi lógica y siguiendo sus consejos y me ayudado muchísimo mas. Muy bueno Sasha es uno de mis favoritos desde ya, no dudara en tener otro curso con el.

¿El objeto Window de Javascript se podria decir que es el equivalente a la case Object de Java?

Hola, respecto a las arrow functions se me ocurrio la idea de meterlas dentro del constructor directamente asignandolas dentro de una variable me gustaria saber de alguien mas experimentado, si esta practica es considerada correcta.

// Manera numero 1
function Persona(name, last_name, age, heigth) {
  this.name = name;
  this.last_name = last_name;
  this.age = age;
  this.heigth = heigth;
  this.sayHey =  () => {
  console.log(`Hola, me llamo ${this.name}`);
  }
}

Para las clases propias es una mala práctica modificar el prototype, lo que hacemos es que dejamos las funciones dentro de la clase

Interesante la clase osea las arrow function no se deben usar cuando se hacen acciones para los prototipos

No se debe utilizar arrow function para la función de un prototipo ya que dará un error de contexto. 'this' hace referencia al contexto que contenga a la función, no al objeto creado desde el prototipo.

Resumen de lo entendido de esta clase:

  • En las funciones flecha o arrow function la palabra this hace referencia al objeto global correspondiente al segmento de código donde sea invocada.
  • Como las funciones saludar y soyAlto se invocan en el cuerpo mas general de nuestro código, this busca el objeto global que en este caso sera window.
  • Si deseamos que las arrow function tomen this como un objeto local (sacha, vichy, pedro, etc.) debemos invocarlas dentro de la función que prototipa nuestros objetos de tipo Persona.
  • De esta manera el objeto global para this sera cada uno de los nuevos objetos que creamos en la función prototipo.
function Persona(nombre, apellido, altura){
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;

    this.saludar = ()=> console.log(`Hola mi nombre es ${this.nombre} ${this.apellido} ${this.soyAlto()}`)
    
    
    this.soyAlto = () => {    
        if (this.altura > 1.8){
            return 'soy alt@'
        } else{
            return 'soy baj@'
        }
    }
}

var daniel = new Persona('Daniel','Reyes', 1.9)
daniel.saludar()
var daniela = new Persona('Daniela','Reina', 1.6)
daniela.saludar()

Resumen Clases: this en una función arrow function se toma como la variable principal Windows. Es decir en este tipo de funciones apunta al this global. Cuando se utilicen un this en una función, se recomienda no realizar una funcon arrow function.

Muy bien explicado!

Muy bien explicado!

Buenísima 😮

La explicación de Sacha fue excelente, en menos de 5 minutos explico sobre el This.

Gracias, aunque a mi no me sucedió

function Persona(nombre, apellido, altura) {
	this.nombre = nombre;
	this.apellido = apellido;
	this.altura = altura;
}

Persona.prototype.saludar = function() {
	console.log(`Hola me llamo ${this.nombre} ${this.apellido}`);
};

Persona.prototype.soy_alto = function() {// toma el objeto Persona
	return this.altura >= 1.8;
};


Persona.prototype.soy_alto = () => {// toma el objeto Window
	return this.altura >= 1.8;
};

var andres = new Persona("Andres", "Campero", 1.8);
var aric = new Persona("Aric", "Hauck", 1.5);
var kayden = new Persona("Kayden", "Smith", 1.9);
andres.saludar();
//Imprimiendo algo en la consola
console.log("inicializando archivo");

/*Declaración de prototipos
=========================================*/
/*Ideas claves

Los prototipos son un objeto más de javascript.

*/


//Definiendo el prototipo persona
function Persona(nom, ape, alt) {
	//para guardarlo en la memoria usamos this

	//this.nombre declara el nombre clave del valor
	this.nombre = nom;
	//nom es un valor que va en funcion de los parametros del prototipo
	this.apellido = ape;
	
	this.altura = alt;
     
	//return this; implicitamente es retornado

}

//Variables de la Clase Persona, no del prototipo
var PersonaAlta = 1.70; //metros

//Dentro del prototipo de persona va a existir un atributo que va a ser una funcion
Persona.prototype.saludar = function () {
	console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}


//Para llamar a la funcion se usa Persona.soyAlto()
//Aca estamos modificando el prototipo
Persona.prototype.esAlto =  function() { 

	//debugger
	 return this.altura > PersonaAlta;
	 //this es window D:, window.altura es undifenid
	 /*
		Por que this es window?
		en las arrow function cambia el this dentro de la funcion

		this apunta al this que este fuera de la funcion
		
		solucion
		evita el arrow function por ahora cuando uses this
	 */
	 
}

//Aca esta this en el espacio global
console.log(this)
console.log(this === window)
//retornar la condicion de si es alta


//Esto no funciona, ¿Por qué?
Persona.prototype.esBajo =  function() {
 return !this.esAlto() 
} 

/*Declaración de objetos
=========================================*/

//Un Array donde coleccionare las personas que cree
var personas = [ ] 

personas.push(  daniel = new Persona("Daniel", "Páez", 1.73) )
personas.push(  mariaV = new Persona("Maria", "Victoria", 1.65) )
personas.push(  amanda = new Persona("Amanda", "Páez", 1.62)  )

/*Ejecución de funciones y métodos
=========================================*/

for(var persona of personas)
{
	persona.saludar();
	//this is like write this three times amanda.saludar();
	
	persona.esAlto();

}

Sí, usar el debugger.
Pero tiene que quedar claro que:

  • This es diferente si se usa dentro de una función ya que funciona como un VALOR.
  • Si se usa fuera de cualquier función, o sea, en el contexto de ejecución global; éste hará referencia al objeto global.
    El valor de This dentro de una función, depende de como es llamada.
function persona(nombre, edad, altura){
  this.nombre = nombre,
  this.edad = edad,
  this.altura = altura
}

persona.prototype.saludar = function (){
  console.log(`Hola me llamo ${this.nombre} y tengo ${this.edad}`)
}

persona.prototype.soyAlto = function(){
  return this.altura >= 1.80
}

var andres = new persona("Andres", 32, 1.75)
var viviana = new persona("Viviana", 29, 1.56)
var arturo = new persona("Arturo", 31, 1.80)

Buena Clase!

gran clase!!

//---------------------------------
// definir un prototipo

function persona(nombre, apellido, altura){
//this hace referencia al objeto que se acaba de construir
this.nombre = nombre
this.apellido = apellido
this.altura = altura
}

persona.prototype.saludar = function(){
console.log(Hola, me llamo ${this.nombre} ${this.apellido})
}

persona.prototype.soyalto = function() {
return this.altura > 1.8
}

//Creando objetos
var claudia = new persona(‘Claudia’, ‘Aparicio’, 1.70)
var fernando = new persona(‘Fernando’, ‘Mendoza’, 1.80)
var anama = new persona(‘Ana Maria’, ‘Mendoza Aparicio’, 1.30)
var antonio = new persona(‘Antonio’, ‘Mendoza Aparicio’, 1.82)

//ejecutar los objetos
claudia.soyalto()
fernando.soyalto()
anama.soyalto()
antonio.soyalto()

// RESUMEN DE LA CLASE : '¿QUIEN ES THIS?'
// - Tomaremos como referencia el Codigo de la clase anterior
function Persona(nombre,apellido,altura) {
  this.nombre = nombre
  this.apellido = apellido
  this.altura = altura
}

Persona.prototype.saludar = function (){
  console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
}

// - Como vimos en la clase anterior, cuando cambiamos a la funcion
//   del prototipo 'Persona' por un arrow function del prototipo 'Persona'
//   , nos retornaba que la unica persona alta , no lo era en realidad.
//
//            Persona.prototype.soyAlto = () => {
//                return this.altura>1.8
//            }
//
// - El problema era que cuando hacia el cambio de un 'function' a un 'arrow function'
//   , tomaba al 'this' como el objeto 'window' , y como es un objeto que contiene
//   muchos atributos y metodos , entonces , no se le habia declarado que tenia un atributo
//  'altura'
//

Persona.prototype.soyAlto =  function(){
  return this.altura>1.8
}


var fernando = new Persona('Fernando','Huaman',1.72)
var erika = new Persona ('Erika','Luna',1.65)
var arturo = new Persona ('Arturo','Martinez',1.89)

muy buen datoo

excelente

Podemos decir tambien que this a punta al padre en el caso de las Arrow function

excelente clase muy bien explicada

Excelente explicación Sacha.

Creo que me adelante a la clase de solucionar el this dentro de las arrow functions, basta con definir las funciones dentro de la clase:

const MAX_HEIGHT = 1.8

function Person(firstName, lastName, height) {
    this.firstName = firstName
    this.lastName = lastName
    this.height = height

    this.isTall = () => this.height > MAX_HEIGHT

    this.sayHello = () => console.log(`Hola, me llamo ${this.firstName} ${this.lastName}`)

    this.showIfTall = () => {
        if(this.isTall()) console.log(`${this.firstName} ${this.lastName} es alto`)
    }
}

var diego = new Person('Diego', 'Gomez', 1.7)
var erika = new Person('Erika', 'Luna', 1.6)
var arturo = new Person('Arturo', 'Martinez', 1.9)

diego.showIfTall()
erika.showIfTall()
arturo.showIfTall()

this

this se puede explicar mucho más fácil con el siguiente ejemplo: Supongamos que tenemos un objeto “Persona” que tiene como atributos “nombre”, “edad” y "altura, y supongamos también que el constructor de la clase tiene como parámetros los mismos datos “nombre”, “edad” y “altura”

Si quisiéramos crear el objeto a partir de la clase, en el constructor tendríamos que poner algo parecido a esto:

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

Y aquí se puede ver claramente una ambigüedad, ¿Cómo sabe la computadora cual es el parámetro del constructor y cual es el atributo del objeto? ¿nombre = nombre?
Esto tiene una clara solución, y es anteponer “this.” al atributo para diferenciar las cosas, quedando el código finalmente así:

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

Espero que se entienda, saludos!

Excelente clase, excelente explicación,😎

A mi me gusta ver el this como un array que almacena la informacion del constructor.

Muchas gracias por esta aclaratoria. Ahora entiendo mejor ciertos comportamientos inesperados del “this”

Ya realice los cambios como en clase, pero al momento de correr en el navegado saludar() me aparece el texto pero al final Undefined.

¿Alguien podría decirme porque?
.

Buena explicación sobre el this, y sobre todo para no caer en el error con esas arrow functions

Con razón el ejercicio me daba undefined. 😄

Que gran clase, se entiendo muy bien,

THIS en una función arrow function se toma como la variable principal Windows, cuando se utilicen un this en una función, se recomienda no realizar una arrow function.

Muy bien explicado, muy entendible!
Muchas Gracias profesor por esta clase 😄

PORQUE NO ME SALE

tiene que salir solo andrew ALTO y me sale ALTO Y (ANGIE)BAJO

const TALLA_MINIMA = 1.7
persona1.prototype.esAlto = function(){
    return this.altura <= 1.7
}

persona1.prototype.autorizado = function (){
    
    if (persona1.prototype.esAlto){
        console.log(`Soy ${this.nombre}, mi altura es ${this.altura} asi que puedo ingresar a la piscina`)
    }
}
var andrew = new persona1('Andrew', 'Carnegi',1.77)
var angie = new persona1('Angie','Moran',1.62 ) 

andrew.autorizado()
angie.autorizado()```

Ahora todo es claro jaja, aunque no como solucionarlo, aun.

muy interesante lo de this

interesante.

si eso me paso cuando dejo el ejercicio de mayor a 18 años, al final lo hice con if y else

Aclaracion de por que This cambia

Excelente clase. Nunca me hubiera dado cuenta del cambio de scope

Gran punto a tener en cuenta con el this, es importante diferenciarlo para evitar problemas en la ejecución de código.

Excelente clase!!

Oh, ni idea que eso podía pasar, esta bueno que se nombrará en la clase de arrow function.

entonces en conclusion seria: el uso de this si o si solo funciona dentro de una funcion con la palabra reservada function?

ARROW cambia a THIS en la funcion. THIS en el espacio global es window, es la misma referencia en memoria.

Errores mas frecuentes en el uso del this en javascript

  • La variable this SIEMPRE va apuntar hacia el objeto global window.
  • Tanto en funciones regulares como en arrow functions tendremos esta misma situación.
  • Sólo llamando métodos de un objeto es cuando la variable this apuntará al objeto desde donde se llama el método.
  • Es importante resaltar que la variable this no será asignada hasta que la función en donde está definida se mande llamar. Es decir, siempre estará apuntando a window hasta que se ejecute alguna función que la contenga.

Por lo que hemos visto:
-This have referencia al objeto en el que se encuentra
-En funciones normales, este this refiere al objeto que deseamos
Pero si empleamos un arrow function, este this pasara a referir al Objeto global window, dandonos error.

Buenas a todos, como dijo el profesor, el this dentro de una arrowfunction toma la misma referencia que el this que esta afuera, por tanto he probado este código y así si funciona. Lo que me hace dudar es que si así he hecho algo mal respecto al prototito, que aún no entiendo muy bien lo que son.

function Persona(nombre, apellido, altura){
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
    this.saludar = () => {
        console.log(`Hola mi nombre es ${this.nombre} ${this.apellido} y mido ${this.altura}`)
    }
}

Dentro de un arrow function, “this” hace referencia al scope actual circundante. En palabras simples: El scope externo, el que esta ahí afuerita, el que esta encerrando mi funcion o mi objeto. En la mayoria de ocasiones, lo que esta afuera es el objeto Window del navegador, pero no siempre sera de esa forma