📚 ¿Qué es this en JavaScript? Explicación fácil, directa y sencilla con ejemplos

this es, sin ningúna duda, uno de los temas que más problemas crean a los programadores de JavaScript. ¿Qué es? ¿Qué significa? ¿Cómo puedes preveer su valor sin necesidad de hacer un console.log? ¡Te lo cuento!
▶ No te pierdas más directos en: / midudev

[@ricardorien]

Esta y la de La Cocina Del Código, son las explicaciones más claras sobre This que existen en español. Eres un duro!

[@matyXDgo]

Alguna idea de que pasó con la cocina del código? Tenía todo el potencial de crecer, pero no subió más videos :c

[@sinoriginalidadoficial]

@@matyXDgo F

[@hamiltonpatinosolano8557]

La mejor explicación de this que he visto en todo youtube, muchas gracias por tu aporte a los que apenas iniciamos con Javascript.

[@midulive]

Gracias a ti!

[@JGDL11]

Me había visto como otros 5 videos sobre this sin tener 100% claro que es y como funciona (porque soy torpisimo), hasta que he visto este. Claro, sin rodeos y contando lo realmente clave. Gracias!!

[@midulive]

🔥🔥🔥 esoooooooo!!!

[@juanmiguelcostalucena2222]

Grande Midu haces ver fácil lo difícil , ojalá todos los profes educaran con la misma pasión que tu! eres un grande!

[@robertocastellanomolina9704]

Qué recuerdos me ha traído tu explicación, desarrollé un videojuego de los micromachine en el Bootcamp con JavaScript y hay "this" por todas partes, como siempre un placer ver tus explicaciones.

[@maxwelldrask7345]

Soy programador desde hace poco y estoy más que agradecido de tener estos vídeos a mano para seguir aprendiendo. Muchas gracias

[@GG-cq7nt]

Midu, no existen palabras para agradecer todo lo que enseñas

[@slynkbass]

Muchas gracias Midu!!! Tan genial como siempre!! Ahora faltan unos cuantos explicando qué es el contexto de ejecución vs contexto vs entornos léxicos, cómo se gestiona todo en JS (la pila de llamadas, etc) y unos cuantos vídeos sobre el event loop para que la gente vaya entendiendo bien los entresijos de JS. Como siempre, muchas gracias por compartir tus conocimientos! ❤️

[@iranaguirre9318]

miduvdev es lo mejor que le ha sucedido a la comunidad

[@edu235edu]

De los temas más oscuros de JS , pero si voy de la mano de Midu .. no pasa nada!! Gracias!!!

[@brayanasaelayalalopez1755]

Muy buena explicación del this, gracias midu!

[@aaa-rip]

La verdad que el concepto es muy simple y la explicación es clara, no sé porque en otras explicaciones lo hacen parecer mas difícil de lo que es

[@yeseniagonzalez3540]

Muy buena explicación, muchas gracias.

[@pizzasperoni]

Me encanta la forma de definirlo como “el dueño” es muchísimo mas intuitivo que referirse al contexto.

[@midulive]

Sip! :)

[@jalvarezdev]

Estaba buscando precisamente ahora informacion sobre this y this.midu

[@alejandrodavidbenolol]

Intuía esto, pero la forma en la que lo explicaste me dejo más claro el concepto Gracias por eso

[@josetrinidadmirandalopez6274]

Yo lo uso, porque en dónde laboro lo usan, y solo sabía el que todos saben de dar contexto, pero con esta explicación entiendo un poco más, que grande! 🥳🥳

[@Fenrir145]

recuerdo que con el tema del hoisting yo vi esto, del this como el objeto que seria el dueño de la funcion que en modo estricto como mostras en pantalla seria undefine, por otro lado seria window, la verdad genial como siempre, midu, explicando y enseñando cositas, muchisimas gracias por tu gran aporte a la comunidad!

[@13sergy]

Explicación clara y concisa. Disparas muy fino!! 👌​👏​

[@jimmymontenegro8517]

Oh, lo recuerdo de mi querido Actionscript. Gracias Midu.

[@daineracosta]

muy genial tu explicación

[@Imloreno]

Gracias por el video midu me aclaró todas las dudas que tenía del tema. Respecto al inicio del video, ahora entiendo por que las empresas no piden programadores Junior en las empresas, si luego no quieren entender cosas como estas. En fin, yo necesitaba este video, muchas gracias!!!

[@juanpasten6077]

Mil gracias por crear y compartir!

[@ramirojhoel1019]

Uhhhhh esperaba un video asi Midudev un like poderoso para ti y animate a hacer mas videos de NodeJs y react con ejercicios basicos intermedios y avanzados

[@mhlinus]

Excelente video, lo voy agarrando la mano. Que editor estas utilizando? Es vim?

[@jonathancelaya2073]

Gracias hermano gracias

[@albertmontagutcasero2129]

¿Qué software usas para hacer estos ejemplos? ¿Es VSCode con alguna extension para poder ver los console.log ahi al lado?

[@ricko13]

Lo malo es que no le puedo dar like más de una vez al video, EXCELENTE crack ♥

[@codeSEO_]

GUAU, en este ejemplo tan simple acabo de ver la programación pasar por mi mente. Me he quedado con que 'this' hace referencia al owner, pero cuando el owner es una arrow function, no se bindea 'this', se podría solucionar metiendo esta arrow function en una función de contexto 😊 Una pequeña duda, en una arrow function, como no se bindea 'this.ejemploObjeto' , podría llamar directamente a 'ejemploObjeto' ?? o serguiría necesitando de una función padre de contexto?? Gracias!

[@altaga]

Super! Yo creo que también haré un vídeo al respecto en ReactJS

[@codeSEO_]

Una pequeña duda, en una arrow function, como no se bindea 'this.ejemploObjeto' , podría llamar directamente a 'ejemploObjeto' ?? o serguiría necesitando de una función padre de contexto??

[@cesaralexanderarevalo6647]

Me quedé en una entrevista por este tema del this. Aprendido y nunca se me olvidará. 🤣🤣🤣🤣

[@RickyMega21001]

Mejor explicado imposible

[@Vladimir-go5yn]

Este es uno de los temas más interesantes de JS

[@andresrl72]

Hola! consulta, cual es el IDE que se usa para la explicacion?! Gracias.

[@nilost4466]

Que extensión usas para ver las impresiones en otra pestaña?

[@coralaltamirano3285]

viernes de repasar conceptos de JS.

[@vigilanciaelite]

Jaajjajajajaja que bueno las explicaciones así concretas

[@samuell.5874]

Gracias Midu :)

[@addev-m]

Muy buen video, faltó como funciona el this en una clase

[@lucasgallardo7603]

Gracias!

[@gerardohernandez6186]

Hola, creo que me ha quedado un poco más claro lo que es el THIS, sin embargo, he visto que a mi me seguia dando undefined y la razon es por que tenia el modo 'use strict'. entonces a lo que voy es lo siguiente: Si quiero usar bien los THIS tengo que quitar el modo 'use strict' , me refiero específicamente con functions. Me causa un poco de ruido, ya que algunos dicen que esta bien usar el 'use strict' pero veo que si usare functions con this me marcara undefined.... Soy nuevo y me causa confusion :,(

[@Bisson156]

Gracias Midu! Saludos

[@danigutierrezcalderon]

Podrías explicar el bind() gracias!

[@tecno_art_designe]

Hola tengo poco tiempo aprendiendo JS. gracias por tu aporte agradecido .. una pregunta??? que utilizas para mostrar los resultados en el editor a mano derecha .. Saludos

[@elmilitar143]

Midu puedes hacer un video sobre el uso de bind. Por cierto muy buen video lo he aclarado

[@yorch044zgz]

Buenas te he empezado a ver hace poquito, como se llama la herramienta que usas para evaluar el código en Real time?

[@terry-]

Genial!

[@fernandopoveda9861]

realmente el THIS, se refiere a la instancia de la función, clase, instancia de ejecución. Aplica igual que en muchos lenguajes.

[@ruanmiga]

De forma resumida this en español significa "Esto" o "Esta" haciendo referencia a un elemento o funcion dentro del padre o dueño

[@joaquinbustelo7889]

Me interesa saber la extención que usas para que las arrow functions se combiertan el una flecha

[@Neotokio1979]

This. Acaba de explotar mi mente ajjajja

[@juanestebanecheverryperdom6749]

para este tipo de casos es mas facil ilustrar cada cosita del global, el window y el this (creo que se da a entender mas con dibujos)

[@Weagle1337]

Se que no es exactamentr igual, pero el this lo aprendí desde c#, y creo que en JS es mas facil de entender. Buen video midu! Pd: a veces no se que pasa pero escucho que se peta el micro un poco

[@gonsalomon]

Midu, banco a full que expliques this, pero usar var? Convienen reservadas como let y const que son dependientes del scope, entonces se modulariza mucho mejor el uso de memoria (y por ende la velocidad de carga). Me duele el var siempre que lo veo xd

[@midulive]

var hace que se pegue al objeto global que era parte de la explicación. :) era una explicación de this, no de let o const. 😅 cómo os gusta sacarle punta a todo, la leche.

[@javiergavilanmerida2133]

Creo que es incorrecto decir que las arrow function no tienen "dueño". Es solo que su dueño se decide por donde se inicializan, en lugar de donde se ejecutan. Por poner un ejemplo claro, cuando declaras una arrow function, en realidad como lo está traduciendo javascript es algo parecido a: const arrowFunc = function() { const self = this return function() { console.log(`El propietario de arrowFunc es ${self.name}`) } }(); El valor "this" para una arrow function, es el mismo que el de "self" para el ejemplo que pongo. Da igual donde ejecutes la función resultado, el dueño va a ser siempre donde se inicializó arrowFunc. En el ejemplo de 9:38, si nos fijamos, se está inicializando "getName" como una nueva arrow function cada vez que invocamos a la función "context", y por tanto el valor de "this" para "getName" va a ser siempre el dueño de "context".

[@midulive]

this no tiene valor en la arrow function. No es que se decida de dónde se inicializa, es que al no tener valor entonces usa el del scope superior.

[@javiergavilanmerida2133]

@@midulive Me ha costado pero creo que ya lo he captado. El arrow function no tiene this, por tanto lo obtiene del scope superior a donde se declare. Es lo mismo que ocurre cuando usas cualquier otra referencia de un scope superior. Dicho de otra forma, this en una arrow function no es diferente de cualquier otra variable y/o función que al no existir en su scope, se busca en el scope superior.

[@midulive]

Exactamente. 👍

[@francoortega4361]

Como hace para ejecutar el código al lado :O

[@ealexanderflores89]

me inicié con ActionScript de Flash y ahí se usaba mucho el this, quizá por eso nunca se me complicó usarlo

[@AdrianoChiliseo]

Como se ocuparia el bind

[@bellorinrobert]

Arc hay trabajos para inglés b2

[@newthepanch]

Pues mira que yo venia tranquilo a estudiar un poco a resolver dudas, a recoger conceptos que utilizas pero no terminas de comprender todo relajadito con mi botellita de agua, y ya me hiciste poner pausa, ir por una avena con leche (ya que te estoy viendo en la noche) para poder entender esto con calma y ponerme a tope, ahora vuelvo

[@andresbustamante972]

Yo tb creí que arrow function apuntaba al global, no se cuantas veces respondí eso en mis entrevistas jaja

[@haroldareiza4836]

Alguien que me diga cuál es el tema :(

[@carlosdsg4]

Coño al fin entiendo el this

[@memotux]

Yo aprendí sobre THIS hasta que empecé a ocupar VueJS, donde es esencial comprender el contexto dónde se ejecuta THIS, y porqué se pierde ese contexto cuando se ocupan ARROW FUNCTIONS. Hasta entonces me quedó claro lo del THIS.

[@jhoanalvarez2776]

El valor del "this" depende del contexto en el que se encuentra. Si esta en el contexto del "OBJETO GLOBAL" su valor sera, el que tenga la variable que esta en el objeto global. Si su contexto cambia a por ejemplo "const miContexto = {...}" su valor sera al que este en el contexto del objeto "miContexto" De esa manera lo entendi yo 🤣

[@chandiazpedro4392]

Excelente video JAJAJAJAJA 🤣

[@mccoffee229]

ay el java krih

[@mellalrescate]

capaz vos también arrancaste no sabiendo nada de Javascript, cómo estudiaste y entendiste no te da el derecho de reírte de los demás. te falta humildad amigo

[@cruzisaac51]

Si le das like al vídeo salen colores 🤩🎉

Moraleja: Adiós a las funciones comunes!! 🤣... muchas gracias.

[@m3mbrillo_]

El this en JS es una cosa amorfa horrible. Es mejor en otros lenguajes, dónde el this es tu amigo y no enemigo.

[@miracomosemenea3148]

Esto es this

[@midulive]

jajaja traducción literal

[@raw8319]

estoy mas perdido despues de este video xD

[@qobavision1161]

No entendi nada xd

[@carlsytm]

no entendi casi nada pero no me rindo

[@laresistencia2146]

Llévate this.

[@luchit0ynossj954]

no entendi nada jajajjajajajaja

[@AR7editing]

this.midudev=god;