A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Los m茅todos call, apply y bind

9/42
Recursos

Estas funciones nos sirven para establecer el valor de this, es decir cambiar el contexto que se va usar cuando la funci贸n sea llamada.

Las funciones call, apply y bind son parte del prototipo Function. Toda funci贸n usa este prototipo y por lo tanto tiene estas tres funciones.

  • functionName.call(). Ejecuta la funci贸n recibiendo como primer argumento el this y los siguientes son los argumentos que recibe la funci贸n que llam贸 a call.
  • functionName.apply(). Ejecuta la funci贸n recibiendo como primer argumento el this y como segundo un arreglo con los argumentos que recibe la funci贸n que llam贸 a apply.
  • functionName.bind(). Recibe como primer y 煤nico argumento el this. No ejecuta la funci贸n, s贸lo regresa otra funci贸n con el nuevo this integrado.

Aportes 185

Preguntas 19

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Apuntes de la clase

Los m茅todos call, apply y bind

Es cierto que this no es un valor que podemos asignar directamente, pero s铆 existen unos m茅todos que son parte del prototipo de function, se llaman: call, apply y bing. Estos nos ayudar谩n a establecer this en el contexto de una llamada a una funci贸n.

Crearemos un nuevo archivo en la carpeta de ejercicios para aprender m谩s sobre esto.

Call

Para empezar crearemos una funci贸n.

function saludar() {
        console.log(`Hola, me llamo ${this.name} ${this.apellido}`);
      }

En este caso no tenemos la funci贸n dentro de alg煤n objeto o clase y sin embargo estamos utilizando this. Con la ayuda de Call vamos a establecer cual va a ser el this. Para esto crearemos un objeto.

const augusto = {
          name: 'Augusto',
          apellido: 'Barco'
      }

Al tener el objeto vamos a llamar a saludar pero mediante call. Todas las funciones tienen los tres m茅todos antes mencionados, son tres funciones que ya vienen empaquetadas.

saludar.call(augusto)

Con esto establecemos que this va a ser el objeto augusto. Tambi茅n podemos pasar par谩metros aparte del contexto que ya le podemos dar con el call. Por ejemplo:

function caminar(metros, direccion) {
        console.log(
          `${this.name} ${this.apellido} camin贸 ${metros} hacia el ${direccion}`
        );
      }

      caminar.call(augusto, 1000, "sur");

Esto nos dar谩 como resultado: //Augusto Barco camin贸 1000 hacia el sur. Aparte del contexto que le pasamos le mandamos dos argumentos.

Apply

Esta hace la misma funcionalidad de call, pero sus argumentos los pasamos de una forma ligeramente diferente.

caminar.apply(augusto, [800, "sureste"]);

Ac谩 le pasamos los par谩metros extras como si fueran un arreglo. Eso nos sirve cuando le tenemos que pasar una lista larga de par谩metros a nuestra funci贸n, podremos manejar mejor esto usando apply. Tambi茅n le podemos pasar una instancia de un arreglo.

const parametros = [800, "sureste"];
caminar.apply(augusto, parametros);

Igual nos dar谩 el mismo resultado.

Truco para distinguirlos

Podemos usar las iniciales de cada tipo de asignador de this. Ejemplo:

  • Call: c de comas, esto por que le pasamos todos los valores separados por comas.

  • Apply: a de arreglo, ac谩 le pasamos todos los par谩metros por arreglos.

Bind

A diferencia de los dos anteriores que vimos, bind no va a llamar a la funci贸n autom谩ticamente. Lo que va a hacer es construir una nueva funci贸n con el this integrado, cuando la llamemos va a funcionar.

const daniel = {
        name: "Daniel",
        apellido: "S谩nchez"
      };
      saludar.bind(daniel);

Si hacemos esto la funci贸n no se va a llamar, por esto tenemos que meterla en una constante y ejecutarla luego.

const saludarConDaniel = saludar.bind(daniel); 
      saludarConDaniel();

Ahora vamos a ver c贸mo hacemos para pasar m谩s par谩metros a esta funci贸n, queremos usar la opci贸n de caminar.

const danielCamina = caminar.bind(daniel);
  danielCamina(200, "oeste");

Con esto ya tendremos nuestro: //Daniel S谩nchez camin贸 200 hacia el oeste.

Tambi茅n podemos pasar un par谩metro cuando llamamos con bind y as铆 establecer uno ya predefinido y el otro lo pasamos cuando ejecutamos.

const danielCamina = caminar.bind(daniel, 200); 
  danielCamina("oeste"); 

Nos dar谩 el mismo resultado pero guardando ya un par谩metro que es la distancia. A esta t茅cnica se le llama Function currying.

Conclusi贸n

Tenemos varias formas de establecer el valor de this, con los tres m茅todos que vimos. Cada uno tiene su forma de hacerlo. Con call y apply establecen el this y llaman de una vez a la funci贸n. Con bind se establece el contexto pero luego hay que ejecutarla como si fuera una nueva funci贸n que hay que guardar en una constante.

Nodelist

Aveces tenemos objetos que se parecen a otros. Cuando llamamos a varios elemento usando el getElementByClassName nos trae un Nodelist, es muy parecido al Array pero no trae todos los m茅todos, como por ejemplo el foreach. Usemos el siguiente c贸digo:

<u>
        <li><button class="call-to-action">Aprender</button></li>
        <li><button class="call-to-action">Aprender m谩s</button></li>
        <li><button class="call-to-action">隆Nunca pares de aprender!</button></li>
    </u>

Usaremos estos botones para probar el foreach. Vamos a darle funcionalidad. Traeremos estos botones con getElemenetByClassName y que cuando le demos click a cada uno de estos botones abra una ventana que diga 鈥楴unca pares de aprender鈥.

const buttons = document.getElementsByClassName("call-to-action");
      buttons.forEach(element => {
          element.onclick = ()=> {
              alert('Nunca pares de aprender')  
          }
      });

Nos va a decir que buttons no es una funci贸n. Esto pasa porque buttons es un Nodelist. Se parecen a los arreglos pero no del todo, por lo menos tienen la propiedad lenght que nos puede servir para hacer el trabajo que queremos. Vamos a llamar el foreach a trav茅s del Array y le asignaremos el contexto de buttons con call.

Array.prototype.forEach.call(buttons, element => {
        element.onclick = () => alert("Nunca pares de aprender");
      });

De esta forma el foreach entender谩 a buttons como el contexto y lo usar谩 como el elemento que iterar谩 cada vez que se le d茅 click.

Investigando un poco mas acerca del aporte del compa帽ero Leandro Videlea.

Tenemos el siguiente apunte

// OTRA FORMA DE HACERLO ES MEDIANTE EL Operador de Propagaci贸n
        const botones3 = document.getElementsByClassName('call-to-action3')
        console.log(botones3); // importante el ;, la siguiente linea empieza con un array

        // Transformo la colecci贸n de elemetnos HTML en un arreglo con spread operator.
        // Practicamente spread toma la matriz y la convierte en una lista de elementos
        // Si pasamos una cadena, la convierte en una matriz de caracteres
        [...botones3].forEach(el => {
            el.onclick = () => {
                alert('Rest Operator')
            }
        })

Cuando se trata de un NodeList lo ven铆a haciendo de esta forma:

const buttons = document.getElementsByClassName('call-to-action');

    [...buttons].forEach(button => {
      button.onclick = () => {
        alert('no pares de aprender')
      }
    });

Transformo el NodeList del query en un Array utilizando el rest operator y todo funciona bien. Esto es correcto tambi茅n? O ser铆a mejor empezar a utilizar Array.prototype鈥? Gracias!

Por si alguien al igual que yo se perdi贸 en la parte de nodeList
este articulo me ayudo a entenderlo 馃槂
https://medium.com/@elenacerezo83/a-qu茅-te-refieres-cuando-hablas-de-nodelist-592ef54c8b1b

Hola, solo quer铆a aclarar una cosa:

Al utilizar el m茅todo document.getElementsByClassName lo que se esta obteniendo es un HTMLCollection que dentro de su prototypo no cuenta con el m茅todo forEach.

En cambio si hubi茅semos utilizado document.querySelectorAll esto si devuelve un NodeList en cuyo prototype existe el m茅todo forEach.

Saludos.

Que clase tan brutal

Con respecto al 煤ltimo ejemplo que puso el profesor con los NodeList, existen formas de pasar el NodeList a un array y trabajarlo como tal.
Vamos a partir de que el NodeList que necesitamos lo crearemos de la siguiente manera:

const buttons = document.getElementsByClassName('call-to-action');

PRIMER MODO: M脡TODO Array.from()
Array.from() te permite crear un array partiendo de un NodeList.
Ten cuidado porque este m茅todo fue a帽adido en EcmaScript 6, por lo que no funcionar谩 en navegadores antiguos.

const arrFrom = Array.from(buttons);

SEGUNDO MODO: Spread Operator
Esta, a mi parecer es una manera elegante de convertir un NodeList a un array.
Con el Spread Operator puedes crear un array partiendo de cualquier iterable, como nuestra NodeList en este caso.
Al igual que con el m茅todo anterior, fue a帽adido en ES6, por lo que tampoco funcionar谩 en navegadores antiguos.

const arrSpreadOperator = [...buttons];

TERCER MODO: M脡TODO Array.prototype.slice()
Finalemente, usando lo que vimos en clase, podemos usar call para llamar el m茅todo Array.prototype.slice() y convertir nuestra NodeList en un array
Este modo, funciona perfecto en todos los navegadores

const arrSlice = Array.prototype.slice.call(buttons);

Aunque puedes llamarlo de una manera m谩s abreviada as铆:

const arrSlice = [].slice.call(buttons);

Y as铆 puedes transformar una NodeList a un array y trabajarlo con un forEach() 馃槈

Hey Platzi team. En la ruta de la Escuela de Javascript no hay ningun curso en el que te ense帽en todos estos m茅todos de manipulaci贸n del DOM, como el getElementByClassName() o document.querySelector(). Este es un conocimiento fundamental que Richard ya da por hecho, pero que para un novato no es nada intuitivo, y que no debiese obviarse en una carrera de JS.
Un curso de manipulaci贸n del DOM Ccon javascript es una demanda ya antigua que han hecho varios alumnos en varios comentarios en diferentes clases y cursos.

Utilizo JavaScript desde hace tanto tiempo y no conoc铆a el uso de call, aply y bind. Esta clase ha marcado un antes y un despu茅s en mi carrera.

Me ayude con este articulo antes de empezar la clase y me ayudo bastante entender todo, por si alguien le sirve.

馃挌Richard explica muy muy bien, me encanta, muy analiticamente despedaza cada cosa en trocitos peque帽os f谩ciles de digerir, plantea todas las posibilidades de forma clara y ordenada, y lo deja muy claro. Muy buena base. Muchas gracias.

Currying es un proceso en programaci贸n funcional en el cu谩l podemos transformar una funci贸n con multiples argumentos en una secuencias de funciones anidadas, retorna una nueva funci贸n que espera el nuevo argumento en la lista.

El metodo forEach si funciona dependiendo el metodo que uses de la API de document

Por ejemplo :

querySelectorAll -> Devuelve un node list pero si trae forEach

const buttons = document.querySelectorAll("button")
console.log(buttons.length)
buttons.forEach(button => console.log(button))

getElementsByTagName -> Devuelve un node list pero no trae forEach

const buttons = document.getElementsByTagName("button")
console.log(buttons.length)
buttons.forEach(button => console.log(button))

pero si lo convertimos en un Array

let buttons = document.getElementsByTagName("button")
console.log(buttons.length)
buttons = Array.from(buttons)
buttons.forEach(button => console.log(button))

este ejemplo es muy interesante!

Array. prototype.forEach.call( btns => {
	btns.onclick = () => alert('Nunca te quedes obsoleto. Aprende cabr..!!!');
})

Ufff en esta clase el profe si brill贸, que clasesota.

Tip para comentar y descomentar r谩pido en VS Code, como el profe, comentar: ctrl + k + c
descomentar: ctrl + k + u
No presionar al mismo tiempo, primero ctrl, luego k y luego c o u.

Esa t茅cnica para poder usar un forEach con un NodeList es re hacker jajaja me gust贸

驴Como se llama el tema de vs code que esta usando?

Refuerzo lo que ya habia dicho sacha en el curso de fundamentos 馃槃

Ahora ya entendi porque el primer parametros de las 鈥渃lases鈥 en Js es 鈥渟elf鈥.
Que bueno es saber de donde vienen las cosas

Vaya vaya, yo cre铆a que los metodos para recuperar muchos elementos HTML retornaban un nodeList, pero ya veo que no, algunos retornan una coleccion de elementos HTML.
waoo.

Puede tomar distintos valores:

En un entorno global -> Window
En una funci贸n que llamamos directamente -> Window
En una funci贸n que llamamos directamente en Strict Mode -> Undefined
En un JSON -> valor del objeto
En objetos prototipales -> instancia

Cambiar valor de This con Call, Apply y Bind:

Call y Apply ejecutan la funci贸n luego de establecer el contexto.
function.call(context, prop_1, prop_2, 鈥)
function.apply(context, [ prop_1, prop_2, 鈥 ])

Bind, no ejecuta la funci贸n. Devuelve una nueva.
newFunction = function.bind(context, prop_1, prop_2, 鈥)
newFunction()

Otra forma:
newFunction = function.bind(context)
newFunction(prop_1, prop_2, 鈥)

Call: Permite ejecutar una funci贸n estableciendo el valor de this y se pueden pasar argumentos individualmente.
Apply: Permite ejecutar una funci贸n estableciendo el valor de this y se pueden pasar argumentos como un array.
Bind: Permite guardar una funci贸n en una variable con un argumento this definido.

Excelente como aplicar el forEach a un NodeList!!! :d

Call de Comma
Apply de Arreglos

馃槃 馃槃 馃槃 馃槃

Qu茅 curioso. Igual siempre hab铆a pensado que un arreglo de nodeLists podr铆an tener esta funci贸n forEach por default.

Esta especificamente esta es la clase de JS en la que mas aprend铆 en mi vida sobre JS. Gracias Sparragus!

馃槂 Me gusto mucho esta clase! Me perd铆 cuando hablo de NodeList pero encontr茅 este articulo de Platzi que habla de las diferencias entre NodeList y Array (Esta casi a la mitad del post pero seria genial que lean todo) Este post habla de C贸mo manipular el DOM con Javascript! algo que muchos estudiantes han dicho que necesitamos y estoy totalmente de acuerdo! https://platzi.com/tutoriales/2193-dom/9548-como-manipular-el-dom-con-javascript/

OMG est谩 muy interesante esto, nunca cre铆 que pudi茅ramos modificar los prototypes que vienen por defecto y darle utilidad. Buen curso

Aqui podemos aprender mas sobre Currying

Resumen

// Establece `this` usando `call`
      function saludar() {
        console.log(`Hola. soy ${this.name} ${this.apellido}`);
      }

      const jorge = {
        name: "jorge",
        apellido: "rangel",
      };

      saludar.call(jorge);

      function caminar(metros, direccion) {
        console.log(`${this.name} camina ${metros} hacia ${direccion}`);
      }

      caminar.call(jorge, 400, "norte");

      // Establece `this` usando `apply` y pasar argumentos a ala funci贸n
      // caminar.apply(jorge, [800, "noreste"]);
      const valores = [800, "noreste"];
      caminar.apply(jorge, valores);

      /*
       * Call - comma
       * Apply - Array
       */

      // Establecer `this` en una nueva funcion usando `bind`
      const pepe = {
        name: "pepe",
        apellido: "perez",
      };

      const pepeSaluda = saludar.bind(pepe); // bind crea nuevas funciones
      pepeSaluda();

      const pepeCamina = caminar.bind(pepe, 2000);
      pepeCamina("oeste");

      const buttons = document.getElementsByClassName("call-to-action");
      console.log("buttons", buttons);
      // buttons.forEach((button) => {
      //   button.onclick = () => alert("Nunca pares de aprender");
      // });

      // buttons in NodeList
      Array.prototype.forEach.call(buttons, (button) => {
        button.onclick = () => alert("Nunca pares de aprender");
      });

NodeList son un conjunto de elementos de html o puede representar a algo mas?

Creo que es util dejar apuntes de la clase, bastante larga y pero bien explicada.

/* call() recibe dos argumentos, el primero es el valor que va a tener
this, y el segundo los parametros que se le pasan a la funcion,
en este caso a saludar()
*/

function saludar(){
  console.log(`Hola, soy ${this.name} ${this.apellido}`);
}
const persona1 = {
  name: 'Daniel',
  apellido: 'Molina'
}

saludar.call(persona1);

function caminar(metros, direccion){
  console.log(`${this.name} camina ${metros} metros hacia ${direccion}`);
}

caminar.call(persona1, 400, 'norte');

/* apply() es similar a call(), pero los argumentos se pasan en un array
truco para no confundirlos...
Call => Coma
Apply => Array
*/

const valores = [800, 'noreste'];
caminar.apply(persona1, valores);

/*
  Bind(), establece el contexto de this, pero no ejecuta la funcion
  sino que crea una nueva
*/

const persona2 = {
  name: 'Daniel',
  apellido: 'Molina'
}

const persona2Saluda = saludar.bind(persona2);
persona2Saluda();

// como pasar parametros a una funcion con bind?

const persona2Camina = caminar.bind(persona2);
persona2Camina(1000, 'este');

const persona2Camina2 = caminar.bind(persona2, 1000, 'sur');
persona2Camina2();

const persona2Camina3 = caminar.bind(persona2, 2000);
persona2Camina3('oeste');


// NodeList, son similares a los Arrays pero no disponen de todos los metodos

const botones = document.getElementsByClassName('call-to-action');
// botones.forEach(boton => {
//   boton.onclick = () => alert('Nunca pares de aprender');
// });

Array.prototype.forEach.call(botones, boton => {
  boton.onclick = () => alert('Nunca pares de aprender');
});```

incre铆ble explicaci贸n, esta vez lo explico de una forma muy simple y clara porque la verdad el this en la clase pasada me costo mucho aprenderlo pero en esta clase hasta el this me quede mucho mas claro

No se si sera un error del profe pero en el ejemplo tenemos es un HTMLCollection que no tiene la funci贸n forEach pero si traemos los botones con querySelector retornamos un NodeList y este si tiene la funci贸n forEach.

Existe alguna diferencial de performance entre usar call o apply?

Esta clase me aclar贸 la duda total del bind, call y apply, sin duda ahora seguir documentandonos sobre ello, pero basta decir que ya est谩 entendida en un 75%

Los objetos NodeList son colecciones de nodos. Aunque estos NodeList no son Arrays se puede iterar sobre este usando forEach().
Y para evitar cualquier error en el navegador es recomendable escribir: Array.prototype.forEach

Lecci贸n: No caer en un nodeList

Quisiera explicar desde mi punto de vista y conocimiento, que fue lo ultimo que hicieron (modificar el prototype de Array), para verificar que estoy entendiendo como funciona esto internamente, de equivocarme en algo por favor hacermelo saber, gracias 馃槃.
-Supono que interamente la forma en la que la funcion forEach recorre todos los elementos de un array es ingresando por su indice ej :
callbackDelForEach(Arreglo[i])
La forma de iterar en un objeto 鈥淣odeList鈥 es agregando llaves y la posicion del elemento ej:
nodeList[0] , nodeList[1]
Entonces, si modifica el this del prototype, que es un arreglo, a una NodeList, el metodo forEach ingresaria a cada elemento de la misma forma ej :
nodeList[indice] , Arreglo[i]
Para este caso especifico funciono,pero siempre dependera de como cada metodo de arreglo itere, si ingresa a cada elemento de una forma diferente, no funcionara.

Lo 煤ltimo que comento, lo tuve presente hace poco. Cuando fui a la consola lo que estaba imprimiendo. Vi que era un nodeList en mi mente pens茅 bueno ha de ser otro tipo de objeto. As铆 que use for of
La pregunta es: 驴Qu茅 diferencia hay entre convertir nodelist a un array? o 驴Usar el for-of?

//nodelist convirtiendo

Array.prototype.forEach.call(buttons, button => {
        button.onclick = () => alert('Nunca pares de aprender!');
      }); 

// nodelist recorrido con for-of

 for (let button of buttons) {
        button.onclick = () => alert('Hola!');
      }```

El 煤ltimo ejemplo me encant贸

鈥淐all - coma鈥 鈥淎pply - array鈥

En esta clase pudimos personalizar el Call de la clase ''Array" de Javascript, que impresionante y bondadoso lenguaje, Algo impensable en otros lenguajes de programaci贸n se pudo realizar en pocas lineas de c贸digo.

Esta clase realmente cambio mi visi贸n del lenguaje. Muchas Gracias

buena regla memortecnica

Me cost贸 tomarle el ritmo al curso al principio pero a medida que avanzamos se me ha vuelto todo muy claro! Excelente clase.

.call()
.apply()
.bind()
Funciones para establecer el this.

Un gran profesor, excelente he aprendido mas en estos nueve videos que en todo un semestre de programaci贸n en la u.

Richard explicas muy bien , he mirado muchos v铆deos de otras plataformas y la verdad que donde mejor estoy aprendiendo es contigo.

mind blowing bro! excelente el ejemplo del final!

Aporte:

  • Call, de coma,
  • Apply de Arrays
  • Bind de Builder functions

Estas funciones permiten asignar directamente el valor de this como argumento.
This se referira siempre a la instancia nueva que crees de cualquier clase, se configura para mejorar el flujo interno de la clase y se extiende a trav茅s de sus metodos.

Es complejo pero this es un referenciador para evitar repetir el argumento con su nombre declarado una y otra vez. Ademas, this hace facil de usar tu clase en otro codigo.

Que clase mas enriquesedora, en especial la parte de NodeList y Arrays y su prototipo.

Mi manera de resolver el bind desde los NodeList, aunque es raro porque segun lo que me aparece en el navegador, buttons no es un NodeList, si no mas bien un HTMLCollection

let buttons = document.getElementsByClassName("call-to-action");

      Array.prototype.forEach.bind(buttons)((item) => {
        item.addEventListener("click", () => alert("Never Stop Learning"));
      });

Hay una manera en la cual podemos atar un objeto a una funci贸n (hacer bind) sin tener que crear una variable nueva.

function greetings() {
  console.log(`Hi, my name is ${this.name}, I live in ${this.country}`);
}

const me = {
  name: "Irving Ju谩rez",
  country: "Mexico"
};

greetings.bind(me)();

Estas explicaciones realmente son avanzadas, por lo general cuando se tienen multiples eventos uso un eventHandler para todos, pero a mi parecer usar un call es mas facil

En esta clase el curso se empieza a hacer mas entendible, estaba asustado por las primeras clases.

Algo muy importante es que no se puede usar las arrow function aqui con estos metodos y tambien con this hay que usar function normales

Despu茅s de esta clase mi vida a cambiado en Javascript en cuanto al this XD

Excelente clase y muy buena explicaci贸n !! 20 puntos

Ahora entiendo porque utilizamos el m茅todo bind en React

El uso de bind es un recurso muy utilizado cuando escribimos componentes en React y queremos tener siempre el scope de nuestra clase principal en alguna funcion. Esto nos evita recurrir al artilugio de asignar el this a una variable:

const self = this;

para el caso de los NodeList tambien podemos hacer esto

const BUTTON = document.getElementsByClassName("call-to-action");
const ARRAY_BIUTTON = [...BUTTON];
BUTTON.forEach(button => button.addEventListener("click", () => { alert("Otra forma de pasar nodelist a un arreglo")  }))

Excelente clase! Creo que al inicio me cost贸 trabajo entender a Richard, pero estoy comprendiendo su metodolog铆a. Excelente profesor 馃槃

Buena menera de explicar los diferentes tipos de m茅todos sobre las funciones

Las funciones call, apply y bind son parte del prototipo Function.
functionName.call(). Ejecuta la funci贸n recibiendo como primer argumento el this y los siguientes son los argumentos que recibe la funci贸n que llam贸 a call. functionName.apply(). Ejecuta la funci贸n recibiendo como primer argumento el this y como segundo un arreglo con los argumentos que recibe la funci贸n que llam贸 a apply. functionName.bind(). Recibe como primer y 煤nico argumento el this. No ejecuta la funci贸n, s贸lo regresa otra funci贸n con el nuevo this integrado.

Nunca hab铆a visto algo como esto 馃く馃く馃く馃く馃く, muy bien explicado.

Tengo un proyecto de React en el que hice algo con el this y el contexto de mi componente, solamente que el contexto lo utilizaba en otra clase para manejar la logica del estado del component, estara correcto que lo dejara asi?

es decir puse algo como esto:

componentDidMount() {
const claseConLogica = new ClaseLogica()
claseConLogica.realizarPeticion(this)
}

Y en mi clase logica tenia lo siguiente

class ClaseLogica {
	realizarPeticion(context) {
		context.setState({
			valor: valorDeAlgunaPeticion
		})
	}
}

Estar谩 correcto utilizar el this de esta forma? y si no, cual seria la forma m谩s optima de hacer lo que realiza esa funci贸n?

Excelente clase.

Estas funciones nos sirven para establecer el valor de this, es decir cambiar el contexto que se va usar cuando la funci贸n sea llamada.

Buen铆sima esta clase, lo deja todo claro.

Realmente estos metodos pueden simplificar muchos entornos, permitiendo un this menos estatico. Excelente clase.

Excelente explicacion! muy buen contenido.

Genial ahora mas claro para que y como se usan Call, Apply y Bind

Otra forma de recorrer un HTMLCollection es convertirlo a un array (utilizando Array.from()) y despu茅s sin problema utilizar forEach

const buttons = Array.from(document.getElementsByClassName("call-to-action"));
buttons.forEach((button) => {
  button.addEventListener("click", () => alert("Nunca pares de aprender"));
});

Call: Permite ejecutar una funci贸n estableciendo el valor de this y se pueden pasar argumentos individualmente.
Apply: Permite ejecutar una funci贸n estableciendo el valor de this y se pueden pasar argumentos como un array.
Bind: Permite guardar una funci贸n en una variable con un argumento this definido.

m茅todos call, apply y bind
Estas nos ayudan a establecer un valor al this, podemos llamar la funcion y agregarle un contexto al this, con el this solo esto no es posibel , ya que el this solo funciona dentro del objeto
Call
Ejcuta la funcion asignada , y se le agrega los parametros de esa funcion

Apply
Es basicamente lo mismo que call, solo que en este podemos pasar los argumentos, dentro de corchetes [].
EJM
listaNumeros.apply(numeros, [2, 3, 4, 5, 鈥);

El call se usa en situaciones difernetes a las de apply
EJM
caminar.call(richard, 400, 鈥榥orte鈥);

Bind
Este nos permite implementar el this con sus argumentos, pero con la diferencia que este lo guardamos, en una variable, la cual es la que vamos a invocar, sin necesidad de pasarle mas argumentos , si queremos agregarle argumentos se los podemos agregar , y esa variable la podemos reutilizar cuantas veces queramos
EJM
const cris= {name: 鈥榗ristian鈥檥;
const crisSaluda = saludar.bind(cris)
crisSaluda();

o

const crisSaluda = saludar.bind(cris)
crisSaluda(鈥榟ola como estas鈥);

Muy buena la explicacion del profesor!! En caso de que alguien quiera un poco mas de material u otros ejemplos he escritos 2 posts en Medium acerca de las funciones call y apply de JS por si quieren echarle un ojo

interesante cuando se pasa el nodelist a Array para poder usar el foreach sobre este.

Excelente profesor como explica de bien.

Establecer el this del llamado a una funci贸n

No es posible asignar directamente el this en ning煤n contexto, para esto existen las funciones bind, call y apply, que nos permitir谩n pasarle un this diferente al contexto de ejecuci贸n de una funci贸n. En este caso, usaremos call y como primer par谩metro el this (contexto que queremos pasar) para hacer el llamado inmediato de una funci贸n (greeting) que originalmente no deber铆a tener el contexto de un objeto ajeno (person):

function greeting() {
  console.log(`Hola, soy ${this.name} ${this.lastName}`)
}

const person = {
  name: 'Uzi',
  lastName: 'Rodriguez'
}
greeting.call(person) // Hola, soy Uzi Rodriguez

Esta funci贸n, tambi茅n pueden aceptar m谩s par谩metros aparte de this:

function walk(metros, direccion) {
  console.log(`${this.name} camina ${metros} hacia el ${direccion}`)
}
walk.call(this, 400, 'norte') // Uzi camina 400 metros hacia el norte

La funci贸n applycumple la misma funci贸n, pero recibe los argumentos de la funci贸n de una manera distinta, los recibe en forma de array:

function walk(metros, direccion) {
  console.log(`${this.name} camina ${metros} hacia el ${direccion}`)
}
const arguments = [400, 'norte']
walk.apply(this, arguments) // Uzi camina 400 metros hacia el norte

La funci贸n bind, por su lado, nos permite crear una funci贸n nueva con otro contexto, pero no la llama:

const anotherPerson = {
  name: 'Jonadab',
  lastName: 'Alcantara'
}
const bindedGreeting = greeting.bind(anotherPerson)
bindedGreeting() // Hola, soy Jonadab Alcantara

Tomando como referencia el ejemplo anterior, si queremos pasar argumentos al llamado de una funci贸n que ya fue creada y atada a otro contexto, mandamos los argumentos:

const bindedWalk = walk.bind(anotherPerson)
bindedWalk(400, 'norte') // Jonadab camina 400 metros hacia el norte

O se pueden almacenar al momento de generar la funci贸n:

const bindedWalk = walk.bind(anotherPerson, 400, 'norte')
bindedWalk() // Jonadab camina 400 metros hacia el norte

O tambi茅n se puede mezclar los 煤ltimos dos ejemplos, estableciendo algunos valores y pasando otros en la ejecuci贸n:

const bindedWalk = walk.bind(anotherPerson, 400)
bindedWalk('norte') // Jonadab camina 400 metros hacia el norte

驴Es mejor practica usar querySelector y querySelectorAll en vez de los otros?

asidhausdgasgduygasd

Con QuerySelectorAll no da error, ya que tira como resultado un array y no nos complicamos la vida con eso, pero igual esta bueno saber algo nuevo 馃槃

Para mi, call, apply y bind, son m茅todos empaquetados para las funciones que permiten la configuraci贸n personalizada de el this, para indicar un contexto de ejecuci贸n deseado.

Array.prototype.forEach.call( 'NodeList seleccionados del dom', funcion) cambia el prototipo del array.foreach y le pone de contexto un NodeList

wow, excelente clase, otra forma de asignar a this los valores, sin que sea necesariamente por una funcion agregada a un prototype o como argumentos que se asignan a this.

Mi resumen de la clase

Usamos tres metodos llamados call, apply y bind.
los dos primeros funcionan similar, el primero llama a la funci贸n con el objeto como argumento refiriendose a this.

funcion.call(objeto),
funcion.call(elemento, 555, "soy otro valor expicito")

el segundo lo hace de manera similar, sin embargo si se quiere agregar algun otro valor es necesario hacerlo por medio de un objeto o de una variable.

funcion.apply(elemento, [555, "soy otro valor explicito"]);

const valores = [555, "soy otro valor expl铆cito"]

funcion.apply(elemento, valores);


Y el tercero requiere de la creaci贸n de una variable que almacene la funci贸n y luego mandar a llamarlo a traves de la variable creada, d贸nde se permite asignar los argumentos dentro de dicha variable o con una t茅cnica llamda currying d贸nde se agregan parcialmente los datos, en la definici贸n de los argumentos dentro de la variable o dentro del llamamiento de la misma.

Para finalizar, el profesor explica c贸mo usar los no-list, que son elementos que se parecen a arreglos pero que no lo son, a trav茅s de su funci贸n lend, d贸nde llamando a la clase

Array.prototype.forEach.Call();

permite usar a forEach c贸mo si fuese un arreglo y poder usarlo.

viendo el curso por segunda vez, todo me queda mas claro

Eres un barbaro Kaufman!!

El ultimo tip del call para el proto de array esta muy PRO

Yo he usado muchas veces el metodo bind en varias situaciones de React, por ejemplo, quieres pasar un metodo que recibe par谩metros a un evento onClick.

Teniendo en cuenta la siguiente funci贸n ->

const myFunction = (metros) => {
	console.log(metros);
}

Ahora sin usar bind y lo que normalmente se puede hacer es lo siguiente. Se crea una funci贸n an贸nima que env铆a los par谩metros. Mas adelante ser谩 ejecutada por el evento onClick.

<button
	onClick={ () => myFunction(400) }
>
	Click me!
</button>

Con bind simplemente se puede hacer de la siguiente manera:

<button
	onClick={ myFunction.bind(null, 400) }
>
	Click me!
</button>

Call -> comma
Apply -> arrray

Buena nemot茅cnica

<html>
<head>
    <title>Closures</title>
</head>

<body>
<a href="/ejercicios/">Go back</a>
<p><em>Abre la consola</em></p>
<u>
    <li>
        <button class="call-to-action">Aprender</button>
    </li>
    <li>
        <button class="call-to-action">Aprender m谩s</button>
    </li>
    <li>
        <button class="call-to-action">隆Nunca pares de aprender!</button>
    </li>
</u><script>
    // Establece this usando call
    function saludar() {
        console.log(`Hola soy ${this.name} ${this.apellido}`)
    }

    const kevin = {
        name: "Kevin",
        apellido: "Figuera"
    }
    saludar.call(kevin);

    function caminar(metros, direccion) {
        console.log(`${this.name} camina ${metros} hacia ${direccion}.`);
    }

    caminar.call(kevin, 500, "Norte");

    // Establece this usando apply

    caminar.apply(kevin, [500, "Sur"]);

    const valores = [500, "Este"];
    caminar.apply(kevin, valores);

    // Establece this usando bind
    const alejandro = {
        name: "Alejandro",
        apellido: "Rodriguez"
    };
    alejandro.saludar = saludar.bind(alejandro);
    alejandro.saludar();

    //alejandro.caminar = caminar.bind(alejandro);
    //alejandro.caminar(800,"Norte");
    //alejandro.caminar = caminar.bind(alejandro,800,"Norte");
    //alejandro.caminar();
    alejandro.caminar = caminar.bind(alejandro, 800);
    alejandro.caminar("Sur");

    //Cuando es util usar uno de estos metodos
    const buttons = document.getElementsByClassName('call-to-action');
    // buttons.forEach(button => {
    //     button.onclick = () => { alert('nunca pares de aprender')};
    // });
    Array.prototype.forEach.call(buttons,button => {
         button.onclick = () => { alert('nunca pares de aprender') };
    });
</script>
</body>
</html>

CODIGO COMENTADO
Espero le ayude a comprender con el c贸digo comentado en cada m茅todo

**Call: **

 function saludar() {
        console.log(`Hola. Soy ${this.name} ${this.apellido}`);
      }

      function caminar(metros, direccion) {
        console.log(`${this.name} camina ${metros} metros hacia el ${direccion}`); 
      }

      const richard = {
        name: 'Richard',
        apellido: 'Kaufman'
      }
      // **** M脡TODO CALL **** //
      console.group('M茅todo Call')
      
      // Invocamos con el m茅todo Call, 
      saludar.call(richard)
      // se pasan argumentos separados por comas
      caminar.call(richard, 500, 'sur')

      console.groupEnd()

Apply

 // **** M脡TODO APPLY **** //
      console.group('M茅todo Apply')

      // Invocamos con el m茅todo Apply, 
      // se pasan un array como argumento
       const  walkArray = [500, 'sur']
       caminar.apply(richard, walkArray)

      console.groupEnd()

Bind

 console.group('M茅todo Bind:')
      // No devuelve resultado en la consola como call y apply
      saludar.bind(richard)

      // En cambio creando una funcion si devuelve resultado 
      const richardSaluda = saludar.bind(richard)
      richardSaluda()

      // Para pasar mas argumentos 
      //const richardCamina = caminar.bind(richard)
      //richardCamina(500, 'noreste')

      // Tecnica curing: pasamos argumentos parcialmente 
      const richardCamina = caminar.bind(richard, 500)
      richardCamina('noreste')


      console.groupEnd()

Tuve que ver 3 veces el video para entender. Pero bien, lo logr茅.