Escrevi este texto mais para eu mesmo consultar no futuro, mas você pode aprender algo lendo ele também, eu pulei várias explicações mas na internet você consegue encontrar fácil algo relacionado :)
Leia no seu computador, abra seu DevTools para comprovar os snippets, e vamos la!
O famigerado this e o global object
Você acorda 6am, está chuvendo muito, você pega um ônibus lotado em direção a Berrini, passa o dia meio molhado e meio seco, chega as 22 horas em casa exausto, coloca o casaco no sofa, olha para sua tartaruga e ela pergunta “Qual é o valor do this?”, você fica espantado olha para seu gato e ele resmunga “Que que é this?”… e você não sabe o que é mais estranho, animais falando, animais de estimação que você nunca teve falando com você, ou não saber que diabos é o valor do this no JavaScript.
No browser você pode verificar no seu console que existe tanto window, self e this todos apontando para uma coisa chamada Window.
No nodejs você tem o global e o this que apontam para um tal de global.
(se você não souber como executar este programa comente essa linha)
Tanto no nodejs quanto no browser, quando você usa o this fora do contexto de uma function/class, você está apontando para o objeto global que persiste por toda sua aplicação.
É por meio deste objeto global que conseguimos usar qualquer função do sistema, por exemplo a função parseInt, só é possível usa-la como na linha 1 abaixo, pois ela é disponibilizada através do objeto global.
No nodejs é quase identico, com exceção que não existe self e window, apenas this 0global.
No JS existe essa coisa chamada circular reference, que eu não tenho a menor ideia de como explicar, mas da uma olhada no código abaixo:
window.window me da um objeto que tem um window e isso continua infinitamente, a mesma coisa acontece com o self e pode ser até interchangeable window.self.window.self.self.self.window adivinha o que irá retornar? O mesmo acontece no nodejs com o global.
Da para criar um objeto deste tipo, definindo uma propriedade em um objeto que será igual a ele mesmo.
Meio estranho né? Sim!! Concordo. Tenta executar JSON.stringify(person) para você ver o que acontece… “Uncaught TypeError: Converting circular structure to JSON” :dead:
A poluição do Objeto Global
Quando os dinossauros ainda andavam pelas terras que hoje são as ruas de São Paulo, era muito comum usar variáveis globais, uma coisa que hoje em dia não é muito comum, sabe quando você faz um var nomeDaVar = ‘alguma coisa’… então, olha o que acontece.
Enquanto você usa nomeDaVar, é até ok, mas e se você declarar um var parseInt, o que deveria acontecer com a função this.parseInt? Pois é, ai começa uma grande variedade de possibilidades de confusão e conflitos de nomes, declarar variáveis dentro do escopo de funções é a melhor maneira de evitar poluir o escopo global, usando let e const também, e as legadas IIFE no JavaScript.
Let e Const muito se fala do let e do const, e dado o exemplo acima, em que definindo uma var ela fica defina diretamente no global object, o let e o const tem um comportamento diferente, em que:
O valor do this pode ser alterado dependendo o contexto dele, por isso, agora que estamos aware do global object, vamos ver um pouco sobre a criação de funções…
Funções
Depois de seu ritual para dormir, ainda perplexo de como foi bizarra a conversa sobre o this com uma tartaruga e um gato, você respira profundamente, fecha os olhos e imediatamente adormece, ao abrir os olhos no inconsciente de seu cérebro dorminhoco, você encontra um grupo de ovelhas que não estão pulando a cerquinha, elas estão em volta de um computador fervorosamente discutindo porque pulantes cercados o programa em JavaScript não está funcionando, quando você achou que teria um pouco de descanso, o trabalho só estava começando.
Qualquer programa em JavaScript que faz algo útil, muito provavelmente é composto por centenas de funções que se compõem, vamos discutir um pouco sobre como funções e o this se correlacionam de uma forma ou de outra.
Funções e o strict mode
Para começar, é interessante notar que o ‘use strict’ muda o valor do this para undefined dentro de funções, enquanto você continua podendo acessar o objeto global pelas outras referencias.
Funções , variáveis e escopo
Na primeira parte, mostrei como o var define propriedades no objeto global, porém dentro de funções as variáveis não escapam para o objeto global, é como se dentro de cada função tivesse seu próprio objeto local, porém mesmo assim ainda é possível definir variáveis que são expostas para o objeto global.
Também tem uma história bizarra de criação de uma variável global implicita, vou citar dois exemplos.. o primeiro com um for
Note que mesmo com o use strict, a variável items continua indo para o objeto global.
No caso abaixo, eu uso name e nick de forma que name e nick ficarão globais quando a função ser chamada.
Porém neste caso, diferente do caso do for, se usar o use strict o name e nick não ficarão disponíveis no objeto global, resultando no erro Reference Error pois name e nick não existem.
Por motivos de sanidade mental para ajudar as ovelhinhas, recomendamos que você sempre faça uso de let ou const, é bem normal em projetos maiores ter um verificador automatizado que não permite você definir variáveis sem o uso de um desses statements.
Formas de definir uma função
Há algumas formas de definir uma função no JavaScript, as que eu mais uso são:
É interessante que você se sinta a vontade com todas as formas de definir funções, também existe fatores de hoisting diferenciados para function, var, let e const, hoisting é um tema bem legal no JavaScript, vale a penas dar uma olhada no Function também.
Formas de invocar/chamar uma função
Também há diferentes formas de chamar uma função, uma função definida com function pode ser chamada assim:
Pode existe uma função que é executada no mesmo momento em que ela é retornada, chamávamos isso de IIFE:
Os parenteses no JavaScript
Eles são legais, pois qualquer código passado dentro dele é evaluated e então retornado, e o flow do código continua, um exemplo com operações aritméticas.
Não sei uma maneira sana de explicar os parenteses no JS um live codding seria bem mais simples, então eu vou para um tema que eu acho que é mais legal e aborda o this também.
Funções com constructors
Vamos fazer uma introdução com um exemplo de código
Tanta na linha 2 quanto na linha 10, são duas maneiras de definir classes no JavaScript, sendo que o segundo é o jeito que considero mais correto, veja que aqui o this é bem vindo, alias é onde ele realmente brilha.
Não irei explicar agora sobre ele, mas agradeço se alguém comentar com links para bons artigos sobre o tema.
Obrigado por ler, eu escrevi este texto em Maio de 2017, e agora em Dez de 2017 revisei ele no geral, e estou publicando. Antes que eu queria escrever mais, e ele se prolongue até Dezembro e 2018 hahahaha estou publicando. Melhor ele publico, do que perdido nos meus infinitos rascunhos.
