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

Cambiando de contexto al llamar a una función

54/55
Recursos

El contexto (o alcance) de una función es por lo general, window. Así que en ciertos casos, cuando intentamos referirnos a this en alguna parte del código, es posible que tengamos un comportamiento inesperado, porque el contexto quizás no sea el que esperamos.

Existen al menos tres maneras de cambiar el contexto de una función.

  • Usando el método .bind, enviamos la referencia a la función sin ejecutarla, pasando el contexto como parámetro.
  • Usando el método .call, ejecutamos inmediatamente la función con el contexto indicado
  • Usando el método .apply, es similar a .call pero los parámetros adicionales se pasan como un arreglo de valores

Aportes 117

Preguntas 11

Ordenar por:

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

Resumen de la clase
Cambiando el contexto al llamar a una función

El contexto en javascript está definido por el objeto ‘this’ cuando se ejecuta un código.
Es muy común el error: ‘No se puede ejecutar este método porque es indefinido’, esto sucede porque el ‘this’ no es quien esperamos que sea.

Dado el siguiente código:



const pablo = {
	nombre: 'Pablo',
	apellido: 'Andrés',
}
const mariela = {
	nombre: 'Mariela',
	apellido: 'Riesnik',
}

function saludar() {
	console.log(`Hola, mi nombre es ${this.nombre}`)
}

// Si ejecuto:

saludar()
// Hola, mi nombre es undefined

// Ya que tenemos la función definida dentro de un contexto global el 'this' en saludar() refiere al objeto 'window'. Por lo tanto es lo mismo que:

window.saludar()
// Hola, mi nombre es undefined


Cómo hacemos para cambiar ese ‘this’ de la función?
El método ‘.bind()’ se usa justamente para cambiar en contexto, el ‘this’, en una función.


const saludarAPablo = saludar.bind(pablo)
const saludarAMariela = saludar.bind(mariela)

‘.bind()’ nos devuelve una nueva función atando el parámetro,_ ‘(pablo)’_ en este caso, al ‘this’ dentro de esa función, saludar en este caso.
Este nunca modifica a la función original.


saludarAPablo()
// Hola, mi nombre es Pablo

saludarAMariela()
// Hola, mi nombre es Mariela


Otra forma de usarlo:


setTimeout( saludar.bind(pablo), 1000) == setTimeout(saludarAPablo, 1000)


Y otra, agregado un parámetro a la función:



function saludar(saludo = 'Hola') {
	console.log(`${saludo}, mi nombre es ${this.nombre}`)
}
setTimeout( saludar.bind(pablo, 'Hola loco!'), 1000)
// Hola loco!, mi nombre es Pablo

//también se puede agragar en la declaración de la constante.
const saludarAPablo = saludar.bind(pablo, 'Hola loco!!')
// Hola loco!!, mi nombre es Pablo


El primer parámetro es el contexto y luego van los siguientes parámetros en el orden en el que aparezcan.

IMPORTANTE!!!
La función .bind() no ejecuta la función a la que se agrega, sino que simplemente nos retorna una nueva función con ese contexto cambiado.
Usando el método .bind, enviamos la referencia a la función sin ejecutarla, pasando el contexto como parámetro.

Otros dos métodos que nos sirven para cambiar el contexto son: .call y .apply.

Usando el método .call, ejecutamos inmediatamente la función con el contexto indicado.


saludar.call(pablo)
// Hola, mi nombre es Pablo  -  se ejecuta inmediatamente

saludar.bind(pablo)
// no produce ningún resultado, no la ejecuta.


Al .call le pasamos los parámetros separados por ‘,’ igual que en el .bind.


saludar.call(pablo, 'Hola cheeee!!')
// Hola cheeee!!, mi nombre es Pablo


Usando el método .apply, es similar a .call pero los parámetros adicionales se pasan como un arreglo de valores.



saludar.apply(pablo, ['Hola mi querido'])
// Hola mi querido, mi nombre es Pablo


Manejar a dónde refiere el ‘.this’ es algo que tenemos que tener muy presente, sobretodo cuando escribimos en modo asíncrono, ya que siempre que ejecutemos una función de esta naturaleza el ‘.this’ siempre cambia y es muy importante atarlo a nuestra clase, objeto o función.

Este tema lo hubieran puesto antes de hacer el juego

RESUMEN DE LA CLASE

    • Declaramos dos objetos (fernando y yesika) que cada uno tiene dos atributos (nombre y apellido).
const fernando = {
  nombre: ' Fernando',
  apellido: 'Huaman'
}

const yesika = {
  nombre: ' Yesika',
  apellido: 'Cortés'
}
  • Lo que vamos a aprender hoy es saber indicarle a la función quien es el this a la hora de invocarla.
    • Para eso declaramos una función Saludar que recibe como parámetro a saludo que es igual a Hola.
function Saludar(saludo='Hola') {
  console.log(`${saludo} mi nombre es ${this.nombre}`)
}
  • A pesar de que el parámetro saludo es igual a Hola es posible cambiar su valor desde la invocación de la propia función.
    Si en caso no hagas eso , su valor seguirá siendo Hola.





  • Si invocamos de frente la función Saludar , el this no va a saber quién es , por lo que va a tomar como referencia el objeto window.
Saludar()
Hola mi nombre es undefined
  • Si queremos indicarle al this quién es, tenemos tres métodos:
    PRIMER METODO:
    Hacemos uso del método bind() que tiene como estructura —> NombreFuncion.bind( NombreObjeto ).
    Si en caso la funcion tuviera parametros, podemos utilizar la siguiente estructura —> NombreFuncion.bind( NombreObjeto , ValorParametro1 , ValorParametro2 , …)
    Para poder invocar la función:
  1. El método bind() debe estar almacenado en una variable , ya sea var , const o let, y luego debe ser invocado dicha variable como una función —> NombreVariable()
const saludarAFernando = Saludar.bind(fernando, 'Hola che,')
saludarAFernando()

SEGUNDO MÉTODO:
Hacemos uso del método call() que tiene como estructura —> NombreFuncion.call( NombreObjeto ).
Si en caso la funcion tuviera parametros, podemos utilizar la siguiente estructura —> NombreFuncion.call( NombreObjeto , valorParametro1 , valorParametro2, …)
Este método call() es mas dinámico pues no hay que ser tanto proceso como el método bind() y solo con una de las estructuras que pongas en el código ya estarías invocando de frente la función e indicándole al this que objeto va a tomar como referencia.

Saludar.call(fernando,'Hola che,')

TERCER MÉTODO:
Hacemos uso del método appy() que tiene como estructura —> NombreFuncion.apply( NombreObjeto ).
Si en caso la función tuviera parámetros, podemos utilizar la siguiente estructura —> NombreFuncion.apply( NombreObjeto , [valorParametro1 , valorParametro2, …])
Es muy parecido con el metodo call() , en lo que cambia es cuando vayas a indicar valores de los parámetros pues estos tienes que ponerlos en orden y dentro de un array.

Saludar.apply(fernando,['Hola che'])

.bind(objeto, parámetros)
No ejecuta la función, solo retorna la función atada al objeto indicado

.call(objeto, parámetros)
Ejecuta la función y también ata la función al objeto indicado. De igual manera recibe los parámetros separados por comas

.apply(objeto, [parámetros])
Funciona casi de la misma manera que .call(), con la diferencia que recibe los parámetros en un array.

Gracias equipo Platzi por tan excelente curso.

Les dejo lo que aprendí en esta clase

        const lis = {
            nombre: 'Lissette',
            apellido: 'Garzon'
        }

        const anton = {
            nombre: 'Antonio',
            apellido: 'Cortes'
        }

       function saludar(saludo = 'Hola'){
           console.log(`${saludo}, mi nombre es ${this.nombre}`)
       }

        // saludar(lis)  //esto da Hola, mi nombre es undefined

        // const saludoLis = saludar.bind(lis) //no se ejecuta saludar hasta que llame a saludoLis que la referncia

        const saludando = (persona,saludo) => saludar.bind(persona,saludo)
        
        saludando(lis)()
        saludando(anton, 'Hola che')()
        setTimeout( ()=>saludando(anton, 'che')(),1000)

        saludar.call(lis,'Hola wey') //parametros separados por coma

        saludar.apply(anton, ['Hola amigo']) //parametros dentro de un arreglo separados por coma

Está muy bueno el curso, pero yo que vengo de casi nada de conocimientos de programación, me cuesta entender aún varias de estas lógicas. Me recomiendan libros para estudiar, para acompañar estas clases prácticas?

.bind: Enviamos la referencia a la función, pasando el contexto como parámetro.
.call : Ejecutamos inmediatamente la función con el contexto indicado.
.apply : similar a .call pero los parámetros adicionales se pasan como un arreglo de valores

Útil para debuggear y acabar con los dolores de cabeza

Preguntarte siempre ¿Quien es el this de la función? para evitar bugs

Siento que debe de haber una mejor conducción de este curso, se pasan muchas cosas por encima y no al detalle antes de realizar el proyecto del curso

Yo concuerdo, me gustó mucho el .call()

No sé por que siento que es algo medio forzado para algo que se podria solucionar incluyendo la function en una clase y crear el objeto a partir de ella, o pasando el objeto a usar como parametro a la misma.

Creo que lo mejor es el uso de call o apply de acuerdo a las necesidades. Pero todo dependera.

        const fran = {
            nombre: 'Francisco',
            apelli: 'Garcia',
            edad: 52
        }
        
        const juanda = {
            nombre: 'Juan David',
            apelli: 'Garcia',
            edad: 19
        }


        function saludar(saludo = 'Hola') {
            console.log(`${saludo}, mi nombres es: ${this.nombre}`)
        }

        //cuando se ejecuta asi, el this hace referencia a window, ya que es window quien esta ejecutando la funcion

        //pero esto no es lo mejor,
        const saludarAFran = saludar.bind(fran)
        const saludarAJuanda = saludar.bind(juanda)

        //es una alternativa
        setTimeout(saludar.bind(fran, 'Hola Che'), 2000)
        setTimeout(saludar.bind(juanda, 'Hola parce'), 3000)

        //pero me parece optimo asi
        saludar.call(fran)
        saludar.call(juanda)

        saludar.call(juanda, 'Hola che')
        saludar.call(fran, 'Hola parce')

        //pero claro todo depende de lo que se necesite, como es el caso de apply
        saludar.apply(fran, ['Hola che'])
        saludar.apply(juanda, ['Hola parce'])

Existen al menos tres maneras de cambiar el contexto de una función.

Usando el método .bind, enviamos la referencia a la función sin ejecutarla, pasando el contexto como parámetro.
Usando el método .call, ejecutamos inmediatamente la función con el contexto indicado
Usando el método .apply, es similar a .call pero los parámetros adicionales se pasan como un arreglo de valores

entendí el bind con el call y el apply 😄 genial
estaba un poco perdida cuándo lo vimos en clase.

.bind() => solo devuelve el contexto cambiando el this, esté no ejecuta la función,
.call(functionName, params) => cambia el contexto y ejecuta la función, está recibe los parámetros de forma normal
.apply(functionName, [params]) => cambia el contexto y ejecuta la función, está recibe los parámetros en forma de arreglo

Siempre veia call y apply, pero nunca sabia para que servia 😄 Muyy practica la clase

Se me hizo más sencillo usar call

genial esta clase

Call y Apply, algo nuevo que aprendi

me gusta el método call

código JS clase 47 ----> contexto al llamar a funciones

const jeison={
    nombre:'Jeison',
    apellido:'ruiz',

}

const jessica={
    nombre:'jessica',
    apellido:'zemanate',

}

function saludar(saludo = 'Hola'){
    console.log(`${saludo}, mi nombre es ${this.nombre}`)
}

/*
const saludarAJeison=saludar.bind(jeison,'Holita')
const saludarAJessica=saludar.bind(jessica)

setTimeout(saludar.bind(jeison,'Hola wey'),1000)*/

//saludar.call(jeison,'Hola che')

saludar.apply(jeison,['Hola ke ace'])

console.log(‘Hola Sacha, excelente curso’)

Una clase súper interesante, me gusto demasiado, aprendí algo nuevo.

Dejo por acá mi código.

const Alex = {
        nombre: 'Alex',
        apellido: 'Rubio',
        edad: 27,
    };

    const Eliza = {
        nombre: 'Eliza',
        apellido: 'Nureña',
        edad: 18,
    };

    function saludar(saludo = 'Hola, todo bien;'){
        console.log(`${saludo} mi nombre es ${this.nombre}`)
    }

    const saludarAlex = saludar.bind(Alex);
    const saludarEliza = saludar.apply(Eliza, ['Hello']);

El uso de call me gusto más
saludar.call(carlos, ‘Hola Primo’)

porque alguien elegiría hacer **apply **en vez de call?

Por qué con el setTimeout, bind si ejecuta la función saludar()?
(Se supone que no se ejecuta, sino que nos devuelve una función)

El método bind puede recibir varios parámetros, el primero siempre es el objeto que va a ser this, seguido de éste van los parámetros en orden de aparición.

Bind no ejecuta la función, simplemente cambia el contexto de la función una vez ejecutada.
Si queremos que se ejecute utilizamos los métodos call y apply.
Donde:
Call. Recibe el parámetro this y el resto en strings en orden.

saludar.call(sacha, 'Hola che')

Apply. recibe el resto de los parámetros en un array.

saludar.apply(sacha, ['Hola che'])

El método bind cambia el contexto, cambia el this de una función

.bind no ejecuta la función, sino que retorna una nueva función con el contexto cambiado.

Con esta clase si me quedo claro lo del contexto del .this y las formas que existen de cambiar el contexto con el “bind,call,apply”

.bind no ejecuta la función
Solo retorna la función con el contexto cambiado

Porque el metodo bind no es compatible con arrayFuction??
Example:

const obj = {
	nombre: 'Sacha',
	apellido: 'Lifszyc'
};
const saludar = ()=>{console.log(`Hola mi nombre es ${this.nombre}`)};
const saludarSacha = saludar.bind(obj);```

siempre he tenido la duda de que una variable const se supone que no debería de poderse modificar su valor xq justamente es una constante no? en este ejemplo con la variable consta que llama a la función q modifica la edad si edita el valor, y otra duda es que siempre si es un deber ser que el nombre de una variable const se tenga que escribir en mayúsculas como buena practica, como he visto q en muchos ejemplos sacha escribe una variable const en minúscula entonces siempre he tenido esa duda

/*El contexto (o alcance) de una función es por lo general, window. 
Así que en ciertos casos, cuando intentamos referirnos a this en alguna parte del código,
es posible que tengamos un comportamiento inesperado, porque el contexto quizás no sea el que esperamos.
Existen al menos tres maneras de cambiar el contexto de una función.

Usando el método .bind, enviamos la referencia a la función sin ejecutarla, pasando el contexto como parámetro.
Usando el método .call, ejecutamos inmediatamente la función con el contexto indicado
Usando el método .apply, es similar a .call pero los parámetros adicionales se pasan como un arreglo de valores */

const ronald = {
    nombre: 'Ronald' ,
    apellido: 'Garcia'
}

const pedro = {
    nombre: 'Pedro' ,
    apellido: 'Martinez'
}
function saludar(saludo = 'Hola') {
    console.log(`${saludo}, mi nombre es ${this.nombre}`)
}


// // const saludarAronald = saludar.bind(ronald)
// // const saludarApedro = saludar.bind(pedro)

// setTimeout(saludar.bind(ronald , 'Hola Che'), 1000)
// saludar.call(ronald, 'hola che') 
saludar.apply(ronald, ['hola che'])

Es bastante importante saber estos conceptos, entre .bind, .call y .apply.

Noté que el enlazamiento sucede en los dos sentidos al usar bind.
Al usar bind o call, le pasas el contexto a la función pero todo lo que suceda en la función afecta al objeto original.
ejemplo:

const persona = {
            nombre: 'Milton',
            edad: 33
        }

        function envejecer() {
            this.edad++
            console.log(`Edad: ${this.edad}`)
        }

        //ejecuta al instante 
        envejecer.bind(persona)()

        //La edad de persona ha cambiado a 34
        console.log(persona)

        envejecer.call(persona)

        //La edad de persona ha cambiado a 35
        console.log(persona)

Alguien sabe por qué solo se imprimi el

saludar.bind(sacha,'Hola che')

cuando esta en un sitTimeout() y ¿no por ejemplo cuando la llamo sola?

Que interesante el uso de bind para modificar el contexto del this dentro de una función.

el valor de “this” dentro de una función no depende de cómo se define esa función, sino de cómo se invoca por eso cuando ejecutas Javascript dentro de un navegador, el objeto global es el objeto “window” Si coloco código fuera de cualquier función y trato de ver el contenido de this, encontraré el contexto global por esta razon necesitamos cambiar el contexto de la funcion

buenas clases

¿y cuál es el beneficio de usar APPLY y pasarlo por un arreglo?

Excelente contenido!

Me encanto está clase por que me dejo claro los diferentes métodos para que no se pierda el contexto del this. Gracias.

Entonces el call y el apply la UNICA diferencia es que los parámetros de la función van como array? o hay más diferencias que podríamos ver a futuro?

Buen curso

Excelente clase y muy buenos ejemplos.

  1. Cuando aplico el call y ocupo el parametro ‘hola che’, se anula el parametro saludo = ‘hola’ que aparece arriba en la function saludar?

  2. El parametro ‘hola che’ , se supone que es el ${saludo} ??

function saludar(saludo = 'hola'){
  console.log(`${saludo}, mi nombre es ${this.nombre}`)
}

saludar.call(sacha, 'hola che')```

me gustan los métodos call y apply!

Entendido.

El this es bien escurridizo

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">

      const andres = {
        nombre: 'Andres',
        apellido: 'Ramirez',
        edad: 33
      }

      function saludar(saludo = 'Hola'){
        console.log(`Hola mi nombre es ${this.nombre}`)
      }

      const saludarAAndres = saludar.bind(andres)

      setTimeout(saludar.bind(andres, 'Saludos'), 2000)

    </script>

  </body>
</html>

const jeferson = {
    nombre: 'Jeferson',
    apellido: 'Velásquez'
}

const alexandra = {
    nombre: 'Alexandra',
    apellido: 'Díaz'
}

function saludar(){
    console.log(`Hola mi nombre es ${this.nombre}`)
}

//1. -> this a 2 objetos distintos con .bind
//const saludarAJeferson = saludar.bind(jeferson)
//const saludarAAlexandra = saludar.bind(alexandra)

//2. -> SetTimeout no modifica directamente al objeto
setTimeout(saludar.bind(jeferson),1000)


//Nota: .bind no ejecuta la función, sino nos retorna una nueva función con el contexto cambiado

Uso de .bind() para cambiar el contexto de una funcion

Les dejo mi versiòn del còdigo

/*
Autor: Daniel Páez
URL Autor:  heysoypaez.com
Tema de la clase: Contexto al llamar una funcion en javascript
Descripción: Contexto al llamar una funcion en javascript
URL código: github.com/heysoypaez
*/

/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
console.log("Inicializando archivo")


/*DECLARACIÓN DE OBJETOS
============================*/		

const daniel =  {

	nombre: "Daniel",
	apellido: "Páez"	

}

const mario = {

	nombre: "Mario",
	apellido: "Luna"
}

const elQueLlegaTarde = {
	nombre : "El que llega tarde"
}

/*DECLARACIÓN DE VARIABLES
==================================*/

//Ahora this es Daniel
const saludarADaniel = saludar.bind(daniel)

//Ahora this es Mario
const saludarAMario = saludar.bind(mario)

const saludarJoven = saludar.bind(elQueLlegaTarde)

const segundo = 1000




/*DECLARACIÓN DE FUNCIONES
========================================================*/



//Esta funcion es un metodo del objeto window

/*Todo objeto es subclase de otro objeto*/
function saludar(saludo = "Hola") {
	//debugger
	console.log(`${saludo}, soy ${this.nombre}`)
}


/*El primer parametro de bind es el contexto this
el resto son los argumentos normales*/
setTimeout(	 saludar.bind(elQueLlegaTarde, "Epa Mijo")  , 2 * segundo  )




/*EJECUCIÓN DE FUNCIONES Y PROMESAS
========================================0*/

saludarADaniel()
saludarAMario()

//call, cambia el contexto de la funcion y la ejecuta de inmediato
saludar.call(daniel, "Hola, de nuevo")

// apply funciona como call y entrega los argumentos como arrays
saludar.apply(mario, ["AH VAINA MIJO"])


/*=======================================
RENDER EN PANTALLA
Agregando al html datos de la clase
=======================================*/

//Variables
let temaClase = "Contexto en funciones en javascript";
let titulo = document.getElementById("title")
let contenidoClase = document.getElementById("contenido-clase")

//Variables reasignadas
titulo.innerHTML=  temaClase;
contenidoClase.innerHTML= temaClase;

//contenido de la clase

let apuntes = document.getElementById("apuntes")
let textoContenido = "Contexto en javascript es saber quien es el objeto this. Sobre cual objeto se está ejecutando una función." 

apuntes.innerHTML = `${textoContenido}`;


MIS IDEAS CLAVES

Contexto en javascript es saber quien es el objeto this. Sobre cual objeto se está ejecutando una función.

No saber quien es this es un error común

Manejar quien es this en javascript es algo vital
Prestar atencion a ello es vital para evitar errores
sobretodo en javascript asincrono

¿Sabes quien es this pero necesitas cambiarlo?

Existen tres estrategias claves

.bind(new This, args)
.bind devuelve una referencia de la función con el nuevo this y recibe los argumentos de la funcion

.call(new This, args)
.call ejecuta inmediatamente la función con el nuevo this y recibe los argumentos de la funcion

.apply(new This, [args] )
.apply() ejecuta inmediatamente la función con el nuevo this y recibe los argumentos de la funcion en un array.

¿No sabes quien es this durante una ejecución?
Usa el debugger y tendrás más claridad

Buena clase.

Excelente!

Alguien sabe como se llama el instructor?

// contexto quien va a ser this

const persona3 = {
	nombre: "Mauricio",
	apellido: "Vela",
	altura: 1.75
};
const persona2 = {
	nombre: "Laura",
	apellido: "Vela",
	altura: 1.75
};

function saludar(saludo = "Hola") {
	console.log(`${saludo}, mi nombre es ${this.nombre}`);
}

//const saludar_persona = saludar.bind(persona3)
//const saludar_persona2 = saludar.bind(persona2)

//setTimeout(saludar.bind(persona2, 'Hola che'), 1000);

// saludar.call(persona2 , 'JOJOJOLA')

saludar.apply(persona2, ['Lolololoy'])```

Muy buena aclaración sobre “this”. Gracias.

El primer parámetro es el contexto (quién va a ser this) y luego si se pueden colocar los siguientes parámetros en el orden que aparezcan

Muy buena información, me pareció muy interesante está clase.

Pregunto: si la función saludar pertenece al objeto window, porque el objeto o variable sacha no pertenece también al objeto window, entonces a que objeto pertenece la variable sacha; porque si copiamos en la consola window.sacha o document.sacha, muestra que sacha no pertenece ni a window ni a document. Gracias

Estas clases están de ultimas pero deberían estar antes de hacer el juego, creo yo… Igual esta bueno repasarlo

Mis apuntes:

<!DOCTYPE html>
<htmllang="en"dir="ltr">
  <head>
    <metacharset="utf-8">
    <title>Cambiando de contexto al llamar a una funcion </title>
  </head>
  <body>
    <script>
      const emilia = {
        name: 'Emilia',
        surname: 'Taborda',
      }

      const pirulo = {
        name: 'Piru',
        surname: 'Blissing',
      }

      function greating(greating = 'Hi') {
        console.log(`${greating} Hey, my name is ${this.name}`)
      }

      const greatingToEmilia = greating.bind(emilia)
      const greatinToPiru = greating.bind(pirulo)

          //bind no ejecuta, solo retorna algo

      //setTimeout(greating.bind(emilia, 'Hey you'), 1000)


          //CALL Y APPLY ejecutan la funcion en ese momento


        //greating.call(emilia, 'hey you, how are you doing')
        // apply funciona similar a call pero se coloca con arrays
        

        greating.apply(emilia, ['hellou', 'how are you doing'])

        //conclusion 
        //Manejar quien es THIS dentro de una funcion,  incluso cuando nuestra funcion es asincrona```

Bastante explicativo el video, muy bien exprimido.

Basicamente .bind trae el objeto crea un puente con el objeto deseado pero no la ejecuta, y aparte le podemos aniadir los parametros.
Respecto a .call y .apply actuan como .bind pero estas ejecutan la accion, y la diferencia entre ellas es la manera en la que presentan el contexto, la segunda en array respectivamente.

Entiéndase como CONTEXTO, el objeto al cual nos referimos a la hora de ejecutar un código, cuando no definimos un contexto (objeto) el que se coloca como determinado suele ser el navegador, el cual conocemos como window.

Cambiando el contexto al llamar a una función

const Person = {
    name: 'Santiago',
    lastName: 'Bastidas'
}

const Person2 = {
    name: 'Sacha',
    lastName: 'Lifszyc'
}

function Salute(salute = 'Hola') {
    console.log(`${salute}, mi nombre es ${this.name}`)
}

//El this se ata o engancha al objeto Person 
const salutePerson = Salute.bind(Person)

//El this se ata o engancha al objeto Person2 
const salutePerson2 = Salute.bind(Person2)

// Permite que la función bind sea llamada correctamente
setTimeout(Salute.bind(Person, 'Q hubo parce'), 1000)

// Ejecuta la función en el mismo momento y cambia el contexto al deseado
Salute.call(Person, 'Q más pacero')

// Ejecuta la función igual que 'call', pero los demás parametros los guarda en un Array
Salute.apply(Person, ['Q más parcero'])

##Muy bien explicado del call y apply… gracias Sacha

funcion bind

Bind rules!

Super!!!

Buen aclaración

Por cierto buena explicación con lo del tema del bind me quedo mas claro

const jesus = {
    nombre : 'Jesus',
    apellido : 'Castellanos',
    edad : 29
}

const  yesika= {
    nombre : 'Yesika',
    apellido : 'Cortés',
    edad : 29
}

function saludar(saludo = 'Hola'){
    console.log(`${saludo}, mi nombre es ${this.nombre}`);
}

// const saludarAJesus = saludar.bind(jesus);
// const saludarAyesika = saludar.bind(yesika);

// setTimeout(saludar.bind(jesus, 'Hola che'), 1000);

// saludar.call(jesus, 'Hola che');

saludar.apply(jesus, ['Hola che'])```

Excelente explicación, ahora ya queda claro lo de scope del this.

Tener en cuenta el contexto, this.

Excelente clase. A seguir profundizando los conceptos aprendidos con la información del internet y libros. 🙂

Excelente clase.

Gran dato el de las funciones call() y apply()!

El contexto (o alcance) de una función es por lo general, window. Así que en ciertos casos, cuando intentamos referirnos a this en alguna parte del código, es posible que tengamos un comportamiento inesperado, porque el contexto quizás no sea el que esperamos.

Mi duda es porque existe call y apply, si ambas realizan la misma operación, no bastaría con una solo, o es que en cuestión de lo que necesite hacer una me va a servir mas que otra?

Muy buena forma de ejecutar una funcio

Excelente.

Me gustó esta clase. Muy sencilla la forma de explicar los métodos para hacer las referencias, excelente !

Muy importante tener claro el manejo del this

const dbz = {
            nombre: 'David',
            apellido: 'Baez',
            edad: 44
        }
        const diana = {
            nombre: 'Diana',
            apellido: 'Osorio',
            edad: 42
        }
        function saludar(saludo = 'Hola') {
            console.log(`${saludo}, mi nombre es ${this.nombre}`)
        }

        const saludarADavid = saludar.bind(dbz, 'Hi')
        const saludarADiana = saludar.bind(diana, 'Buenas')

        setTimeout(saludar.bind(diana,'Parce'), 1000)

        saludar.call(dbz, 'Sumerced')
        saludar.bind(dbz)

        saludar.apply(diana,['Good '])

Muy útil.
El caso this es particular y con esto nos puede ayduar a evitar problemas en la ejecución del código.

Resumen Clase:
Cuando se habla de contexto en JavaScript se refiere quien es el objeto this cuando se ejecuta un código.una forma de ligar un objeto a una función es con el bind y el objeto
Const saludarASacha = Saludar.bing(sacha).

En una función que recibe parámetros se le puede inicializar un parámetro, esto es para cuando ese parámetro no se recibe toma el valor de la inicialización donde se declara la función.
Se utiliza call y apply sobre la función y se envía o se dice quien va ser el objeto this en los parámetros. Ejemplo:
setTimeout(saludar.bind(sacha),1000)
saludar.call(sacha,’Hola chee’)
saludar.apply(sacha,[‘Hola amigo’])
En apply se maneja un arreglo de parámetros.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Call_Apply_Bind</title>
</head>
<body>
    <script>
 const angie ={
     nombre: `angie`,
     apellido: `garcia`
 }

 const yesika ={
     nombre: `yesika`,
     apellido: `castillo`
 }

 function saludar(saludo = `hola`){
     console.log(`${saludo}, mi nombre es ${this.nombre}`)
 }

// //  const saludarAAngie = saludar.bind(angie)
// // const saludarAYesika = saludar.bind(yesika)

// setTimeout(  saludar.bind(angie, `hola parcera`),1000  )
saludar.call(angie , `hola parcera`)
saludar.apply(angie, [`hola parcera`])

// son diferentes maneras de colocar el saludo usando bind, apply, call 

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Cambiando el contexto al llamar a una función</title>
</head>
<body>
    <script>
        const leo = {
            nombre: 'Leonardo',
            apellido: 'Bravo'
        }
        
        const caro = {
            nombre: 'Carolina',
            apellido: 'Herrera'
        }
        
        function saludar(saludo = 'Hola') {
            console.log(`${saludo}, mi nombre es ${this.nombre}`);
        }
        
        // const saludarALeo = saludar.bind(leo)
        // const saludarACaro = saludar.bind(caro)
        
        // setTimeout(saludar.bind(leo), 1000)
        saludar.call(leo, `hola güey`)
        saludar.apply(leo, ['Hola güey'])
        
        // Se manejan diferentes maneras de colocar el saludo usando bind, apply, call
    </script>
</body>
</html>
/* Cambiando de contexto al llamar a una función
El contexto (o alcance) de una función es por lo general, window. Así que en ciertos casos, cuando intentamos referirnos a this en alguna parte del código, es posible que tengamos un comportamiento inesperado, porque el contexto quizás no sea el que esperamos.

Existen al menos tres maneras de cambiar el contexto de una función.

-.Usando el método .bind, enviamos la referencia a la función sin ejecutarla, pasando el contexto como parámetro. ejemplo */

const cristian = {
  nombre: 'Cristian',
  apellido: 'Alvarez',
}

const daniela = {
  nombre: 'Daniela',
  apellido: 'Ospina',
}

function saludar(saludo = 'hey parcero') {
  console.log(`${saludo}, mi nombre es ${this.nombre}`)
}

const saludarACristian = saludar.bind(cristian)

setTimeout(saludar.bind(cristian, 'hola chino'), 1000);


/*-.Usando el método .call, ejecutamos inmediatamente la función con el contexto indicado, ejemplo:*/

const cristian = {
  nombre: 'Cristian',
  apellido: 'Alvarez',
}

const daniela = {
  nombre: 'Daniela',
  apellido: 'Ospina',
}

function saludar(saludo = 'hey parcero') {
  console.log(`${saludo}, mi nombre es ${this.nombre}`)
}

saludar.call(cristian, 'hola pana')

/*-.Usando el método .apply, es similar a .call pero los parámetros adicionales se pasan como un array de valores */

const cristian = {
  nombre: 'Cristian',
  apellido: 'Alvarez',
}

const daniela = {
  nombre: 'Daniela',
  apellido: 'Ospina',
}

function saludar(saludo = 'hey parcero') {
  console.log(`${saludo}, mi nombre es ${this.nombre}`)
}

saludar.apply(cristian, ['buena men'])

/* de esta manera vemos que manejar quien va a ser el this dentro de nuestra funcion es algo que no podemos perder de vista cuando estemos escribiendo codigo en js mas que nada cuando estamos escribiendo codido ascincrono porque siempre que ejecutemos una funcion ascincrona el this va a cambiar y siempre debemos estar seguros de que sea el que queremos */```

Hola. Les comparto un ejercicio que realicé para crear objetos de personas apartir de una función.

function nombreConstructor(persona) {
    const person = {
        fullName: function() {
            const name = `${this.firstName} ${this.lastName}`
            return name
        }
    }
    console.log(person.fullName.apply(persona))
}
const persona = {
    firstName: 'Alejandro', 
    lastName: 'TR'
}
nombreConstructor(persona)

Y mi pregunta es 😄. Eso que hice ahí lo hacen las funciones call(), bind(), y apply()?

Espero sus respuestas, gracias!

A mi entender la funcion ‘bind’ redirecciona el contexto (que originalmente es window en un contexto global) a objetos como Sacha y Yesika.

La función bind no llama a la función sino construye una nueva función con un contexto modificado.
Manejar quien es el ‘this’ dentro de una función es algo que no podemos perder de vista cuando estamos escribiendo codigo mas aun si estamos escribiendo codigo asíncrono, porque siempre que estemos ejecutando codigo asíncrono el this va cambiar, por lo que necesitamos saber con certeza quien es ‘this’

creo que estas ultimas clases hubieran sido mejor al comienzo del curso, asi se tiene una mejor compresion del mismo, desde el comienzo

alguien se dio cuenta, que al llamar a:

saludar() window.saludar()

en ambos casos aparece undefined para this.nombre