Aula: "this" pode variar

[Raquel]

O tal do this

É sempre uma pergunta recorrente né, mas o que diabos é esse this?

Gente, o this é complicado mesmo quando você chega do nada né MAS! estamos aqui para tirar essas dúvidas.

Eu sempre recomendo, quando alguém não entende o que é algum método ou função ou, nesse caso, variável no JavaScript - ou em qualquer linguagem de programação, diga-se de passagem - a minha sugestão é traduzir o nome dessa função, método ou variável.

O this, portanto, pode ser entendido como "isto" ou, ainda, "este" ou "esta". Faz ainda mais sentido quando se entende que o this se trata de contexto.

O this vai se referir ao contexto de um determinado bloco de código. É como se você estivesse falando "Aqui ó, é a este bloco de código que eu tô me referindo!"

Fora de qualquer bloco de código, o this vai se referir ao objeto global ("É isto aqui que eu tô me referindo agora!").

Dentro de uma função, o this vai depender de como esta função é chamada: numa chamada simples, que não está em modo estrito, o this não é definido pela chamada.

Já em modo estrito, o valor de this permanece seja qual for o definido ao entrar no contexto de execução.

As funções arrow não tem um this próprio, sendo o this definido lexicalmente, ou seja, seu valor é definido pelo contexto de execução onde está inserido.

function Pessoa(){
  this.idade = 0;

  setInterval(() => {
    this.idade++; // |this| corretamente se refere ao objeto Pessoa
  }, 1000);
}

var p = new Pessoa();

Para funções, você poderia dizer "Ó, é esta função aqui que eu tô falando!"

Além disso, para ajudar ainda mais os estudos, recomendo esse vídeo super detalhado sobre a variável this.

 

[mourabraz]

Olá pessoal, gostaria de complementar o que a colega escreveu.

O "this" pode parecer complicado de fato, mas na verdade não é! Normalmente o que mais complica (principalmente para quem já programa com outras linguagens de programação como JAVA ou C#, C++ etc) é o uso das letras "t", "h", "i", "s" (juntas) porque nos remetem, ou nos levam a uma analogia errada com o que sabemos de outras linguagens de programação. Se no JS tivessem dado outro nome a "isto" o seu entendimento não seria tão complicado.

Minha sugestão para quem vem de outras linguagens de programação (daquelas que fazem o uso do "this") é que não tentem fazer uma analogia na tentativa de entender o que o "this" é no mundo JS.

Resumidamente o "this" é uma referência a alguma coisa que será determinada de forma dinâmica (e daí o seu poder) em tempo de execução. [originalmente estavam grifadas as palavras "em tempo de execução", mas resolvi tirar e ainda penso em remove-las por completo porque já é dito de forma dinâmica, ficou redundante!] O "this" só existe dentro de um contexto de execução (Global, Funções e Modules (module pattern)) e dentre as opções possíveis aquela que mais cria falsas percepções é o uso do this" dentro do contexto de execução de funções. Assim, para entender, ou prever, o valor do "this" é necessário conhecer quem é que está criando esse contexto de execução, por outras palavras, como está essa função sendo chamada (invocada, executada).

(Att: o this comporta-se de forma diferente quando se trata de uma Arrow Funtion. Mas a meu ver, se o entendimento do this for bem sedimentado, excluindo-se as Arrow Function do mundo JS, durante esse estudo, ficará muito mais fácil, tanto entender o this dentro como fora das Arrow Function.... spoiler - nas Arrow Funtions como não existe o this ele passa a se comportar como uma variável normal... ***)

Abaixo vou colocar um quadro resumo (que fiz há algum tempo, infelizmente não traduzi). E esse quadro resumo tem uma falha que é a de não abordar o valor do "this" dentro do "module pattern".

(*** - esta parte não é importante, por hora - se o this, dentro da Arrow Funtion, se comportar como uma variável normal, quer dizer que a sua visibilidade - escopo - será determinado durante a fase 1 do parse, e, protanto, estático, e caso não tenha sido definido o seu valor será "pesquisado" nas variaveis que ficaram closure durante a sua definição e assim em diante...)

A minha ideia era ser breve e poder partilhar esse quadro. Espero que ajude. Caso prefiram uma abordagem mais detalhada (mais extensa), por favor, não hesite em falar, este assunto do this não é simples para ser entendido de primeira, leva um tempo que é super normal.
Se preferirem o quadro traduzido me avisem também que posso trocar depois...

Abraços!

 

[Raquel]

Como posso simplificar um número para ele ficar no formato monetário de algum lugar específico?

Uma pergunta bem específica, mas como aconteceu algumas vezes recentemente, resolvi trazer algumas soluções de como fazer essa conversão!

A primeira delas é o objeto Intl.Number.format, que formata especificamente para formatos monetários de vários locais. Dependendo do local especificado, a String será impressa diferente:

var numero = 123456.789

console.log(new Intl.NumberFormat().format(numero)) //sem especificar o local, ele tira pelo local do computador - se for Brasil, imprime 3.500

console.log(new Intl.NumberFormat('de-DE').format(numero)) //a divisão em alemão é igual à do Brasil, ponto para centenas e vírgula para os decimais

console.log(new Intl.NumberFormat('ar-EG').format(numero)) //em árabe, usa-se os dígitos árabes

console.log(new Intl.NumberFormat('en-IN').format(numero)) //a Índia usa separadores de milhares/cem mil/dez milhões

console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(numero)) //A chave de extensão nu requer um sistema de numeração, ex. decimal chinês

Além dela, existe também o toLocaleString, que é um método que pode ser tanto do objeto Date (para conversão de datas), quanto para Number (para conversões monetárias):

var numero = 3500;

console.log(numero.toLocaleString()) //imprime 3.500 - caso não seja informado o local, tal qual o NumberFormat

Os usos para conversão de números são muito parecidos com o do Number Format.

Já para conversão de datas:

var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0))

console.log(date.toLocaleString()) //também vai depender do local do computador, caso seja usado sem argumentos

console.log(date.toLocaleString('en-US')) //os EUA dividem as horas entre AM/PM para manhã e noite

console.log(date.toLocaleString('en-GB')) //no inglês britânico, as datas são dia-mês-ano e as horas são 24h, sem AM e PM

São métodos interessantes que tem os seus usos específicos em muito práticos!