Déjame ahora mostrarte algunas trampas
de la palabra clave this relacionada con funciones regulares
y funciones de flecha.
De esta manera podemos aprender cuándo debemos usar y evitar
cada uno de ellos.
Y para empezar, recuperemos el objeto Jonas.
desde antes,
y también agregaré una propiedad de nombre.
Muy bien, y ahora agreguemos un segundo método aquí,
pero esta vez usando una función de flecha.
Así que haremos un método de saludo muy simple.
Y entonces una función de flecha aquí,
que simplemente inicia sesión en la consola
Oye, y luego el nombre.
Así que vamos a tomar este nombre del objeto.
Así que este nombre de punto,
o al menos, eso es lo que creemos que estamos haciendo.
Así que ahora déjame mostrarte lo que sucede,
como llamo jonas.saludar.
Y tal vez también puedas anticiparlo con base en el conocimiento
que ya tienes fuera de estas palabras clave
cuando se usa en una función de flecha.
Así que vamos a ver cuál es el resultado aquí.
Y obtenemos, Hey indefinido.
Entonces ese no es Hey Jonas, como podríamos haber esperado.
Y la razón es exactamente la que mencioné.
en la última conferencia,
cuál es el hecho de que una función de flecha
no obtiene su propia esta palabra clave,
simplemente usará la palabra clave this de su entorno.
Entonces, en otras palabras, sus padres son esta palabra clave,
y el ámbito principal de este método de saludo
es el alcance global. ¿Bueno?
Solo tenga en cuenta aquí que esto en realidad no es un bloque de código.
Podrías pensar que, como este tipo de bloque aquí,
debería crear su propio alcance, pero no lo hace.
Así que esto no es un bloque de código. Es un objeto literal.
Así que es solo una forma en que literalmente definimos los objetos. ¿Bueno?
Así que todo esto aquí todavía está en el ámbito global.
Y por lo tanto, eso incluye este método de saludo.
Está en el ámbito global,
y por lo tanto, la función de flecha aquí,
que no tiene su propia palabra clave this,
utilizará la palabra clave this del ámbito global.
Y recuerda que ese es el objeto ventana. ¿Bien?
Y entonces este primer nombre de punto también está indefinido.
Y creo que esto es en realidad algo
que no hemos visto antes.
Entonces, cuando intentamos acceder a una propiedad que no existe
en un determinado objeto, no obtenemos un error,
pero simplemente indefinido.
Y eso es lo que está pasando aquí.
Es por eso que nos quedamos indefinidos,
porque este es el objeto ventana,
así como vimos antes, y luego en el objeto ventana,
no hay nombre de pila, por lo que nos quedamos indefinidos. ¿Bueno?
Y, de hecho, este comportamiento puede volverse bastante peligroso,
en caso de que usemos var, para declarar variables.
Porque recuerda de una conferencia anterior,
que las variables declaradas con var, en realidad crean propiedades
en el objeto global.
Así que imaginemos que tenemos esto.
Entonces var primer nombre es igual a Matilda.
Y ahora, mientras ejecutamos la función de saludo,
dirá, Hey Matilda, ¿de acuerdo?
Entonces, ¿por qué es eso?
De nuevo, es porque dentro de esta función aquí,
la esta palabra clave es ventana.
Y, de hecho, déjame imprimir eso aquí en la consola también,
solo para que realmente podamos ver que aquí está sucediendo. Bueno.
De nuevo, ventana es esta palabra clave dentro
de esta función de flecha, aunque esa función de flecha
fue llamado por el objeto Jonas.
Pero esa regla no se aplica aquí,
porque de nuevo, es una función de flecha.
Entonces, si echamos un vistazo a este objeto de ventana ahora,
y aquí, cerca de F, por nombre,
usted ve aquí, que de hecho tiene una propiedad
llamado primer nombre con el valor de Matilda.
Y de nuevo, eso es porque si declaramos variables con var,
que crea este tipo de propiedades en el objeto global.
Y por lo tanto, este primer nombre de punto,
que se traduce como punto de ventana, el primer nombre es entonces Matilda.
Y es por eso que tenemos a Hey Matilda aquí.
Esa es otra razón más para no usar var.
Así que ves que hay una lista bastante larga contra var.
Entonces, a partir de este ejemplo, la gran conclusión
es que como mejor práctica,
nunca debes usar una función de flecha como método.
Y en mi opinión, eso es cierto incluso si ni siquiera estás usando
la palabra clave this en un método particular.
Porque si tienes esta regla de nunca usar una flecha
funcionar como un método, entonces nunca tendrás que pensar en
qué tipo de función debe usar.
Siempre usará una expresión de función normal,
y así evitarás este tipo de errores
de pasar
Así que este error que vimos aquí con Hey Matilda
es fácil de prevenir simplemente no usando var.
Pero incluso entonces, Hey undefined sigue siendo un dólar.
Todavía no es correcto.
Y eso se habría evitado fácilmente.
simplemente usando una función regular. ¿Bien?
Si tuviéramos esto, entonces por supuesto ahora este objeto Jonas,
que está llamando a la función
sería entonces la palabra clave this. ¿Bien?
Así que ves el primer nombre Jonas y luego Hey Jonas.
Porque ahora este método en realidad tiene su propio
esta palabra clave.
Pero volvamos a ponerlo.
Y, está bien. Excelente.
Y ahora, un ejemplo final de una trampa de esta palabra clave
es cuando tenemos una función dentro de un método.
Y eso es algo bastante común que sucede.
Y ahora echemos un vistazo a un ejemplo de eso.
Así que vamos a crear otro objeto Jonas aquí.
O, en realidad, no.
En realidad, solo usemos este objeto aquí
que ya tenemos.
Y mejoremos este método calcAge.
Entonces, lo que quiero aquí es una función.
eso básicamente regresará si la persona es millennial.
Tan fácil,
vamos a crear una función isMillennial aquí.
Y simplemente iniciemos sesión en la consola,
si este punto año es mayor igual a 1981,
y esa es la misma regla que usamos antes,
por lo que el año de nacimiento debe permanecer entre 1981 y 1996.
Por debajo de 1996.
Y luego llamemos también a esa función aquí.
Así se llamará Millennial
como llamamos a la función calcAge.
Así que también hagamos eso.
Así que Jonas dot calcAge
Entonces llamamos a este método aquí, el método calcAge,
que es un método regular, por lo que no es una función de flecha.
Y por lo tanto, la palabra clave esta aquí
debería ser el objeto Jonas.
Pero luego aquí, tenemos una función regular, así que esta,
y aquí estamos entonces llamándolo de nuevo.
Ahora, dentro de esta función, estamos usando la palabra clave this.
Y ahora veamos qué sucede cuando recargamos la página.
Y no podemos leer la propiedad año de indefinido
en la línea 138.
Así que eso es justo aquí.
Entonces, lo que esto significa es que la palabra clave this
debe ser indefinido.
Eso es lo que dice aquí.
Así que registrémoslo también,
y aquí, podemos deshacernos de este ahora, está bien.
Y, de hecho, esta palabra clave aquí no está definida.
Entonces, ¿por qué es eso?
Bueno, si pensamos en esto, entonces esto aquí
es realmente solo una llamada de función regular, ¿no es así?
Es una llamada de función regular,
aunque suceda dentro de un método.
Y la regla dice que dentro de una llamada de función regular,
lo cual claramente es, que esta palabra clave debe ser indefinida.
Y por lo tanto, no está definido aquí.
Así que esto es como si esta función estuviera fuera
de este método.
Entonces, si copiamos esta función aquí,
obtendríamos exactamente el mismo resultado.
Ahora algunas personas consideran que esto es un error en JavaScript
pero en mi opinión, no lo es realmente.
Así es como funciona esta palabra clave.
Es una regla clara que una llamada de función regular
tiene esta palabra clave configurada como indefinida.
Y eso es exactamente lo que está sucediendo aquí.
Ahora hay dos soluciones a este problema.
La primera solución es usar una variable adicional.
que solemos llamar yo.
Así que fuera de la función, digamos self
y luego lo establecemos en esto.
Porque aquí seguimos afuera
de esta función es Millennial.
Y aquí, todavía tenemos acceso a esta palabra clave
puesto a Jonas. ¿Bien?
Entonces aquí, podemos usar simplemente self.
Y hagámoslo justo aquí.
Y aquí voy a duplicar esta línea
para que podamos conservar el original.
Y ahora usemos self aquí.
Y así, a través de la cadena de alcance,
este yo será igual a esto.
Así que aquí se hace referencia a sí mismo,
pero no está, por supuesto, en el alcance.
Y así, JavaScript asciende en la cadena de alcance,
en el ámbito principal, que es calcAge.
Así que aquí es donde se define el yo, y se define así.
Así que en cuanto a esta palabra clave.
Y entonces esta es una manera en la que podemos preservar
la esta palabra clave.
Esto también se puede llamar deuda, para que también puedas ver.
Y mientras recargamos, ahora, esto realmente funciona.
Así que ahora obtenemos el valor de verdadero.
Así que esta era una especie de solución anterior a ES6,
pero aún puede encontrar esta solución
en algunas bases de código más antiguas.
Sin embargo, ahora en ES6 tenemos una versión más moderna.
y mejor solución.
Y esa solución es usar una función de flecha. Está bien.
Así que en realidad copiemos todo esto,
porque quiero conservar ambas versiones aquí.
Y ahora solo comentaré esto primero.
Digamos la solución uno,
pero ahora aquí tenemos la solución dos,
que no necesita esta variable adicional.
Bien, entonces deshagámonos de esto.
traer esto de vuelta y aquí esto de nuevo.
Y ahora, de nuevo, la solución al problema.
que vimos antes es que ahora podemos usar una función de flecha.
Y eso va a funcionar porque la función de flecha
no tiene su propia palabra clave this. ¿Bien?
Así que recordemos de nuevo, que cuando simplemente llamamos a esto,
obtenemos que esta palabra clave no está definida.
Y eso es porque una función regular
obtiene su propia esta palabra clave.
Pero la función de flecha no lo hará,
simplemente utilizará esta palabra clave de su ámbito principal.
Y en este caso, ese será el método calcAge,
y aquí la palabra clave this es Jonas, por lo que el objeto Jonas.
Y por lo tanto aquí en una función de flecha,
esa también sería la palabra clave this.
Y luego va a funcionar como se esperaba,
y de hecho, ahora es verdad.
Y nuevamente, esto funcionó porque esta función de flecha
utiliza la palabra clave this de su ámbito principal.
Y en este caso, en el ámbito principal,
la palabra clave es Jonas.
Entonces, básicamente, una función de flecha hereda esta palabra clave
del ámbito principal.
Y eso es exactamente lo que necesitamos aquí. Está bien.
Y aquí, ves que es bastante importante
saber exactamente cómo cada uno de los diferentes tipos de funciones
trabajar en lo que respecta a la palabra clave this.
Porque entonces realmente puedes usarlos de acuerdo
a sus necesidades específicas.
Excelente. Así que espero que especialmente esta solución aquí
tenía sentido para ti.
Y que cuando lo necesites en algún momento de tu viaje,
o en tu trabajo, puedes recordar que esta es una herramienta muy útil
caso de uso de la función flecha.
Ahora, solo para terminar esta conferencia,
También quiero referirme rápidamente a las palabras clave de los argumentos.
Tal vez me recuerdes hablando de eso,
también en una conferencia anterior.
Entonces, en el video sobre el contexto de ejecución,
y la pila de llamadas,
aprendimos que las funciones también obtienen acceso
a una palabra clave de argumentos.
Entonces, no solo esta palabra clave, sino también una palabra clave de argumentos.
Ahora, al igual que la palabra clave this, la palabra clave arguments
sólo está disponible en las funciones regulares.
Así que vamos a crear otra función aquí.
Así que primero una expresión.
De nuevo, básicamente esas son nuestras funciones para agregar
y en realidad déjame agarrarlos desde aquí.
Creo que los definí en algún lugar aquí arriba.
Sí.
Así que no hay necesidad de reescribir
el mismo código una y otra vez.
Solo agrega un comentario aquí,
palabra clave argumentos.
Y luego déjame también imprimir en la consola, esa palabra clave.
Así que permítanme llamar rápidamente a esta función aquí ahora.
Así que dos y cinco
así que solo para que veamos la palabra clave arguments.
Y así aquí abajo está
y ves que obtenemos básicamente una matriz
con dos y cinco.
Y esos son exactamente los dos parámetros que pasamos.
Y esto puede ser útil cuando necesitamos una función.
para aceptar más parámetros de los que realmente especificamos.
Así que esto es algo que nunca hicimos antes.
Entonces, hasta este punto, solo hemos especificado
exactamente los argumentos que tenemos aquí en la lista
de parámetros
Así que tenemos dos parámetros y dos argumentos.
Pero es completamente legal agregar más argumentos.
No tendrán nombre, así que no los nombramos,
pero existen.
Y podemos verlos aquí en la matriz de argumentos. Está bien.
Así que aparecen aquí, y podemos usarlos
por lo tanto en las funciones.
Por ejemplo, podríamos usar un bucle,
y luego recorrer esta matriz
y sumar todos los números.
Pero ahora mi punto aquí es que la función de flecha
no obtiene esta palabra clave.
Eso también es registrarlo en la consola aquí.
así que pongamos esto aquí entre llaves,
entonces recuerda cuando tenemos más de una línea de código,
necesitamos volver explícitamente.
Entonces, intentemos echar un vistazo a la palabra clave arguments
aquí también.
Entonces agregue la flecha dos, cinco, ocho, digamos,
pero luego obtenemos un error.
Entonces los argumentos no están definidos. Está bien.
Así que esto fue simplemente para mostrarte
que la palabra clave arguments existe,
pero que sólo existe en funciones regulares.
Así que en expresiones de función como esta,
pero también en declaraciones de funciones,
pero no en una función de flecha.
Pero de todos modos, la palabra clave arguments no es tan importante
en JavaScript moderno más,
porque ahora tenemos una forma más moderna
de tratar con múltiples parámetros.
Pero aún así es importante que seas consciente
que existen estas palabras clave de argumentos.
Muy bien, y ahora con todas estas conferencias
en funciones regulares y funciones de flecha,
usted debe saber todas las diferencias entre ellos,
y aún más importante, cuándo usar cada uno de ellos.