Unveiling the variable "this" on JavaScript | Mayk Brito
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- 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...
![ทางเดินชีวิต - ธีเดช ทองอภิชาติ x อ.ไข่ มาลีฮวนน่า [Official MV]](http://i.ytimg.com/vi/1f3wcG16dd4/mqdefault.jpg)
Em tempos de desemprego poucas pessoas disponibilizam conteúdo de qualidade e totalmente de graça, te desejo todo sucesso desse mundo e obrigado !
cara!! seu vídeo já tem 3 anos e foi a melhor explicação que vi até agora!!! parabens
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
Maninho. Obrigado pelo comentário brother. Excelente. 💜💜💜
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"
@@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.
@@SektorLK979 sim, eu disse contexto de execução, que seria algo "" parecido "" como funciona uma linguagem que tem escopo dinâmico
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();
nem assisti o video ainda, mas ja sei q é de otima qualidade.
Esse canal está cada vez melhor, parabéns aos organizadores!
A clareza e objetividade do video são impressionantes! Parabéns! Melhor video em PT-BR sobre o assunto !
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!
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 !!
Grande Ruan!! Obrigado pelo comentário manin! Tamo junto!! Bora pra cima!!
Minha mente expandiu muito em relação ao This depois desse vídeo, obrigado!!
Esse Mayke brito manda bem demais, os vídeos dele são incríveis! parabéns mais um conteúdo top!
Cara, eu curto os vídeos do Mayk
grande Matt!! TAMO JUNTO MANO!! bora pra cima!!
Venho estudando javascript a fundo e você esta dar um grande ajuda. obrigado
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
Minha maior dificuldade até agora com JS é esse this e o prototype.
Vou assistir esse video pra v se ajuda.
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.
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
Primeira vez que consegui entender o This, muito obrigado!
caraca, esse vídeo tem o conceito de encapsulamento de POO em javascript!
Boa Jef! 💜
Muito bom estava com duvida no this. Vlw Maykão.
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.
Excelentes exemplos. Parabéns Mayk!!
valeu mano!!
Ó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
Tem como dar mais de um like?
Conteúdo top d+ parabéns
noosa que video maravilhoso parabens cara
Maykão é incrível desde sempre
Caramba o cara matou a pau o assunto. Parabéns!!! :D
Hahahahaha tamo junto hajaj
Que conteúdo maravilhoso!!!
Vou compartilhar com um monte de gente.
Mayk fodão como sempre! Mestre!!!
aula incrível parabéns mayk, muito bom esses vídeos
Excelente dica
Amigos da Rocketseat
, quando sai a proxima inscrição para o BootCamp?
Também estou na espera. Deve sair daqui uns 3 a 4 meses. Levando em consideração o ultimo.
Essa explicação do bind foi genial! Obrigado!
Excelente explicação Maykao
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!
aula boa dms, me ajudou muito a entender isso !!!
mto boa aula. Obrigada Mayk
Faltou falar a arrow functiion dentro da estrutura Class ele tem um comportamento diferente daquele jeito objeto declararado sem o Class
Carai estava estudando isso agora nesse momento e aparece a notificação da Rocketseat ainda bem to meio confuso em relação ao this.
hahaha que massa isso mano!! hahaha tomara que te dê uma luz aí!! =D
#Excelente!
Gostei, me lembrou muito o principio OCP
Muito bom!! Parabéns!
Slc, to amando a rs
Nuss que dlç de explicação. Depois de eras tentando entender essa fita do this.
Boaaa Arthur!! Valeeu pelo feedback ! 💜
Parabéns meu caro!
obg Jean!
Podia fazer um de promises ou iterators
The Window.name property gets/sets the name of the window's browsing context
Note: window.name converts all stored values to their string representations using the toString method.
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.
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...
Obrigado pelo video :D
Essa aula me salvou kakaka
Aeee! 💜💜💜
Bom demais!
Cara, é muito complicado ativar o mic do fone e ouvir em tempo real no speaker? Como eu poderia fazer esta função? Valeu!
Qual tema vc usa no VS-CODE?
será que é tão difícil fazer algo bem padronizado? (a linguagem)
16:30 fiz no meu vs code e retornou o valor global estou estranhando demais essas coisas de escopo acho que mudaram algo
erro meu já corrigi
Heisenberg
entendedores entenderão hahah
Se colocasse Camila Isabela 34 eu diria que sou eu! Ha ha ha 💙
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
O que raios é VIZ??????
Agooora entendi o/
fragmento de POO?
Excelente vídeo! Você usa Linux? Se sim, qual distro?
Senão for mac, parece ser o Kubuntu ou Xubuntu
Opa. Valeu brother. Uso o Kali Linux
@@maykbrito Massa! Curto muito seus vídeos, didática excelente, parabéns!
Sou iniciante começando do 0 algum curso para recomendar para começar a programar desde ja agradeço
Cara, começa com o Curso em Vídeo do TH-cam. 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.
Repositório não existe :/
fala manin!! liberado.. obrigado pelo comentário!!
Cara, eu não entendi PN
this significa isto, esta? pensei que significasse DEMONIO, CAPETA, DESGRAÇA. opskaopskaopksoapsopakoska
aieuhaeiouahuihfe.. no JavaSpirit sim kkkkkk
Segundo
Luis. Filipe
Kauã
3 anos de estudo resumido em 48 minutos. SEN-SA-CI-O-NAL. value @Mayk Brito
hahahah que bom!!! obg pelo feedback
vim buscar bronze e achei ouro XD
Esse this no Javascript é uma bagunça, alguém por favor arrume essa bagunça
uma aula de 47 minutos e eu só entendo o idioma kkkk
maaas, contudo, toda via, muito obrigado pelo conteúdo!!!
Esse aprofundamento todo deveria ter no curso pago do Explorer, porque as explicações lá deixam muito a desejar..
Por isso que eu praticamente só uso TypeScript, JavaScript é uma salada que só por Deus.
que aflição ver vc colocar ";", no node nao precisa mais de ";"...tente nao usar vera que despoluirá todo o codigo
Não