this em javascript
Oi Pessoas
Muitos programadores se confundem ao usar a keyword this, principalmente porque this em javaScript se comporta diferente de outras linguagens, além de ter modo restrito e não restrito.
Simplificando, this refere-se à um objeto de um determinado contexto, por exemplo, um método.
IMPORTANTE: Todos os exemplos podem ser executados no console do Navegador, no Chrome, tecle (Ctrl + Shift + J)
Para quem é iniciante
- O que é um objeto ?
Objeto é uma coleção de dados e/ou funções
Exemplo de objeto
const pessoa = {
nome: "Cebolinha",
idade: 80,
pai: "Mauricui de Sousa",
melhoAmiga: "Mônica"
}
- O que é um método ?
É uma ação de um objeto
Exemplo de método
const pessoa = {
nome: "Cebolinha",
correr: function() {
console.log(this);
}
}
No contexto global
Em um contexto global, this refere-se ao objeto global
// Em navegadores web, o objeto window é também o objeto global:
console.log(this === window); // true
// o objeto document é o proprietário de todos os demais objetos da página
console.log(this.document === document); // true
//Neste caso, tanto que podemos referenciar por this ou window
this.meuValor= 37;
console.log(this.meuValor); // 37
console.log(window.meuValor); // 37
console.log(meuValor); // 37
'use strict'
No exemplo abaixo, sem o uso do 'use strict', ao executarmos a função getThis, criada no escopo global, em algum navegador, vamos ter como retorno o objeto window.
function getThis () {
return this
}
console.log(getThis()) // Objeto window
Quando usarmos 'use strict', essa diretiva faz com que o this global seja undefined.
'use strict'
function getThis () {
return this
}
console.log(getThis()) // undefined
No contexto de objeto
Em um contexto de objeto, refere-se a instancia do objeto
Exemplo 1
const pessoa2 = {
nome: "Cebolinha",
correr: function() {
console.log(this);
}
}
pessoa2.correr(); // => Object {nome: "Cebolinha", correr: }
Exemplo 2
const pessoa = {
nome: "Cebolinha",
idade: 80,
aniversario: function() {
this.idade += 1;
}
}
console.log('Idade '+pessoa.idade + "."); // => Idade 80.
pessoa.aniversario(); // += 1
console.log('Idade '+pessoa.idade + "."); // => Idade 81.
Arrow Functions (ou funções de seta)
Nas arrow functions o this é definido pelo contexto da execução.
Não importa como for, o this do foo mantém o valor que recebeu quando foi criado.
Exemplo de **_this** em arrow function_
var objetoGlobal = this;
var minhaFuncaoArrow = (() => this);
//this assume o objeto global
console.log(minhaFuncaoArrow() === objetoGlobal); // true
//mesmo que seja chamado de outra função
var obj = {MeuMetodo: minhaFuncaoArrow};
console.log(obj.MeuMetodo() === objetoGlobal); // true
Mesmo que seja um método de um objeto mantem o valor no momento da criação
let exampleFunc = {
f1: function () {
console.log("exampleFunc f1", this);
let f2 = function () {
console.log("exampleFunc f2", this);
}
f2();
}
}
let exampleArrow = {
f1: () => {
console.log("exampleArrow f1", this);
let f2 = () => console.log("exampleArrow f2", this);
f2();
}
}
exampleFunc.f1();
exampleArrow.f1();
exampleF.f1();
// Resultado
// Objeto
// Window
exampleA.f1();
// Resultado
// Window
// Window
Se fosse simplificar, Arrow Functions substituem as functions, só que não. Tenho um post onde explico sobre Arrow Functions
Arrow Functions (ou funções de seta)
Marcelo Cabral Ghilardi ・ Feb 26 '20
#javascript #webdev #beginners #fullstack
Perdi Algo ?
Por favor, me diga se eu esqueci de algo !!
Referências
- https://medium.com/@raphalima8/arrow-functions-declara%C3%A7%C3%A3o-funcionamento-escopos-e-o-valor-de-this-9cb6449bca31
- https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos/B%C3%A1sico
- https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this
- https://dev.to/migben/let-s-learn-this-in-javascript-1ij2
- https://www.kirupa.com/html5/finding_elements_dom_using_querySelector.htm
- https://blog.da2k.com.br/2019/01/07/javascript-tudo-sobre-arrow-functions/
Top comments (2)
Muito bom, outros dois detalhes também seriam..
Obrigado, post dev.to/kabrau/arrow-functions-ou-f... atualizado