// TEST 1 const cliente = { saldo: 0, depositar: (valor) => { this.saldo += valor; } } cliente.depositar(10); console.log(cliente.saldo) // 0
// TEST 2 const cliente = { saldo: 0, depositar: function(valor) { this.saldo += valor; } } cliente.depositar(10); console.log(cliente.saldo) // 10
// Porquê TEST 1 resulta em 0 e não em 10, como no TEST 2?
Oi Gabriel, tudo bem?
No teste 1, você pode ver que se tentarmos chamar a função cliente.depositar(10) acontecerá um erro, falando que não podemos acessar a propriedade saldo de "undefined". Ou seja, está basicamente dizendo que o this é undefined.
Isso acontece porque o this possui um contexto diferente quando ele é acessado em uma função normal e em uma arrow function. Vamos dar um console.log(this) dentro da função arrow e dentro da função normal, para comparar os resultados:
depositar: (valor) => {
console.log(this)
// this.saldo += valor - Estou comentando essa linha para não dar erro na hora de chamar a função
}depositar: function(valor) {
console.log(this)
this.saldo += valor
}Você pode ver que o console.log() do primeiro teste (da função arrow) retornou undefined, enquanto o console.log() do segundo teste (da função normal), retornou o próprio objeto cliente.
Dentro de uma arrow function, this é definido à partir das funções onde foram definidas (se uma arrow function é criada em um escopo global, o this fará referência a esse escopo global). Portanto, nesse caso, o this fará referência ao objeto global, já que não possui o this pré-definido.
Ao contrário das funções regulares, as arrow functions não possuem um this próprio, apenas as funções regulares e o escopo global possuem o seu próprio this.
Espero ter ajudado, bons estudos =)