Explique como `this` funciona em JavaScript
Não há uma explicação simples para this
; ela é um dos conceitos mais confusos do JavaScript. Uma explicação superficial é que o valor do this
depende de como a função é chamada. Tendo lido muitas explicações sobre this
online, Arnav Aggrawal é a explicação que foi mais clara. As seguintes regras se aplicam:
- Se a palavra-chave
new
é usada ao chamar a função,new
dentro da função é um objeto totalmente novo. - Se
apply
,call
, oubind
forem usados para chamar/criar uma função,this
dentro da função é o objeto passado como o argumento. - Se uma função é chamada como um método, como
obj.method()
—this
é o objeto do qual a função é uma propriedade. - Se uma função é chamada como uma chamada de função livre, significando que ele foi invocado sem nenhuma das condições presentes acima,
this
é o objeto global. Em um navegador, é o objetowindow
. Se em modo estrito ('use strict'
),this
seráundefined
em vez do objeto global. - Se se aplicarem múltiplas das regras acima, a regra que é maior ganha e definirá o valor
this
. - Se a função é uma arrow function ES2015, ela ignora todas as regras acima e recebe o valor
this
do seu escopo circundante no momento em que ele é criado.
Para uma explicação aprofundada, confira o artigo na Medium.
Você pode dar um exemplo de uma das maneiras como o trabalho com "this" mudou no ES2015?
ES2015 permite que você use arrow functions que usa o enclosing lexical scope. Isso geralmente é conveniente, mas impede quem chamou de controlar o contexto através de .call
ou .apply
—as consequências são que uma biblioteca como jQuery
não irá vincular corretamente o this
em suas funções de manipulador de eventos. Portanto, é importante ter isso em mente ao refatorar grandes aplicações legadas.