Creo que lo entendí a la primera. "this" hace referencia al scope donde se encuentra, las funciones anónimas crean scopes pero las arrow-functions no y éstas últimas se brincan al scope superior para buscar la propiedad. Maestrazo!!!
Y si esto es así, por qué en el último caso de la función constructora Persona, la arrow function no brinca al scope superior , se queda dentro del scope de Persona y muestra Jon. O sea en obj3 vemos que la arrow brinca al scope superior, salta del scope de obj3, de acuerdo, hereda el contexto donde fue definido el objeto padre de la arrow y muestra "contexto global"...pero en Persona se queda dentro del scope de Persona y muestra "Jon" no sube al contexto global, por qué en un caso actúa de una forma y en otro de otra? Alguien puede ayudarme con está duda? Gracias.
@@hellg1307 Llevo unas buen rato intentando entender correctamente como se comportan las arrow con los objetos y el contexto, al final me parece que lo ideal es simplemente seguir las limitaciones que se indican en la documentación de MDN: No tiene sus propios enlaces a this o super y no se debe usar como métodos. No tiene argumentos o palabras clave new.target. No apta para los métodos call, apply y bind, que generalmente se basan en establecer un ámbito o alcance No se puede utilizar como constructor. No se puede utilizar yield dentro de su cuerpo. Sin embargo intentando resolver lo que preguntas, uno puede especular que al utilizar la arrow function en el objeto literal obj3 ya que el objeto se esta "creando al hilo" la arrow function no es capaz de identificar correctamente el scope y se salta al window. Para el último caso, me parece que primero hay que decir que en este video Jon erró el ejemplo y me parece inadecuado lo que hace. Aquí si tenemos suerte @jonmircha nos aclarará. Si te das cuenta hace un return de una función dentro de una función constructora, algo que desde mis conocimientos limitados me parece inadecuado. Ya que según vimos en la clase de prototipos en realidad las funciones constructoras no tienen un return, mas bien con el operador new obtienen las características definidas por el prototipo. Al agregar el return a mi parecer el operador deja de funcionar correctamente, o al menos de forma predecible. Si te das cuenta al final, a pesar de ser asignados los objetos a través del operador new, éstos *no son asignados a un objeto si no a una función*, con lo que cuando usamos una función normal estamos volviendo al primer ejemplo de la función imprimir, es decir: jon = function () { console.log(this.nombre)} Cuando en vez de usar una función normal, pasa a usar una arrow function la cosa se complica bastante, ya que parece respetar el contexto del objeto, pero en realidad se pierde la referencia al mismo y al final solo se mantiene la función, es decir: jon = () => { console.log(this.nombre)} // pero con un this.nombre de un scope propio que quedó en el limbo Incluso si intentas acceder a jon.nombre verás que te sale undefined. Si hay casos en donde las arrow function tienen una ventaja respecto a las funciones normales en la recuperación del contexto, según la documentación y mis experimentaciones, es es en particular cuando utilizas callbacks y funciones anidadas, en esos casos las arrow function detectan correctamente el ámbito. Esto en funciones que se ejecutan dentro de la creación de un objeto (Remarco, funciones que se ejecutan al tiempo de creación, en realidad no son métodos de la función, para métodos mejor no usar arrow functions ) Te dejo las pruebas que hice para ver si te aclara esa parte gist.github.com/Zenkly/e704dcdcb15801f3ad5fdd4617bd3d70 Saludos.
@@Nufilnebur Hola Ernesto, muchas gracias por la ayuda! Creo que ya resolví la duda que tenía. En los objetos las funciones están guardadas en la variable imprimir, y esa variable o nombre del método está definido al mismo nivel que la propiedad nombre del objeto, mientras que en la función Persona el return function(){console.log() } sé ejecuta dentro del nivel de Persona por debajo del this.nombre no al mismo nivel, para ponerlo al mismo nivel habría que haberla guardado en un this.imprimir después del this.nombre. Entonces: EN EL EJEMPLO DE LOS OBJETOS: 1) si obj.imprimir es una función normal, al ser ejecutada (al mismo nivel de obj.nombre) crea y comparte scope con la propiedad nombre. 2) si obj.imprimir es una arrow, al no crear scope para compartir con nombre, SUBE AL SIGUIENTE SCOPE, en este caso global. EN EL EJEMPLO DE LA FUNCION: 1) Return function() { console.log(this.nombre) } esa función se ejecuta por debajo del nivel del this.nombre de Persona, no al mismo nivel, como pasaba en los objetos, al ser una función normal genera su scope dentro del scope de Persona pero por debajo del scope donde esta el this.nombre de Persona, es decir, no comparte contexto como en los objetos (donde generaba el scope a la altura del this.nombre del objeto), y al no encontrar ese this.nombre en su contexto, sale al global. 2) Cuando lo convertimos en una arrow, de la misma manera es ejecutado por debajo del nivel del this de Persona, pero en este caso no genera un scope y s SUBE AL SIGUIENTE SCOPE, que es el de Persona, y ahí sí encuentra un this.nombre definido. No se si me equivoco en la forma de entendenderlo, pero al menos si me encaja con el resultado de los ejemplos que del vídeo. Un saludo.
Fue iluminadora esta clase. En una parte del código de mi proyecto quería capturar la URL de un input para poner la imagen previa al cargar una foto con "window.URL.createObjectURL(files[0])" y me lo tomaba dentro de un forEach, pero no dentro de una función. Me volvi loco, era un tema de scope
Los ejemplos muy buenos ,para hacer mi aporte , es importante conocer la fase de o contexto de creacion y la fase de ejecucion , tambien existe el entorno lexico . Realmente hay que entender bien esos conceptos para entender bien this , me gustarian unos ejemplos con esos conceptos por parte de jon , saludos a los que aun ven estos videos que son la biblia , y gracias a jon por tanto.
A mitad de este video cuando pensé que estaba entendiendo me volví a confundir más. Pero seguiré tu consejo: ver el video n veces. Me exploto la cabecita
¡Ya casi entro al dom, me llevo su tiempo el curso cada video lo miraba detenidamente para comprenderlo, hace poco encontré su vlog con todo el contenido, me pareció genial porque uno se olvida, y solamente se va al link y lo usa como documento para recordar las practicas enseñanzas! Muy bueno el curso bien especifico.
Vine del curso de React para resfrescar un poco esto. No aprendi JS contigo pero tu curso es muy bueno. Esta es la mejor manera de explicar el this que he visto. Muchas gracias
Excelente curso, y ni hablar del profesor. Lo empecé la semana pasada y me voy dando cuenta lo atrasado que estaba en este lenguaje. Felicitaciones! Y a seguir recomendando este curso a quien lo necesite!
Viendo este video denuevo despues meses, antes no entendía mucho el this, los closure, los ambitos, pero ahora me lo veo para explicarle a un amigo que le cuesta el this ya que pude entenderlo gracias a tí :)
Excelente gracias! excelente clase Lo que entendi: this dentro de una funcion hace referencia al objeto window this dentro de un objeto hace referencia al objeto mismo. this dentro de una clase o funcion constructora hace referencia al objeto instanciado. this dentro de una arrow function toma el contexto del padre del objeto donde se ha creado la arrow function. Si no hay padre, entonces "this" es el objeto windows... que es el padre de todo.
Si entendí bien (sumado a lo que pude investigar), cuando una función anónima se encuentra dentro de un objeto literal, la instrucción "this" hace referencia al objeto, pero la razón no es porque la función se encuentra dentro del contexto del objeto, pues el objeto literal no genera contexto, y además la función anónima tampoco detecta el contexto en el que se encuentra. La asociación entre la función y el objeto se establece a la hora de invocar la función, es decir, cuando se ejecuta el código "instanciaDeObjeto.función()" En el caso de la arrow function (que sí detecta el contexto en el que se encuentra) cuando está dentro de un objeto literal lo ignora, pues recordemos que éste no genera contexto. Pero ocurre lo opuesto con la función constructor, que al generar su propio contexto, la arrow function toma el contexto creado por aquella. Con la función anónima no ocurre lo mismo ya que no es capaz de detectar el contexto de la función constructor y tampoco se puede establecer dicha asociación usando "instanciaDeObjeto.función()" que en teoría solucionaría el problema (Lo intenté pero ignoró el código de la función). Gracias por compartir tan amablemente tus conocimientos! Saludos!
@@elchente859 En programación orientada a objetos se supone que todo es considerado un tipo de objeto, pero cundo se habla de objetos literales es para referirse a los arreglos que declaramos entre llaves {} y están compuestos por una clave o atributo seguido de dos puntos y un tipo de valor (no confundir con los arrays).
He visto videos en español e inglés y por fin he logrado entender al pié de la letra el objeto this, muchas gracias por este curso, ya solo queda practicar para que no se olvide
Me pude hacer una pequeña explicacion si lo paso a temas de niveles: La funcion anonima utiliza en priori las propiedades (nombre) que estan en su mismo nivel de contexto/bloque y en caso de no existir, ahi utiliza la del contexto global. Mientras que las arrows function´s van directamente a las propiedades que estan a un nivel superior de ellas en contexto/bloque. Es por eso que cuando utilizamos una funcion dentro de un objeto con el fin de re utilizar alguna de las propiedades que posee el objeto, es mejor utilizar la funcion anonima (ya que estan dentro del mismo nivel de bloque/contexto). Me descolocó un poco cerca del min 17 cuando utiliza la arrows function pero me puedo imaginar que es debido a que cuando retorna una funcion anonima, se genera un nuevo contexto y al no encontrar nada opta por ir al contexto global mientras que cuando retorna una arrow function´s si utiliza el "this.nombre = nombre" debido a que esta en un nivel de contexto superior a dicha funcion retornada... Un trabalenguas sin dudas jajaja, me empezo a hacer corto circuitos las neuronas profe. Mañana lo vere de nuevo
Muchas gracias por el video y tu dedicacion, lo entendi sin tener que volver a ver el video gracias a vos, sino me falla la memoria le di like a cada uno de tus videos, y eso que yo nunca dejo likes, pero este contenido vale la pena valorarlo y apoyarlo aunque sea con un like o comentado y compartiendolo. Aunque no sea suficiente para todo lo que entregas vos
Puaff, esta clase estuvo impresionante, me pareció un tema complejo y tardé unas buenas horas para finalizar el vídeo, tomar mis apuntes y quedar con una idea clara de lo que es this, pero definitivamente aprendí mucho con este vídeo, muchísimas gracias por este contenido tan impecable profesor Jon.
Jajaja esta concepto parece un día lluvioso con mero sol jajaja Jon, eres el mejor, mil gracias por usar la plastilina para que los conceptos nos queden más claros!!! Bendiciones 🧙♂️🧙♂️🧙♂️
Tal y como lo entendí yo (viendo cómo se comporta la arrow-function en el ejemplo de devolverla como un closure) el this en una arrow-function apunta un escalón por encima al contexto en el que se encuentra de forma natural, como está un nivel por debajo de la función Persona coge de esta el contexto que es ahí donde está el nombre. La arrow-function en el objeto está al mismo nivel que este y se va un escalón por encima y por eso apunta al objeto global... La función anónima si no encuentra en su contexto la propiedad a la que apuntamos salta directamente al objeto global sin mirar niveles por encima a ella. Esa es la sensación que me dio
ahora si estoy sufriendo con la teoria con lo nuevo de js. Voy a tener que ver una vez mas todo los videos pero espero que me quede mas claro asi que a darle :D
Yo creo que secir que no escaba del ambito-dominio-carga del objeto por eso que se vuelve parte del objeto que lo invoca. estubo genial. me sorprendi los de arrow function.
Duda: cuando usa función tipo arrow dentro de un objeto, la impresión del mensaje se realiza con el valor de la variable que haya en el scope global. No toma el valor de la variable que hay dentro del objeto porque se imprime utilizando función arrow (usa el mismo scope donde fue definido el objeto). Si se usa la función tipo arrow dentro de una función constructora, no utiliza el mismo scope donde fue definida la función constructora, utiliza el scope de la función constructora. Aquí no lo entendí. Si está la función arrow dentro del objeto se salta el scope del objeto, pero si es función constructora la función arrow no se salta el scope de la función constructora. p q?
Buen día, gracias Jon. Entiendo entonces que hay un scope global que es el padre de todos los demás scope. Existirán múltiples scope de objeto, funciones y entre ellos no se construirá ninguna jerarquía de scope (unos conteniendo a otros). Todos los scope están arropados por su scope superior que es el global. Por favor me corrigen si estoy equivocado.
Creo que después de verlo por tercera vez, he comprendido a que se refiere cuando dices que el contexto de las arrowFunction es el contexto donde se ha creado, casi no lo comprendo =), pero por fin lo entendí. Otro capitulo que puedo chulear y a seguir
Jon !! 3° vez que veo el vídeo y al fin entendí todo perfecto !!!! Gracias por tu GRAN labor !!! He hecho de tus videos un vicio, desgraciadamente como padre y sostén de familia no cuento con todo el tiempo que quisiera, (quisiera tener todo el dia), pero todos los días le dedico al menos 1 hr seguro y voy avanzando.
este this es complicado, con los objetos literales se comporta de una manera, pero con los objetos instanciados de una clase de otra forma con respecto a las arrow function
Que temazo tan picante xd, cada video es una hora o mas para entenderle, espero que mi aporte ayude a entender el tema: "this" en JavaScript se refiere al objeto actualmente en uso. Puede variar dependiendo del contexto en el que se utilice. En una función global, "this" se refiere al objeto global, que en el caso de un navegador es "window". Dentro de una función de un objeto, "this" se refiere al objeto del que la función es un método. También puede ser modificado explícitamente utilizando "call", "apply" o "bind". Las funciones de flecha no tienen su propio contexto de "this". En su lugar, toman el contexto de "this" del entorno en el que fueron creadas. Esto puede causar problemas si una función flecha se utiliza dentro de un objeto y se intenta acceder al objeto a través de "this", ya que "this" se refiere al objeto global o al objeto que contiene la función, en lugar del objeto específico dentro del cual se está utilizando la función. Por ejemplo, si una función flecha se utiliza como un controlador de eventos en un botón, "this" dentro de la función flecha se refiere al objeto global en lugar del botón que desencadenó el evento. Para solucionar esto, se puede utilizar el método bind() para vincular el contexto de "this" deseado a la función flecha.
Jon tengo que resolver esta duda y no sé cómo hacerlo: Cuando el método X de un objeto O es pasado como argumento a una función Y, que pasa si X contiene una referencia a 'this' y se ejecuta por fuera de la función Y? proveer ejemplos.
entonces yo al declarar una funcion anonima dentro de un objeto, estoy generando el contexto del objeto por lo que el this ya hace referencia al contexto de este ultimo ? osea me refiero a : // como la funcion ha generado su scope, osea el scope del objeto, al usar this dentro de la funcion // ya se refiere al contexto dentro del objeto
Profe no entiendo porque la arrow function dentro de la funcion constructora respeta el scope de esta y cuando lo ponemos dentro de un objeto no. Me explico, Entiendo que un arrow function no genera scope y hereda el entorno donde fue creado el objeto(global en este caso), entonces, porque no hereda el entorno de la función constructora? no es global acaso?
En los objetos literales no se crea un contexto, hereda en el que esta por ello la arrow tampoco y es por ello que si quieres usar el this dentro de un método de un objeto usas una function por que la function crea un contexto this y en este caso es el objeto en el que esta :P se qué al principio es difícil de entender, pero con la práctica y experiencia lo entenderás ;) ánimo y no desistas
Hola Amigo. Muy bueno tu curso, en el video anterior recomendaste un libro Eloquent Javascript y dices que es tu preferido, me podrás recomendar un libro pero para PHP7. Gracias
Antes que nada, estoy fascinada con los cursos!! Pero en este me topé con un error, estoy haciendo el codigo al pie de la letra y cuando coloco console.log(this); me lo retorna como undefined.. y si coloco console.log(this === window) lo retorna como false, porque? No puedo avanzar de ahi porque me sale error en todo. Gracias!
Justamente tenía duda cuando se vi la palabra this en la azúcar sintáctica de JavaScript, fue algo que en POO me dejaba como que WHAT? en este video fue de lo entendí no a la primera pero si esta algo confuso, pero entendible! Muchas gracias!!!
Estaba trabajando con un archivo index.html que utiliza un index.js, al utilizar el console.log con this, se imprimía undefined. Después revisé el html, y el script que llamaba a index.js tenía la propiedad type="module". Se la quité, y this se empezó a comportar como en el video. ¿Por qué será? 🤔
jon no se si habra cambiado pero yo ejecute mi codigo de esta forma function Persona(nombre) { this.nombre = nombre; return function () { console.log(this.nombre); }; } let jhojan = Persona("Jhojan"); jhojan(); y en consola si imprimia Jhojan, cuando se supone que imprime el contexto global no?
Hola, Profesor. Estuve viendo el video y fue extremadamente confuso, pero me confundí mucho cuando llegamos a la función constructora. Ese return fue bastante confuso, además, las funciones en los constructores deben definirse con this. o Persona. antecediendo el nombre. Al logguear la variable jon en la consola, se me especificó que jon era una función y no un objeto instancia de Persona
No me queda del todo claro que es lo que sucede con lo que retorna la funcion constructora Persona. La función que Persona retorna crea un scope propio, dentro de esta ; no encuentra una propiedad nombre y la sale a buscar, pero cuando sale a buscarla no se encuentra antes que nada con el bloque que tiene la propia funcion Persona? Porque se lo salta?
Hola Jon, en la parte de function Persona(nombre){ const that = this; this.nombre = nombre; return () => console.log(this.nombre); } "this" en la arrow function, hace referencia al objeto vacío que se crea al instancia la función verdad? Sería como hacer { nombre, getNombre(){ console.log(this.nombre) } } verdad? No sé si me doy a entender, pero esa parte me confundió. Espero puedas responderme tú o alguien más, gracias!
Hola Jon, una duda. Es mi impresión o en tu último ejemplo es incorrecto que hagas un return de una función en una función constructora. Si notas al final, el supuesto objeto "jon" queda en realidad asignado a una función y se pierde la propiedad del nombre. Saludos
@@jonmircha En el 15:50 cuando en el return envías una función con un console.log dentro. A diferencia de cuando solo retornabas el console.log dónde la función constructora tenía sentido, ya que mediante la sentencia new Person devolvía un objeto con el atributo nombre; en el caso de devolver una función ya la función constructora no tiene sentido como tal y daría lo mismo hacer simplemente "jon = Persona()" sin el operador New, además el atributo "nombre" queda inaccesible, salvó por la ejecución de jon(), incluso si tuviese métodos también quedarían inaccesibles ya que en realidad jon pasa a ser una simple función que tiene un valor this.nombre viviendo en el limbo. Corrígeme pero según lo percibo no deberíamos incluir returns en funciones constructoras para que efectivamente nuestros objetos sean asignados de forma correcta. Saludos y gracias muchas gracias por los cursos.
@@jonmircha aun no entiendo por que me aparece como undefined, pero lo puse en un js nuevo y funciono. por fin entendi bien el this, excelente curso :)
No entendí: si declaro una función anónima, tengo entendido que al ser una función normal, el scope lo toma como si perteneciera al objeto global, pero, una arrow function, se supone que está dentro del contexto de objeto, ¿no debería tomar el scope donde pertenece el objeto en sí?, quedé dubitativo ante eso. Ojalá alguien pudiera a ayudarme a aclarar esto último. Gracias.
tu duda es confusa, primero ubicate que estamos hablando de funciones dentro de objetos literales, las funciones normales al usar this hacen referencia al objeto al que pertenecen en cambio las arrow functions hacen referencia al inmediato superior al objeto donde se encuentran. yo tengo mucho para seguir aclarandolo al tema.
@@matiasromera330 me quedo una duda viendo el video, entiendo que el this en las las arrow functions hacen referencia al inmediato superior al objeto donde se encuentran pero en el ejercicio la explicación del obj3 el this se fue a la referencia del padre que seria Const obj3 osea global, todo hasta ahi bien. Pero cuando explica el ultimo ejercicio y usa de nuevo arrow functions, pense que su padre referencia otra vez seria global, y resulta que este si toma el nombre escrito dentro de la funcion...me ayudas con lo que no estoy entendiendo?.
@@emmanuelpina1888 el tema de los closures es complicado, cuando usás una arrow function en un closure estás accediendo al entorno de ejecución de la principal, pero cuando usás una function anónima y ésta no cuenta con la propiedad nombre, directamente pasa al scope global @jonmircha corregime si estoy mal o incompleto
el imprimir en el objeto no me permite amigo , me sale esto prueba.html:25 Uncaught SyntaxError: Unexpected identifier no permite q tenga el mismo nombre de funcion del global y en el objeto al parecer
Lo que no termino de entender es por qué la arrow function no se salta el scope de Persona y se va a su padre que sería window (19:17) al igual que pasaba con el método imprimir del obj3... Es lo que no termino de entender del todo.
Si colocas la arrow function antes del return lo interpreta como scope global, ya ahora que se encuentra después del return toma en cuenta el scope donde se encuentra contenido ese return, al menos así lo entendí yo
Jon? Las arrow function has explicado que se saltan el contexto en donde estan (clase 21) , pregunta por eso un this dentro de una arrow function , mira el contexto global? y por ultimo gracias por el curso.
Entonces... esto no es una clase de la palabra reservada "This" sino es una clase de hambito de funciones, entender cuando aplica una arr funtion y una declarada...etc..
Creo que lo entendí a la primera. "this" hace referencia al scope donde se encuentra, las funciones anónimas crean scopes pero las arrow-functions no y éstas últimas se brincan al scope superior para buscar la propiedad.
Maestrazo!!!
😉👌
Y si esto es así, por qué en el último caso de la función constructora Persona, la arrow function no brinca al scope superior , se queda dentro del scope de Persona y muestra Jon.
O sea en obj3 vemos que la arrow brinca al scope superior, salta del scope de obj3, de acuerdo, hereda el contexto donde fue definido el objeto padre de la arrow y muestra "contexto global"...pero en Persona se queda dentro del scope de Persona y muestra "Jon" no sube al contexto global, por qué en un caso actúa de una forma y en otro de otra? Alguien puede ayudarme con está duda? Gracias.
@@hellg1307 Llevo unas buen rato intentando entender correctamente como se comportan las arrow con los objetos y el contexto, al final me parece que lo ideal es simplemente seguir las limitaciones que se indican en la documentación de MDN:
No tiene sus propios enlaces a this o super y no se debe usar como métodos.
No tiene argumentos o palabras clave new.target.
No apta para los métodos call, apply y bind, que generalmente se basan en establecer un ámbito o alcance
No se puede utilizar como constructor.
No se puede utilizar yield dentro de su cuerpo.
Sin embargo intentando resolver lo que preguntas, uno puede especular que al utilizar la arrow function en el objeto literal obj3 ya que el objeto se esta "creando al hilo" la arrow function no es capaz de identificar correctamente el scope y se salta al window.
Para el último caso, me parece que primero hay que decir que en este video Jon erró el ejemplo y me parece inadecuado lo que hace. Aquí si tenemos suerte @jonmircha nos aclarará. Si te das cuenta hace un return de una función dentro de una función constructora, algo que desde mis conocimientos limitados me parece inadecuado. Ya que según vimos en la clase de prototipos en realidad las funciones constructoras no tienen un return, mas bien con el operador new obtienen las características definidas por el prototipo. Al agregar el return a mi parecer el operador deja de funcionar correctamente, o al menos de forma predecible. Si te das cuenta al final, a pesar de ser asignados los objetos a través del operador new, éstos *no son asignados a un objeto si no a una función*, con lo que cuando usamos una función normal estamos volviendo al primer ejemplo de la función imprimir, es decir:
jon = function () { console.log(this.nombre)}
Cuando en vez de usar una función normal, pasa a usar una arrow function la cosa se complica bastante, ya que parece respetar el contexto del objeto, pero en realidad se pierde la referencia al mismo y al final solo se mantiene la función, es decir:
jon = () => { console.log(this.nombre)} // pero con un this.nombre de un scope propio que quedó en el limbo
Incluso si intentas acceder a jon.nombre verás que te sale undefined.
Si hay casos en donde las arrow function tienen una ventaja respecto a las funciones normales en la recuperación del contexto, según la documentación y mis experimentaciones, es es en particular cuando utilizas callbacks y funciones anidadas, en esos casos las arrow function detectan correctamente el ámbito. Esto en funciones que se ejecutan dentro de la creación de un objeto (Remarco, funciones que se ejecutan al tiempo de creación, en realidad no son métodos de la función, para métodos mejor no usar arrow functions )
Te dejo las pruebas que hice para ver si te aclara esa parte gist.github.com/Zenkly/e704dcdcb15801f3ad5fdd4617bd3d70
Saludos.
@@Nufilnebur Hola Ernesto, muchas gracias por la ayuda! Creo que ya resolví la duda que tenía. En los objetos las funciones están guardadas en la variable imprimir, y esa variable o nombre del método está definido al mismo nivel que la propiedad nombre del objeto, mientras que en la función Persona el return function(){console.log() } sé ejecuta dentro del nivel de Persona por debajo del this.nombre no al mismo nivel, para ponerlo al mismo nivel habría que haberla guardado en un this.imprimir después del this.nombre.
Entonces:
EN EL EJEMPLO DE LOS OBJETOS:
1) si obj.imprimir es una función normal, al ser ejecutada (al mismo nivel de obj.nombre) crea y comparte scope con la propiedad nombre.
2) si obj.imprimir es una arrow, al no crear scope para compartir con nombre, SUBE AL SIGUIENTE SCOPE, en este caso global.
EN EL EJEMPLO DE LA FUNCION:
1) Return function() { console.log(this.nombre) } esa función se ejecuta por debajo del nivel del this.nombre de Persona, no al mismo nivel, como pasaba en los objetos, al ser una función normal genera su scope dentro del scope de Persona pero por debajo del scope donde esta el this.nombre de Persona, es decir, no comparte contexto como en los objetos (donde generaba el scope a la altura del this.nombre del objeto), y al no encontrar ese this.nombre en su contexto, sale al global.
2) Cuando lo convertimos en una arrow, de la misma manera es ejecutado por debajo del nivel del this de Persona, pero en este caso no genera un scope y s
SUBE AL SIGUIENTE SCOPE, que es el de Persona, y ahí sí encuentra un this.nombre definido.
No se si me equivoco en la forma de entendenderlo, pero al menos si me encaja con el resultado de los ejemplos que del vídeo.
Un saludo.
Gracias por el comentario Pepe, segunda vez que veo el video y sumado a este comentario ya me quedo un poco más claro
gracias por aportar conocimiento ......amigos latinos apoyemos al maestro este canal debe tener almenos 500k suscriptores
👋🏻😉
aprender javascript no es un paseo por el parque.. pero estoy enamorado de este nuevo lenguaje... gracias jon..
😉👋🏻
Fue iluminadora esta clase. En una parte del código de mi proyecto quería capturar la URL de un input para poner la imagen previa al cargar una foto con "window.URL.createObjectURL(files[0])" y me lo tomaba dentro de un forEach, pero no dentro de una función. Me volvi loco, era un tema de scope
😉👍🏻
sept 11 1969**Oct 9 2023
gracias excelente curso
felicidades John Mircha
👋🏻😉
sólo tengo 18 años y no tengo trabajo, pero prometo que cuando tenga dinero haré reconocer tu excelente trabajo con estos cursos Jon, gracias.
🙌🏻😉
Has nacido para enseñar !!!! Eres mi profe favorito!!
Muchas gracias! Eso me dicen 😅 y lo disfruto mucho
Es todo un enredo, pero si me quedo todo claro. Muchas gracias
Excelente :)
Los ejemplos muy buenos ,para hacer mi aporte , es importante conocer la fase de o contexto de creacion y la fase de ejecucion , tambien existe el entorno lexico .
Realmente hay que entender bien esos conceptos para entender bien this , me gustarian unos ejemplos con esos conceptos por parte de jon , saludos a los que aun ven estos videos que son la biblia , y gracias a jon por tanto.
👋🏻😉
muchas gracias profesor mircha gracias a usted entendí a la perfección "this"
👋🏻😉
cada vez mas dificil jejej, pero comprendi que es todo por el scope , a volver a ver el video jeje
A mitad de este video cuando pensé que estaba entendiendo me volví a confundir más. Pero seguiré tu consejo: ver el video n veces. Me exploto la cabecita
😉👍🏻
Sos la ley Jonathan Mircha, teoría y práctica el mejor curso
👋🏻😉
¡Ya casi entro al dom, me llevo su tiempo el curso cada video lo miraba detenidamente para comprenderlo, hace poco encontré su vlog con todo el contenido, me pareció genial porque uno se olvida, y solamente se va al link y lo usa como documento para recordar las practicas enseñanzas! Muy bueno el curso bien especifico.
😉👌🏻
Vine del curso de React para resfrescar un poco esto. No aprendi JS contigo pero tu curso es muy bueno. Esta es la mejor manera de explicar el this que he visto. Muchas gracias
👋🏻😉
bonito video, gracias Jon
Gracias por ver
Qué excelente clase!! La verdad que es muy interesante este tema
Muchas gracias!👋🏻😉
uno de los temas que mas le cuesta a uno entender y fue explicado de manera sublime, se entiende perfectamente. Excelente clase y curso
👋🏻😉
Excelente curso, y ni hablar del profesor. Lo empecé la semana pasada y me voy dando cuenta lo atrasado que estaba en este lenguaje. Felicitaciones! Y a seguir recomendando este curso a quien lo necesite!
👋🏻😉
Viendo este video denuevo despues meses, antes no entendía mucho el this, los closure, los ambitos, pero ahora me lo veo para explicarle a un amigo que le cuesta el this ya que pude entenderlo gracias a tí :)
😱😉👍🏻
Interesante tema profe, para verlo otra vez.
🤓👍🏻
Excelente gracias! excelente clase
Lo que entendi:
this dentro de una funcion hace referencia al objeto window
this dentro de un objeto hace referencia al objeto mismo.
this dentro de una clase o funcion constructora hace referencia al objeto instanciado.
this dentro de una arrow function toma el contexto del padre del objeto donde se ha creado la arrow function. Si no hay padre, entonces "this" es el objeto windows... que es el padre de todo.
👋🏻😉
impresionante!, la mejor explicación!
😉👋🏻
excelente explicacion jon, sos de lo mejor en yt
Gracias! 😊
otro muy buena clase gracias maestro 🤠🤠🤠🤠
Con mucho gusto
Al fin comprendo el uso del That dentro de una function constructora, gracias profe Jon.
DE nada ;)
Si entendí bien (sumado a lo que pude investigar), cuando una función anónima se encuentra dentro de un objeto literal, la instrucción "this" hace referencia al objeto, pero la razón no es porque la función se encuentra dentro del contexto del objeto, pues el objeto literal no genera contexto, y además la función anónima tampoco detecta el contexto en el que se encuentra. La asociación entre la función y el objeto se establece a la hora de invocar la función, es decir, cuando se ejecuta el código "instanciaDeObjeto.función()"
En el caso de la arrow function (que sí detecta el contexto en el que se encuentra) cuando está dentro de un objeto literal lo ignora, pues recordemos que éste no genera contexto. Pero ocurre lo opuesto con la función constructor, que al generar su propio contexto, la arrow function toma el contexto creado por aquella. Con la función anónima no ocurre lo mismo ya que no es capaz de detectar el contexto de la función constructor y tampoco se puede establecer dicha asociación usando "instanciaDeObjeto.función()" que en teoría solucionaría el problema (Lo intenté pero ignoró el código de la función).
Gracias por compartir tan amablemente tus conocimientos! Saludos!
😉👍🏻
a que le decimos objeto literal?
@@elchente859 En programación orientada a objetos se supone que todo es considerado un tipo de objeto, pero cundo se habla de objetos literales es para referirse a los arreglos que declaramos entre llaves {} y están compuestos por una clave o atributo seguido de dos puntos y un tipo de valor (no confundir con los arrays).
@@nexusz5999 graciass💪🏼💪🏼
@@elchente859 😉
Muchas Gracias Jon
Con gusto👋🏻😉
jonmircha mi mejor amigo a la hora de codear apenas termine el curso me uno al canal :D
😉👍🏻
Gracias Jon como siempre un lujo tus clases🎉
👋🏻😉
🧙♂Muchas gracias!!!!
Gracias a ti!
He visto videos en español e inglés y por fin he logrado entender al pié de la letra el objeto this, muchas gracias por este curso, ya solo queda practicar para que no se olvide
👋🏻😉
Me pude hacer una pequeña explicacion si lo paso a temas de niveles: La funcion anonima utiliza en priori las propiedades (nombre) que estan en su mismo nivel de contexto/bloque y en caso de no existir, ahi utiliza la del contexto global. Mientras que las arrows function´s van directamente a las propiedades que estan a un nivel superior de ellas en contexto/bloque.
Es por eso que cuando utilizamos una funcion dentro de un objeto con el fin de re utilizar alguna de las propiedades que posee el objeto, es mejor utilizar la funcion anonima (ya que estan dentro del mismo nivel de bloque/contexto).
Me descolocó un poco cerca del min 17 cuando utiliza la arrows function pero me puedo imaginar que es debido a que cuando retorna una funcion anonima, se genera un nuevo contexto y al no encontrar nada opta por ir al contexto global mientras que cuando retorna una arrow function´s si utiliza el "this.nombre = nombre" debido a que esta en un nivel de contexto superior a dicha funcion retornada...
Un trabalenguas sin dudas jajaja, me empezo a hacer corto circuitos las neuronas profe. Mañana lo vere de nuevo
Muy buena apreciación :)
Ahora ya sabemos que es this 😄, continuemos para aprender más y saber la forma correcta de usarlo. 🙌👏
👋🏻😉
Gracias Jon!!! un lujo.
Con gusto
Excelente video!
Gracias!
jajajaj que quilombo lpm, jon le mete toda la onda igual un crack
👋🏻😉
eres un crack master, voy siguiendo todo el curso! saludos desde Ecuador
😉✌🏻
Muy bien explicado Jonathan, he tenido que ver el video dos veces, pero me ha quedado claro, muchas gracias!!!
:)
GRACIAS EXCELENTE VIDEO
😉👍🏻
Master! El mejor explicando. muchas gracias por toooodas tus contribuciones
Con mucho gusto
Muchas gracias por el video y tu dedicacion, lo entendi sin tener que volver a ver el video gracias a vos, sino me falla la memoria le di like a cada uno de tus videos, y eso que yo nunca dejo likes, pero este contenido vale la pena valorarlo y apoyarlo aunque sea con un like o comentado y compartiendolo. Aunque no sea suficiente para todo lo que entregas vos
🥰🙌🏻
that!, yo solía usar self, pero era para el mismo propósito, gracias por el tutorial!
;)
Puaff, esta clase estuvo impresionante, me pareció un tema complejo y tardé unas buenas horas para finalizar el vídeo, tomar mis apuntes y quedar con una idea clara de lo que es this, pero definitivamente aprendí mucho con este vídeo, muchísimas gracias por este contenido tan impecable profesor Jon.
👋🏻😉
Me voló la cabeza lo último de retornar una función dentro de una función constructora jajaja
😱🤯
Jajaja esta concepto parece un día lluvioso con mero sol jajaja
Jon, eres el mejor, mil gracias por usar la plastilina para que los conceptos nos queden más claros!!!
Bendiciones 🧙♂️🧙♂️🧙♂️
😎🙌🏻
Tal y como lo entendí yo (viendo cómo se comporta la arrow-function en el ejemplo de devolverla como un closure) el this en una arrow-function apunta un escalón por encima al contexto en el que se encuentra de forma natural, como está un nivel por debajo de la función Persona coge de esta el contexto que es ahí donde está el nombre.
La arrow-function en el objeto está al mismo nivel que este y se va un escalón por encima y por eso apunta al objeto global...
La función anónima si no encuentra en su contexto la propiedad a la que apuntamos salta directamente al objeto global sin mirar niveles por encima a ella.
Esa es la sensación que me dio
👋🏻😉
wao es genial aprender los truquitos de la vieja escuela =)
Así es! ;)
minuto 10.30 wooooooooooooooooooooooow magia!
👋🏻😉
excelente vídeo!
😉👋🏻
ahora si estoy sufriendo con la teoria con lo nuevo de js. Voy a tener que ver una vez mas todo los videos pero espero que me quede mas claro asi que a darle :D
Yo igual, saca notas de cada video. Te ayuda mucho :D
es buena idea, pero primero escribe el código y luego ves el video pero ya con el código escrito
Yo creo que secir que no escaba del ambito-dominio-carga del objeto por eso que se vuelve parte del objeto que lo invoca. estubo genial. me sorprendi los de arrow function.
Duda: cuando usa función tipo arrow dentro de un objeto, la impresión del mensaje se realiza con el valor de la variable que haya en el scope global. No toma el valor de la variable que hay dentro del objeto porque se imprime utilizando función arrow (usa el mismo scope donde fue definido el objeto). Si se usa la función tipo arrow dentro de una función constructora, no utiliza el mismo scope donde fue definida la función constructora, utiliza el scope de la función constructora. Aquí no lo entendí.
Si está la función arrow dentro del objeto se salta el scope del objeto, pero si es función constructora la función arrow no se salta el scope de la función constructora. p q?
Clarísimo Jon!
;)
Buen día, gracias Jon. Entiendo entonces que hay un scope global que es el padre de todos los demás scope. Existirán múltiples scope de objeto, funciones y entre ellos no se construirá ninguna jerarquía de scope (unos conteniendo a otros). Todos los scope están arropados por su scope superior que es el global. Por favor me corrigen si estoy equivocado.
Correcto 😉👋🏻
Creo que después de verlo por tercera vez, he comprendido a que se refiere cuando dices que el contexto de las arrowFunction es el contexto donde se ha creado, casi no lo comprendo =), pero por fin lo entendí.
Otro capitulo que puedo chulear y a seguir
😉👍🏻
Jon !! 3° vez que veo el vídeo y al fin entendí todo perfecto !!!! Gracias por tu GRAN labor !!! He hecho de tus videos un vicio, desgraciadamente como padre y sostén de familia no cuento con todo el tiempo que quisiera, (quisiera tener todo el dia), pero todos los días le dedico al menos 1 hr seguro y voy avanzando.
👏🏻👏🏻👏🏻
Excelente!!! muy bueno este video es lo mas!!
Muchas gracias!
Muy bien explicado
Hola, muchas gracias
Me tomo dos vistas! Gracias profe, todo muy claro
De nada, comparte para llegar a más personas :)
Con razón tenía problemas utilizando arrow functions y usando this en peticiones AJAX ( no me miren así, eso uso en mi trabajo xd) Gracias jonmircha.
😉👍🏻
Gracias
🤓👍🏻
este this es complicado, con los objetos literales se comporta de una manera, pero con los objetos instanciados de una clase de otra forma con respecto a las arrow function
😅
Resumen. This refiere al contexto propietario del metodo con contexto que la contiene.
Que temazo tan picante xd, cada video es una hora o mas para entenderle, espero que mi aporte ayude a entender el tema:
"this" en JavaScript se refiere al objeto actualmente en uso. Puede variar dependiendo del contexto en el que se utilice. En una función global, "this" se refiere al objeto global, que en el caso de un navegador es "window". Dentro de una función de un objeto, "this" se refiere al objeto del que la función es un método. También puede ser modificado explícitamente utilizando "call", "apply" o "bind".
Las funciones de flecha no tienen su propio contexto de "this". En su lugar, toman el contexto de "this" del entorno en el que fueron creadas. Esto puede causar problemas si una función flecha se utiliza dentro de un objeto y se intenta acceder al objeto a través de "this", ya que "this" se refiere al objeto global o al objeto que contiene la función, en lugar del objeto específico dentro del cual se está utilizando la función.
Por ejemplo, si una función flecha se utiliza como un controlador de eventos en un botón, "this" dentro de la función flecha se refiere al objeto global en lugar del botón que desencadenó el evento. Para solucionar esto, se puede utilizar el método bind() para vincular el contexto de "this" deseado a la función flecha.
👋🏻😉
gracias jon teamo
😅
6:29 Holaa!!! Alguien me dice como JonMircha hizo para copiar esa misma linea de parrafo y arrastrarla?
Eso lo enseño en mi curso de VSCOde si no me equivoco es alt y las flechas del cursor
This se refiere al objeto al que pertenece el contexto actual de ejecución.
👋🏻😉
👋🏻😉
me va explotar la cabeza jaja
🤭
Perfectooo
Jon tengo que resolver esta duda y no sé cómo hacerlo: Cuando el método X de un objeto O es pasado como argumento a una función Y, que pasa si X contiene una referencia a 'this' y se ejecuta por fuera de la función Y? proveer ejemplos.
Ve el siguiente video, la respuesta esta en el bind 😉
entonces yo al declarar una funcion anonima dentro de un objeto, estoy generando el contexto del objeto por lo que el this ya hace referencia al contexto de este ultimo ?
osea me refiero a :
// como la funcion ha generado su scope, osea el scope del objeto, al usar this dentro de la funcion
// ya se refiere al contexto dentro del objeto
👍🏻
Profe no entiendo porque la arrow function dentro de la funcion constructora respeta el scope de esta y cuando lo ponemos dentro de un objeto no.
Me explico, Entiendo que un arrow function no genera scope y hereda el entorno donde fue creado el objeto(global en este caso), entonces, porque no hereda el entorno de la función constructora? no es global acaso?
En los objetos literales no se crea un contexto, hereda en el que esta por ello la arrow tampoco y es por ello que si quieres usar el this dentro de un método de un objeto usas una function por que la function crea un contexto this y en este caso es el objeto en el que esta :P se qué al principio es difícil de entender, pero con la práctica y experiencia lo entenderás ;) ánimo y no desistas
Hola Amigo. Muy bueno tu curso, en el video anterior recomendaste un libro Eloquent Javascript y dices que es tu preferido, me podrás recomendar un libro pero para PHP7. Gracias
mmm de PHP no he leído mucho salvo la doc :P sorry
Antes que nada, estoy fascinada con los cursos!! Pero en este me topé con un error, estoy haciendo el codigo al pie de la letra y cuando coloco console.log(this); me lo retorna como undefined.. y si coloco console.log(this === window) lo retorna como false, porque? No puedo avanzar de ahi porque me sale error en todo. Gracias!
Justamente tenía duda cuando se vi la palabra this en la azúcar sintáctica de JavaScript, fue algo que en POO me dejaba como que WHAT? en este video fue de lo entendí no a la primera pero si esta algo confuso, pero entendible! Muchas gracias!!!
:)
En la mitad del video me hice bolas , como diria el chavo. Me voy patras a verlo denuevo desde el principio.
😅
Estaba trabajando con un archivo index.html que utiliza un index.js, al utilizar el console.log con this, se imprimía undefined. Después revisé el html, y el script que llamaba a index.js tenía la propiedad type="module". Se la quité, y this se empezó a comportar como en el video. ¿Por qué será? 🤔
😮
Lo que hiciste de guardar el contexto en la variable that, creo que es lo mimo para lo que se usaba en algunos casos self???..
Sí self o that es lo mismo
jon no se si habra cambiado pero yo ejecute mi codigo de esta forma
function Persona(nombre) {
this.nombre = nombre;
return function () {
console.log(this.nombre);
};
}
let jhojan = Persona("Jhojan");
jhojan();
y en consola si imprimia Jhojan, cuando se supone que imprime el contexto global no?
Hola, Profesor. Estuve viendo el video y fue extremadamente confuso, pero me confundí mucho cuando llegamos a la función constructora. Ese return fue bastante confuso, además, las funciones en los constructores deben definirse con this. o Persona. antecediendo el nombre. Al logguear la variable jon en la consola, se me especificó que jon era una función y no un objeto instancia de Persona
No me queda del todo claro que es lo que sucede con lo que retorna la funcion constructora Persona. La función que Persona retorna crea un scope propio, dentro de esta ; no encuentra una propiedad nombre y la sale a buscar, pero cuando sale a buscarla no se encuentra antes que nada con el bloque que tiene la propia funcion Persona? Porque se lo salta?
profe a hoy pongo imprimir en consola this y sale undefine y lo igualo a window y sale false por que algo cambio?
Hola Jon, en la parte de
function Persona(nombre){
const that = this;
this.nombre = nombre;
return () => console.log(this.nombre);
}
"this" en la arrow function, hace referencia al objeto vacío que se crea al instancia la función verdad? Sería como hacer
{
nombre,
getNombre(){
console.log(this.nombre)
}
}
verdad? No sé si me doy a entender, pero esa parte me confundió. Espero puedas responderme tú o alguien más, gracias!
Hola Jon, una duda. Es mi impresión o en tu último ejemplo es incorrecto que hagas un return de una función en una función constructora. Si notas al final, el supuesto objeto "jon" queda en realidad asignado a una función y se pierde la propiedad del nombre. Saludos
😮 en qué parte???
@@jonmircha En el 15:50 cuando en el return envías una función con un console.log dentro. A diferencia de cuando solo retornabas el console.log dónde la función constructora tenía sentido, ya que mediante la sentencia new Person devolvía un objeto con el atributo nombre; en el caso de devolver una función ya la función constructora no tiene sentido como tal y daría lo mismo hacer simplemente "jon = Persona()" sin el operador New, además el atributo "nombre" queda inaccesible, salvó por la ejecución de jon(), incluso si tuviese métodos también quedarían inaccesibles ya que en realidad jon pasa a ser una simple función que tiene un valor this.nombre viviendo en el limbo.
Corrígeme pero según lo percibo no deberíamos incluir returns en funciones constructoras para que efectivamente nuestros objetos sean asignados de forma correcta.
Saludos y gracias muchas gracias por los cursos.
el console.log(this) me aparece como undefined y si lo escribo directamente en la console aparece bien ¿?
😮
@@jonmircha aun no entiendo por que me aparece como undefined, pero lo puse en un js nuevo y funciono. por fin entendi bien el this, excelente curso :)
No entendí: si declaro una función anónima, tengo entendido que al ser una función normal, el scope lo toma como si perteneciera al objeto global, pero, una arrow function, se supone que está dentro del contexto de objeto, ¿no debería tomar el scope donde pertenece el objeto en sí?, quedé dubitativo ante eso. Ojalá alguien pudiera a ayudarme a aclarar esto último. Gracias.
tu duda es confusa, primero ubicate que estamos hablando de funciones dentro de objetos literales, las funciones normales al usar this hacen referencia al objeto al que pertenecen en cambio las arrow functions hacen referencia al inmediato superior al objeto donde se encuentran. yo tengo mucho para seguir aclarandolo al tema.
@@matiasromera330 me quedo una duda viendo el video, entiendo que el this en las las arrow functions hacen referencia al inmediato superior al objeto donde se encuentran pero en el ejercicio la explicación del obj3 el this se fue a la referencia del padre que seria Const obj3 osea global, todo hasta ahi bien. Pero cuando explica el ultimo ejercicio y usa de nuevo arrow functions, pense que su padre referencia otra vez seria global, y resulta que este si toma el nombre escrito dentro de la funcion...me ayudas con lo que no estoy entendiendo?.
@@emmanuelpina1888 el tema de los closures es complicado, cuando usás una arrow function en un closure estás accediendo al entorno de ejecución de la principal, pero cuando usás una function anónima y ésta no cuenta con la propiedad nombre, directamente pasa al scope global
@jonmircha corregime si estoy mal o incompleto
Profe use filtro antipop, por favor 😅
Super Saiyajin Mircha
el imprimir en el objeto no me permite amigo , me sale esto prueba.html:25
Uncaught SyntaxError: Unexpected identifier no permite q tenga el mismo nombre de funcion del global y en el objeto al parecer
Lo que te dice es que tienes definida dos variables con el mismo nombre y eso no se puede
Lo que no termino de entender es por qué la arrow function no se salta el scope de Persona y se va a su padre que sería window (19:17) al igual que pasaba con el método imprimir del obj3... Es lo que no termino de entender del todo.
al parecer creo yo que es porque el arrow function al no tener un scope definido toma el del método que en el cual está englobado
Si colocas la arrow function antes del return lo interpreta como scope global, ya ahora que se encuentra después del return toma en cuenta el scope donde se encuentra contenido ese return, al menos así lo entendí yo
@@luisvonderbrelje9442 No la arrow function no tiene un scope definido.Por eso entro al contexto del padre.
👏👏👏🙏🙏🙏
👋🏻😉
Jon? Las arrow function has explicado que se saltan el contexto en donde estan (clase 21) , pregunta por eso un this dentro de una arrow function , mira el contexto global? y por ultimo gracias por el curso.
Sí, justamente como lo mencionas, de nada🤗
Like si vienes sufriende desde el video de los ITERATORS :'v, ya no aguanto ya no aguanto :'c.....
Aprender duele :''')
Te entiendo compa jajaja
JAJAJAJA SI PE ES DEMASIADO ESTO XD JEJEJ
jajaja yeahh
Entonces... esto no es una clase de la palabra reservada "This" sino es una clase de hambito de funciones, entender cuando aplica una arr funtion y una declarada...etc..
Buenas jonmircha, veremos en este curso los Eventos de JavaScript?
Sí
Hola jon, puedes saludarme sin poner emojis, jajsj saludos
Saludos!👋🏻😉
console.log(this === window); eso deberia de darme true, pero me da false, porque?
Depende donde lo estés ejecutando
@@jonmircha Muchas gracias, ya me lei una documentacion y lo entendi.
jajaja explote con el ejemplo 3 con las arrow fuctions.
:P
Min 16:57 no entiendo porque me retorna undefined
🤔