Chegamos a mais um post da minha saga de estudos em JavaScript.
No post de hoje irei falar sobre a palavra chave this.
This
this é um objeto de contexto, ele representa o contexto no qual o código atual está sendo executado.
E dependendo de onde o this é usado, podemos ter resultados diferentes.
Se usarmos o this na raíz do documento, por exemplo, ele irá referenciar o contexto global, no caso caso o window object.
console.log(this) // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
Observe o objeto abaixo:
let user = {
name: 'João',
age: 31,
blogPosts: ['Empadão de Frango', '4 receitas de purê de batata'],
logBlogPosts () {
console.log(`${this.name} escreveu os seguintes posts:`)
this.blogPosts.forEach(post => {
console.log(`- ${post}`)
})
}
}
user.logBlogPosts()
// Output
João escreveu os seguintes posts:
- Empadão de Frango
- 4 receitas de purê de batata
Quando invocamos o método logBlogPosts criado dentro do objeto user, o JavaScript faz com que o valor de this seja o objeto no qual o método está sendo usado.
Neste caso acima, o this está referenciando o próprio objeto user e por este motivo é possível acessar suas propriedades.
This e Arrow Functions
Observe que não utilizei arrow function para a criação do método logBlogPosts, e isso foi intencional, pois as arrow functions funcionam de forma diversa quando utilizamos o this.
Quando criamos um método utilizando function declaration, conforme o exemplo do método logBlogPosts criado no objeto user acima, o JavaScript atribui o this ao contexto daquele objeto.
Se usarmos arrow function, o JavaScript irá atribuir ao this, o contexto do objeto global, no caso o window object.
Então, quando for necessário usar um método dentro de um objeto, que tenha que referenciar o próprio objeto em que o método foi criado, precisamos que esse método seja declarado com function declaration e jamais com arrow function.
let user = {
name: 'João',
age: 31,
blogPosts: ['Empadão de Frango', '4 receitas de purê de batata'],
logBlogPosts: () => {
console.log(`${this.name} escreveu os seguintes posts:`)
}
}
user.logBlogPosts() // escreveu os seguintes posts:
Conforme visto no exemplo acima, o método logBlogPosts não teve o objeto user referenciado com o uso do this e com isso, não teve acesso a propriedade name.
Ficamos por aqui com mais um post.
Segue documentação da MDN sobre a palavra chave this
Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!
Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:
Top comments (0)