Unveiling the variable "this" on JavaScript | Mayk Brito

Hey Dev! Everything okay?
Is 'this', on the several contexts of JavaScript keeping you awake at night? Are you using this concept in an efficient way in your code?
If you need to know how the context and the scope, strict mode, local and global 'this', how 'this' works in a method, inside a function and even inside a function that is inside another function; beyond knowing how it works in a class...
This class, then, will help you understand a little bit about how to use these guys.
We'll also see how the methods: .apply(), .call(), and .bind() can help you manipulate 'this' in several scopes and contexts.
Beyond that, how the arrow function works in these scenarios.
I hope this makes sense to you!! 💜
Repository: github.com/Roc... (in Portuguese)
-----
Follow Rocketseat on our social media:
Website: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunity: comunidade.rock...
Blog: rocketseat.com...

[@ygorluiz]

Em tempos de desemprego poucas pessoas disponibilizam conteúdo de qualidade e totalmente de graça, te desejo todo sucesso desse mundo e obrigado !

[@espiritfox]

cara!! seu vídeo já tem 3 anos e foi a melhor explicação que vi até agora!!! parabens

[@LucasRocha-lp2zi]

Ja havia procurado em vários lugares e vários blogs uma definição e uma explicação, aqui foi muito maneiro, entendi perfeitamente!!!!! MUITO OBRIGADO!

[@mauroanselmooliveira]

A clareza e objetividade do video são impressionantes! Parabéns! Melhor video em PT-BR sobre o assunto !

[@joaodasfabulas]

Esse canal está cada vez melhor, parabéns aos organizadores!

[@matheusvoalide2649]

nem assisti o video ainda, mas ja sei q é de otima qualidade.

[@gelson_ferreira]

Venho estudando javascript a fundo e você esta dar um grande ajuda. obrigado

[@felipedantas8153]

Esse Mayke brito manda bem demais, os vídeos dele são incríveis! parabéns mais um conteúdo top!

[@arroz_julio2270]

Minha mente expandiu muito em relação ao This depois desse vídeo, obrigado!!

[@ruanvalente7496]

Incrível Mayk, sua didática é excelente passando o conteúdo de forma clara e objetiva. Parabéns para toda a equipe pelo excelente conteúdo ! Sucesso galera !!

[@maykbrito]

Grande Ruan!! Obrigado pelo comentário manin! Tamo junto!! Bora pra cima!!

[@SektorLK979]

Fala Mayk, blz? Ótimo vídeo! Só uma coisa: O contexto (this) representa um objeto em questão e não a função. A função tem um contexto se ela estiver dentro de um objeto ou se você passar um contexto pra ela como no call, bind e apply, do contrário this é undefined. O this é atribuído ao objeto na Creation Phase do contexto de execução. Você consegue acessar o this em uma função em um contexto global, seja browser ou ambiente node, pq existe também um objeto global tanto para o browser (window) quanto para o node. (Global Object). Mas o contexto refere-se ao objeto e não a função

[@maykbrito]

Maninho. Obrigado pelo comentário brother. Excelente. 💜💜💜

[@tdias25]

o this não funciona parecido com um escopo dinâmico? só que só leva em consideração como foi chamada (call site)? falo isso em referência ao seu comentário sobre "creation phase"

[@SektorLK979]

@@tdias25 Talvez não tenha entendido o que você quis dizer mas acho que você confundiu contexto de objeto com escopo léxico e closures. Escopo e contexto são coisas diferentes. Contexto (this) é um valor que faz referência à um objeto, e escopo é o limite onde expressões e valores são visíveis. Existe uma grande confusão entre essas duas coisas porque no JS existem 2 "tipos" de contexto, o contexto de execução e o contexto de objeto, ambos são chamados de contexto mas são coisas diferentes.

[@tdias25]

@@SektorLK979 sim, eu disse contexto de execução, que seria algo "" parecido "" como funciona uma linguagem que tem escopo dinâmico

[@toonydias]

Jonatas, o que você falou se aplica neste código abaixo? Pois se eu trocar o this pelo nome da variável o código não roda. Document .btn { width: 100%; height: 75px; } .quadrados { margin: 0; } Adicionar Quadrado var btn = document.querySelector('.btn') var div = document.querySelector('.quadrados') btn.addEventListener('click',add) function add(){ var create = document.createElement('button') div.appendChild(create) create.setAttribute('class','red') create.innerText = "Quadrado" //create.style.width = '100px' //create.style.height = '100px' //create.style.backgroundColor = 'red' //create.style.margin = '5px' //create.style.float = 'left' //create.style = 'width:100px;height:100px;background:red;margin:5px;float:left' create.setAttribute('style','width:100px;height:100px;background:red;margin:5px;float:left') create.addEventListener('mouseover',color) } function color() { var newBtn = document.querySelectorAll('.red') this.style.backgroundColor = getRandomColor() } function getRandomColor() { var letters = "0123456789ABCDEF"; var color = "#"; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } var newColor = getRandomColor();

[@gusprado]

Excelentes exemplos. Parabéns Mayk!!

[@maykbrito]

valeu mano!!

[@andrelima8462]

Muito bom estava com duvida no this. Vlw Maykão.

[@leonardoraupp7830]

Primeira vez que consegui entender o This, muito obrigado!

[@netasilva_]

Mayk ótima explicação, eu peguei esse conteúdo com o Daciuk e agora revi com você. Acho que você é bem didático também e deveria investir nisso kk

[@LucasLima-hj5sg]

Ótimo vídeo Maykão. O this no JS pode ser muito duro às vezes, mas esse vídeo faz um ótimo trabalho explicando os vários casos de uso

[@bl1tz_x]

Maykão é incrível desde sempre

[@BrenoNovelli]

Show. Ainda me ajudou a entender método e class um pouco mais. Demorei um pouco pra entender o lance do call. Mas depois foi bem.

[@andreytsuzuki5503]

Que conteúdo maravilhoso!!! Vou compartilhar com um monte de gente.

[@JefSueth]

caraca, esse vídeo tem o conceito de encapsulamento de POO em javascript!

[@rocketseat]

Boa Jef! 💜

[@JoaoGabriel-pk1ii]

Tem como dar mais de um like? Conteúdo top d+ parabéns

[@sir-kovu]

Mayk fodão como sempre! Mestre!!!

[@felipedantas8153]

aula incrível parabéns mayk, muito bom esses vídeos

[@o-autentico]

noosa que video maravilhoso parabens cara

[@ajoco99]

Excelente explicação Maykao

[@PhilippeHenrique]

Essa explicação do bind foi genial! Obrigado!

[@danielajardim6332]

mto boa aula. Obrigada Mayk

[@mattfelix4990]

Cara, eu curto os vídeos do Mayk

[@maykbrito]

grande Matt!! TAMO JUNTO MANO!! bora pra cima!!

[@user-zv6vl6ne9z]

Minha maior dificuldade até agora com JS é esse this e o prototype. Vou assistir esse video pra v se ajuda.

[@luccaspio2254]

Thiago, também. Muito do que foi dito em relação aos erros e cuidados com as pegadihas precisa de um pouco de experiência e vivência pra lidar e realmente aprender, mas quanto mais codo, mais essas dificuldade vão embora.

[@LucasLima-hj5sg]

Assino embaixo, não se bitole em decorar tudo de uma vez só. Muita coisa você aprende codando e errando, aprenda os conceitos e pratique bastante

[@lucaswilliam8707]

aula boa dms, me ajudou muito a entender isso !!!

[@thiagobevilaqua3303]

Caramba o cara matou a pau o assunto. Parabéns!!! :D

[@maykbrito]

Hahahahaha tamo junto hajaj

[@__und3f1n3d__]

Sentido? Cara, que aula maravilhosa! Ótima didática e exemplos, Mayk! Só achei um pouquinho zuado a forma como o navegador lida com os escopos. (Mãããs deve ser coisa minha mesmo). O node me parece mais organizado com o module.exports . No mais, é muito interessante ver as diversas alternativas para lidar com as variações do this! rs Obrigado e Obrigado!

[@mucicolin]

Muito bom!! Parabéns!

[@principe.borodin]

Excelente dica

[@joseaugustomegres7868]

Slc, to amando a rs

[@willianzuqui8005]

Gostei, me lembrou muito o principio OCP

[@JeanPaulll]

Parabéns meu caro!

[@maykbrito]

obg Jean!

[@gabrielpereiramendes3463]

#Excelente!

[@arthurlara852]

Nuss que dlç de explicação. Depois de eras tentando entender essa fita do this.

[@rocketseat]

Boaaa Arthur!! Valeeu pelo feedback ! 💜

[@nalbertcerqueira6079]

SEGUE ABAIXO UM RESUMÃO COM VÁRIOS CASOS DO THIS E ALGUMAS EXPLICAÇÕES ------------------------ CONTEXTO DE EXECUÇÃO DE UM MÉTODO -------------------------- 1) [This dentro de um método utilizando function declaration] * Com ou sem "use strict": o this faz referência apenas ao objeto (node e browser) 2) [This dentro de um método utilizando arrow function] * Com ou sem "use strict": o this retorna um objeto vazio (node) ou o objeto global (browser) isso ocorre pois arrow function heda o this do escopo/contexto acima, como acima dela não tem mais nenhuma função, ela pega o objeto global no browser ou um objeto vazio no caso do node. Vale ressaltar que um objeto não é um escopo ou contexto de execução. Os métodos feitos com funciton declaration referenciam o objeto porque a linguagem quis assim, e não porque um objeto cria escopo. 3) [this dentro de function declaration dentro de método feito com function declaration] * Com "use strict": como this dentro de uma function declaration que não é método retorna undefined, logo ela retornará undefined, ignorando a função (que é um método) logo acima dela (node e browser) * Sem "use strict": como o this dentro de uma function declaration que não é método retorna o objeto global, logo ele retorna o objeto global, ignorando a outra função acima dele (node e browser) 4) [this dentro de arrow function dentro de método feito com function declaration] * Com ou sem "use strict": como arrow functions herdam o this do escopo/contexto acima, a arrow function herdará o this do método criado com function declaration, e como o méotodo com function declaration retorna o objeto o qual o método está inserido, logo o this retornará o próprio objeto (node e browser) 5) [this dentro de arrow function dentro de método feito com arrow function] * Com ou sem "use strict": this retornará um objeto vazio caso esteja no node, ou retornará o objeto global caso esteja no browser. --------------------- CONTEXTO DE EXECUÇÃO DE FUNÇÃO QUE NÃO É MÉTODO ---------------------- [This dentro de uma function declaration que não é método] * Com "use strict": o this não faz referencia ao escopo global, retornando undefined (node e browser) * Sem "use strict": o this faz referência ao objeto global (node e browser) [This dentro de uma arrow function dentro de uma function declaration que não é método] * Com "use strict": a arrow function herdará o this do escopo acima, ou seja da function delcaration, e a function declaration no modo estrito retorna this como undefined, portanto this será undefined (node e browser) * Sem "use strict": a arrow function herdará o this do escopo acima, ou seja da function delcaration, e a function declaration sem modo estrito retorna this como objeto global, logo, this será global (node e browser) [This dentro de uma arrow function dentro de uma arrow function que não é método] * Com ou sem "use strict": o this nesse caso retornará um objeto vazio no caso do node ou o objeto global no caso do browser

[@tiosam1041]

Obrigado pelo video :D

[@gilmarvictor4410]

Essa aula me salvou kakaka

[@rocketseat]

Aeee! 💜💜💜

[@viniciusbarbosa4635]

Amigos da Rocketseat , quando sai a proxima inscrição para o BootCamp?

[@fpsgameplaypcs]

Também estou na espera. Deve sair daqui uns 3 a 4 meses. Levando em consideração o ultimo.

[@gabrielrufino9041]

Bom demais!

[@amagami1008]

Faltou falar a arrow functiion dentro da estrutura Class ele tem um comportamento diferente daquele jeito objeto declararado sem o Class

[@Saudavelpro]

Podia fazer um de promises ou iterators

[@PhilippeHenrique]

Qual tema vc usa no VS-CODE?

[@douglasazevedo2586]

The Window.name property gets/sets the name of the window's browsing context

[@douglasazevedo2586]

Note: window.name converts all stored values to their string representations using the toString method.

[@r.m.2000]

mas e o Global x Module.Exports? vc dizia que o this muitas vezes estava no global, mas quando dizia global nesse caso estava se referindo ao module.exports do arquivo, mas o global global mesmo, é diferente...

[@camilaisabela]

Se colocasse Camila Isabela 34 eu diria que sou eu! Ha ha ha 💙

[@xmatheusftc]

Glr preciso de uma ajuda, creio eu que meu problema é com o this... Criei um componente no react-native que é um slider com varios videos, nisso eu exporto ele, e é passado varios URls através das props... Quando eu importo esse componente algumas funções ficam compromentidas, botão de pause/play não funciona, duas setas para passar os videos no scrollview também perdem a função. Ah, eu havia testado em uma tela de 'teste' sem importar, renderizando o componente sozinho, e ele funcionou perfeitamente.

[@juliocesar2159]

Carai estava estudando isso agora nesse momento e aparece a notificação da Rocketseat ainda bem to meio confuso em relação ao this.

[@maykbrito]

hahaha que massa isso mano!! hahaha tomara que te dê uma luz aí!! =D

[@brunozago8855]

Cara, é muito complicado ativar o mic do fone e ouvir em tempo real no speaker? Como eu poderia fazer esta função? Valeu!

[@linecker94]

será que é tão difícil fazer algo bem padronizado? (a linguagem)

[@felipedantas8153]

16:30 fiz no meu vs code e retornou o valor global estou estranhando demais essas coisas de escopo acho que mudaram algo

[@felipedantas8153]

erro meu já corrigi

[@jgalmeida93]

Excelente vídeo! Você usa Linux? Se sim, qual distro?

[@tdias25]

Senão for mac, parece ser o Kubuntu ou Xubuntu

[@maykbrito]

Opa. Valeu brother. Uso o Kali Linux

[@jgalmeida93]

@@maykbrito Massa! Curto muito seus vídeos, didática excelente, parabéns!

[@jonastavares420]

Agooora entendi o/

[@Bread-vk8fl]

O que raios é VIZ??????

[@diogo.takeshi]

Sou iniciante começando do 0 algum curso para recomendar para começar a programar desde ja agradeço

[@toonydias]

Cara, começa com o Curso em Vídeo do KZbin. Depois parte pra esse aqui. skylab.rocketseat.com.br/node/curso-java-script/group/manipulando-a-dom/lesson/alterando-estilos E vai fazendo os exercícios.

[@dialeletico]

fragmento de POO?

Heisenberg

[@maykbrito]

entendedores entenderão hahah

[@mateusrocha4941]

Cara, eu não entendi PN

[@jerfsonconceicao853]

Luis. Filipe Kauã

[@otaviocr9434]

Repositório não existe :/

[@maykbrito]

fala manin!! liberado.. obrigado pelo comentário!!

[@mateushenrique6421]

Segundo

[@ToshiroKiss]

this significa isto, esta? pensei que significasse DEMONIO, CAPETA, DESGRAÇA. opskaopskaopksoapsopakoska

[@maykbrito]

aieuhaeiouahuihfe.. no JavaSpirit sim kkkkkk

[@contraponto193]

vim buscar bronze e achei ouro XD

[@amagami1008]

Esse this no Javascript é uma bagunça, alguém por favor arrume essa bagunça

[@denissouza8857]

3 anos de estudo resumido em 48 minutos. SEN-SA-CI-O-NAL. value @Mayk Brito

[@maykbrito]

hahahah que bom!!! obg pelo feedback

[@FabimBdz]

Esse aprofundamento todo deveria ter no curso pago do Explorer, porque as explicações lá deixam muito a desejar..

[@caiqueandrade9523]

uma aula de 47 minutos e eu só entendo o idioma kkkk

[@caiqueandrade9523]

maaas, contudo, toda via, muito obrigado pelo conteúdo!!!

[@axfilipe]

Por isso que eu praticamente só uso TypeScript, JavaScript é uma salada que só por Deus.

[@r.m.2000]

que aflição ver vc colocar ";", no node nao precisa mais de ";"...tente nao usar vera que despoluirá todo o codigo

[@amagami1008]

Não