Entonces, sepamos, aprendamos sobre el método bind.
Y al igual que el método de llamada,
bind también nos permite configurar manualmente estas palabras clave
para cualquier llamada de función.
Ahora, la diferencia es que se unen
no llama inmediatamente a la función.
En su lugar, devuelve una nueva función.
donde está enlazada esta palabra clave.
Por lo tanto, se establece en cualquier valor que pasemos a bind.
Así que continuemos con nuestro ejemplo de aerolínea
de la conferencia anterior aquí.
Y ahora digamos que necesitamos usar la función de libro
para Eurowings todo el tiempo.
Entonces, recuerda que tenemos este objeto Eurowings
y luego usamos un book.call,
para usar la función de libro
con Eurowings ajustado a esta palabra clave.
Así que eso es lo que hicimos en la última lección.
Así que déjame copiar este código aquí.
Pero ahora, como dije,
podemos usar el método bind para crear una nueva función
con esta palabra clave también establecida en Eurowings, ¿de acuerdo?
Entonces, de nuevo, esto no llamará a la función de libro.
En su lugar, devolverá una nueva función.
donde esta palabra clave siempre se establecerá en Eurowings.
Entonces, vamos a crear una nueva función aquí llamada bookEW,
donde es solo un código de Eurowings.
¿Está bien?
Y ahora vamos a usar esta función.
Entonces bookEW, Steven Williams
y aquí nos falta el número de vuelo.
Entonces 23.
Y como ven, esto ahora se ve
como la llamada de función de libro normal de nuevo.
Y eso es porque esta función aquí
ya tiene esta palabra clave escrita en piedra básicamente.
Y aquí, por supuesto, ya no necesitamos especificar
a estas palabras clave de nuevo.
Así que la firma aquí, así que el nombre de los parámetros
vuelve a ser simplemente el número de vuelo
y el nombre del pasajero, ¿de acuerdo?
Y ahora de nuevo, vemos que Steven reservó un asiento
en el vuelo de Eurowings EW23.
Y así funcionó perfectamente.
Por supuesto, también veamos el objeto de nuevo.
Entonces, con todas las reservas y, de hecho, aquí está Steven Williams.
en el vuelo que acabamos de reservar.
Genial, así que esto es muy, muy útil.
Y ahora, por supuesto, podríamos seguir adelante y hacer lo mismo.
para todas las aerolíneas.
Por lo tanto, crear una función de reserva para cada una de las aerolíneas.
Y esto entonces lo hace un poco más fácil.
para reservar un vuelo para cada una de las aerolíneas,
si tenemos que hacerlo varias veces.
Entonces, en lugar de tener que usar una llamada todo el tiempo,
solo podemos hacer bind una vez.
Entonces, definir la palabra clave del disco una vez así
y de ahí en adelante, siempre podemos usar estas funciones.
.bind y este, suizo, ¿de acuerdo?
Ahora, no voy a usarlos todos aquí ahora
porque ya sabemos cómo funciona eso,
¿está bien?
Entonces esto es genial,
pero en realidad podemos llevar esto aún más lejos.
Entonces, en el método de llamada, podemos pasar múltiples argumentos aquí
además de estas palabras clave, ¿verdad?
Y así, en el método bind, en realidad podemos hacer lo mismo.
Y luego todos estos argumentos
también será básicamente grabado en piedra.
Así se definirán
y la función siempre será llamada
con estos mismos argumentos.
Por ejemplo, podríamos usar bind para crear una función
para una aerolínea específica y un número de vuelo específico.
Así que digamos, bookEW, tal como lo hicimos aquí,
pero luego muy específico, solo para el vuelo 23.
Entonces eso sería book.bind
y luego, por supuesto, tenemos que volver a definir Eurowings,
pero entonces podemos empezar a encontrar la lista de argumentos
o la lista de parámetros
y establecer el primero en 23, ¿de acuerdo?
Entonces, si miramos nuestra función de vinculación ahora,
recuerda que necesita el número de vuelo y el nombre.
Pero ahora en nuestra función bookEW23,
es como si este primer argumento ya estuviera establecido.
Y así, todas las funciones restantes ahora solo necesitan el nombre.
Entonces esta función,
este ahora solo necesita el nombre,
porque el número ya estaba preestablecido aquí
en el método de enlace.
Entonces, veamos.
Entonces, nuestro recién creado libro de funciones EW23,
y ahora reservemos un vuelo para mí.
Y reservemos un vuelo para Martha,
digamos, Cooper.
Y, sí, echemos un vistazo a nuestra producción aquí.
Y estos son los dos.
Y, de hecho, ambos son para el vuelo EW23 de Eurowings,
¿está bien?
Y eso es exactamente lo que esperábamos.
Nuevamente, porque preestablecimos ese 23 aquí mismo.
Si preestablecemos esto aquí
a uno, dos, tres, cuatro, cinco,
luego, por supuesto, estos dos nuevos vuelos aquí
estaría reservado en ese número de vuelo, ¿de acuerdo?
Así que esto nos permite grabar en piedra, ciertos argumentos.
Y entonces esta función, la función resultante,
entonces se vuelve aún más simple.
Así que ahora mismo todo lo que necesitamos para pasar
es el nombre del pasajero, ¿verdad?
Y luego todo lo demás básicamente sucede automáticamente.
Y llevando esto aún más lejos,
incluso podríamos definir, tener el nombre del pasajero aquí
por ejemplo, así.
Y luego esta función siempre reservaría un vuelo para Jonas
en el vuelo 23.
Pero eso probablemente lo llevaría un poco demasiado lejos ahora.
Y borré el 23 aquí,
por supuesto, yo no quería eso.
Así que esto es correcto.
Y por cierto, lo que hicimos aquí,
entonces, básicamente especificando partes del argumento de antemano,
es en realidad un patrón común llamado aplicación parcial.
Así que esencialmente, aplicación parcial
significa que una parte de los argumentos
de la función original ya están aplicadas,
lo que significa, ya establecido.
Y eso es exactamente lo que es la función bookEW23, ¿verdad?
Es esencialmente la función del libro.
pero con 23 ya predefinidos.
Excelente.
Entonces, espero que este sea un buen ejemplo para que lo entiendas.
la llamada a los métodos apply y bind,
pero también hay otras situaciones
en el que podemos usar el método bind
y donde es muy útil.
Y un ejemplo de eso es cuando usamos objetos juntos
con oyentes de eventos.
Así que escribamos eso aquí en realidad,
con oyentes de eventos.
Y ahora este botón aquí
finalmente entrará en juego.
Y tal vez te has estado preguntando sobre eso.
Pero comencemos agregando una nueva propiedad.
solo al objeto de Lufthansa
y lo ponemos a 300.
Lo que significa que esta empresa tiene 300 aviones.
Y luego también agregamos un nuevo método.
solo al objeto de Lufthansa,
que es comprar un avión nuevo.
Entonces funciona,
y ahora lo que queremos hacer es this.planes++.
Básicamente, queremos agregar un nuevo avión,
cada vez que hacemos clic en este botón.
Así que eventualmente eso es lo que querremos hacer.
Y luego registremos this.planes en la consola.
Y probablemente también deberíamos registrar estas palabras clave
a la consola también.
Y ahora vamos a adjuntar nuestro controlador de eventos
a este elemento,
vamos a inspeccionarlo aquí, ¿de acuerdo?
Debería necesitar ir a elementos.
Entonces, este es el botón aquí
y tiene la clase, comprar.
Entonces document.queryselector.buy,
addEventListener para hacer clic.
Y luego el segundo argumento,
como ya sabes, es la función handler.
Entonces addEventListener aquí está la función de orden superior
que recibe una función de devolución de llamada.
Y eso debería ser lufthansa.buyPlane, ¿de acuerdo?
Entonces, esencialmente, esta función aquí
es lo que queremos que suceda,
que nuevamente toma el número actual de aviones
y lo aumenta en uno.
Así que hagamos eso.
Y ahora, mientras hago clic en este botón, veamos qué sucede.
Y no obtenemos un número aquí.
Así que este .Planes ya no es un número.
Y la razón de ello es que esta palabra clave
es este elemento de botón, ¿de acuerdo?
¿Y sabes por qué es eso?
Bueno, en una de las conferencias teóricas,
aprendimos que en una función de controlador de eventos,
que esta palabra clave siempre apunta al elemento
en el que se adjunta ese controlador.
Entonces, esta es la función del controlador, ¿verdad?
Y así se adjunta a este elemento,
así que a este botón.
Y por lo tanto, dentro de la función del controlador
o el detector de eventos, en realidad no importa.
Pero dentro de esta función,
esta palabra clave apuntará al elemento del botón.
Y es por eso que esta palabra clave aquí
devuelve este botón, ¿de acuerdo?
Así que aquí tienes otra prueba
que esta palabra clave realmente se establece dinámicamente.
Porque si simplemente llamamos a Lufthansa.buyPlane aquí,
entonces, por supuesto, esta palabra clave sería Lufthansa,
así que este objeto, ¿verdad?
Porque ese es el objeto que llama a la función.
Pero en este caso es, por supuesto,
esta función de escucha de eventos llamando a esta función.
Y por lo tanto, el propio botón
entonces se convertirá en esta palabra clave, ¿de acuerdo?
Aquí ahora vemos los resultados.
de llamar a esta función aquí.
Y ahora empezamos con 300
y se incrementó tal como queríamos que fuera.
Así que saquemos esto de aquí
y volvamos a hacer clic aquí
para ver el resultado que teníamos antes.
Así que ese es este botón.
Ahora, por supuesto, en esta función de controlador aquí,
todavía necesitamos esta palabra clave para señalar
al propio objeto de Lufthansa, ¿verdad?
De lo contrario, esta lógica aquí no funcionará.
Entonces, lo que esto significa es que necesitamos definir manualmente
a esta palabra clave aquí.
Así que aquí mismo.
Ahora, ¿cómo debemos hacer eso?
¿Deberíamos usar el método call o el método bind?
Bueno, necesitamos pasar una función aquí.
y no llamarlo.
Y entonces ya sabemos que el método de llamada
llama a la función.
Y eso no es lo que necesitamos.
Y por lo tanto, usamos bind.
Porque ya sabemos que se unen
va a devolver una nueva función.
Entonces, esta palabra clave debería ser Lufthansa,
y eso es exactamente lo que definimos, ¿de acuerdo?
Y ahora, al hacer clic aquí, deberíamos ver el objeto Lufthansa
siendo estas palabras clave.
De hecho, y eso es ahora exactamente lo que tenemos aquí.
Así que ese es el resultado de esta línea de código.
Y de nuevo, esto ahora apunta a Lufthansa,
porque eso es lo que le dijimos a JavaScript que hiciera aquí.
Y así de hecho ahora el número de aviones
va aumentando cada vez que hacemos clic en este botón.
Genial, entonces tenemos nuestro problema resuelto.
Y de hecho, haremos esto un par de veces más.
A lo largo del curso.
Así que este es uno importante.
Y en general, el método bind
es algo que realmente necesitas entender, ¿de acuerdo?
Ahora, solo un ejemplo final aquí,
que nuevamente se tratará de una aplicación parcial,
porque este es otro gran caso de uso para el método bind.
Y en este caso de aplicación parcial,
muchas veces ni siquiera nos interesan estas palabras clave,
pero todavía usamos bind para esto, ¿de acuerdo?
Ahora, recuerda que la aplicación parcial
significa que podemos preestablecer parámetros, ¿de acuerdo?
Entonces, comencemos creando una función general.
que añade un impuesto a algún valor.
Entonces, comencemos con la tasa impositiva y luego el valor en sí.
Y escribamos una función de flecha aquí.
Y entonces esto funciona haciendo
valor + valor * la tasa de impuestos, ¿verdad?
Así que imagina que la tasa de impuestos sería del 10%
y el valor 100.
Entonces sumando el impuesto a 100 sería 110.
Bueno, hagamos 200 para que quede un poco más claro.
Y, por supuesto, necesitamos llamar a la función aquí misma,
¿bueno?
Entonces ahora el 10% de 200 es 20,
y entonces los resultados deberían ser 220 y eso no funcionó.
Y sí, eso es porque necesitamos definir esto aquí
como un número decimal aquí, por supuesto.
Entonces solo entonces esta tasa aquí puede tener sentido, ¿de acuerdo?
Entonces 220 ahora.
Esta es la función general para agregar impuestos.
Pero ahora digamos que hay un impuesto
que usamos todo el tiempo.
Entonces, vamos a crear una función para eso.
Entonces, por ejemplo, aquí en Portugal,
el IVA, que es el impuesto al valor agregado, es del 23%.
Y ahora podemos usar la función de vinculación
en esta función y preestablecer la tasa siempre,
para que siempre sea ese 23%.
Y luego tenemos una función.
que solo calcula el IVA
por cualquier valor que le pasemos.
Por lo tanto, addTax.bind
y luego el primer argumento de bind
son palabras clave, ¿recuerdas?
Pero en este caso, no nos importa.
sobre esta palabra clave en absoluto.
Ni siquiera está aquí en la función.
Y entonces, simplemente decimos, nulo.
Podría ser cualquier otro valor
porque nada va a pasar con eso,
pero es una especie de estándar simplemente usar nulo.
Y ahora podemos establecer la tasa aquí.
Así que vamos a preestablecerlo al 23%,
entonces 0.23, ¿de acuerdo?
Y así, esto establece el valor de la tasa aquí en piedra.
Así que esencialmente, esto sería lo mismo
como escribir...
Vamos a pegarlo aquí.
Así que esto debe ser, más el IVA es igual a,
y la tasa está preestablecida en 0,23.
Así que esto es esencialmente lo que nuestra función addVAT
ahora parece, ¿de acuerdo?
Entonces, porque ya hemos grabado 0.23 en piedra.
Entonces, ahora podemos comenzar a usar eso.
Entonces esto debería ser 123 y lo es.
Podemos usar lo que queramos ahora como 23
y así sucesivamente y así sucesivamente.
Así que espero que esto tenga sentido.
Cuando quieras hacerlo tú mismo,
solo tenga en cuenta que el orden de los argumentos entonces
es importante.
Si desea preestablecer la tasa,
entonces tiene que ser el primer argumento en esta función.
De lo contrario, esto realmente no funcionará aquí, ¿de acuerdo?
Ahora podría argumentar que lo que acabamos de hacer aquí
se podría haber hecho fácilmente con los parámetros predeterminados.
Pero esto es en realidad diferente,
porque esto aquí está creando un nuevo,
simplemente, función más específica
basado en una función más general,
que es la función addTax.
Y por supuesto, el ejemplo aquí
podría ser mucho más complejo también, ¿verdad?
Así que esto realmente es diferente
porque usando enlaces,
en realidad, realmente nos da una nueva función.
Entonces, es como si devolviéramos una nueva función específica
de la función sumarImpuestos.
Y en realidad ahora tengo un lindo reto para ti
que es esencialmente reescribir todo este ejemplo aquí,
pero usando la técnica de una función
devolviendo otra función.
Así que tenemos una conferencia sobre eso.
y tal vez puedas regresar y echar un vistazo a eso.
Y luego quiero que esencialmente,
crear una función que pueda devolver una función
que hará exactamente lo que hace este.
Así que eso es probablemente realmente desafiante.
Así que no te castigues si no puedes hacerlo.
Sé que es un desafío,
pero aún puedes intentar tomarte un minuto o dos
y, sí, realmente inténtalo.
Si no puedes hacerlo,
entonces mira la solución en un minuto, ¿de acuerdo?
Simplemente no uses bind, por supuesto,
porque con eso ya tenemos la solución.
Así que usa la técnica que te mostré antes.
con la función de cuadrícula, ¿recuerdas?
Y entonces aquí puedes hacer algo similar.
Entonces, nos vemos en un segundo con la solución.
Está bien.
Espero que hayas probado eso.
Y así es como lo habría hecho.
Entonces, la primera función aquí,
Lo llamaré addTaxRate.
Y podría hacer esto con las funciones de flecha,
pero entonces eso parece realmente confuso.
Así que centrémonos en la funcionalidad aquí.
Así que esta es la primera función que solo recibe la tasa.
Tan similar a lo que hicimos aquí.
Y luego lo que hace es devolver una nueva función.
Y luego esta nueva función
es el que toma el valor.
Y luego regresará como la otra función,
valor + valor * la tasa, ¿de acuerdo?
Y ahora basado en este,
podríamos crear addVAT2.
Y así sería, addTaxRate
y luego llamarlo con 0.23.
Y luego hagamos lo mismo
para ver si los resultados son los mismos.
Entonces, VAT2, y dos, pruébalo y aquí tienes.
Así que los resultados son los mismos.
Y entonces este addVAT2 es la misma función que este.
Para recapitular, creamos esta función,
que luego devuelve este.
Así que el primero es el que necesita la tasa,
porque la tasa también es la que usamos
para definir esta función addVAT aquí, ¿verdad?
Y así la función resultante
es entonces quien toma el valor.
Y es por eso que también tenemos valor aquí en la función interna.
Ahora bien, esta es sólo otra forma de hacer lo mismo
y esto ya es algo bastante avanzado en realidad.
Entonces, absolutamente no te enojes
si no lo hiciste solo.
Pero en fin, en el siguiente video.
tenemos el desafío de codificación número uno
de esta sección que viene.
Así que espero verte allí muy pronto.