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
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.
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();
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 !!
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!
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.
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
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...
Cara, começa com o Curso em Vídeo do RU-vid. 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.
