Nessa thread, você aprenderá:
✅ O que são classes e por que elas são utilizadas
✅ Como resolver os problemas de Acoplamento e Dependência que as classes geram
✅ Se existe a possibilidade de criar propriedades privadas
✅ Como fazer Herança com classes
Vem comigo! 👇
✅ O que são classes e por que elas são utilizadas
✅ Como resolver os problemas de Acoplamento e Dependência que as classes geram
✅ Se existe a possibilidade de criar propriedades privadas
✅ Como fazer Herança com classes
Vem comigo! 👇
🔥 Por que classes são utilizadas?
Classes são uma das formas de criar vários objetos parecidos.
Elas evitam que você digite manualmente as propriedades e métodos que cada objeto deve possuir.
Classes são uma das formas de criar vários objetos parecidos.
Elas evitam que você digite manualmente as propriedades e métodos que cada objeto deve possuir.
🔥 Como é a sintaxe de uma classe
Em JavaScript, a sintaxe básica de uma classe é a seguinte:
Em JavaScript, a sintaxe básica de uma classe é a seguinte:
Classes são, basicamente, "funções especiais".
É possível declará-las e atribuí-las à uma variável, ou retorná-las dentro de uma função:
É possível declará-las e atribuí-las à uma variável, ou retorná-las dentro de uma função:
Se simplesmente declararmos uma classe vazia e a invocarmos utilizando o `new`, um novo objeto é criado:
🔥 O que é o `constructor`
O `constructor` é um método especial que cria e inicializa um objeto gerado à partir de uma classe.
Dentro dele, você pode declarar as propriedades iniciais do objeto.
O `constructor` é um método especial que cria e inicializa um objeto gerado à partir de uma classe.
Dentro dele, você pode declarar as propriedades iniciais do objeto.
Caso você não declare um `constructor`, o JavaScript utiliza um `constructor` default por baixo dos panos.
Vamos declarar um `constructor` que recebe um parâmetro e atribui esse parâmetro à uma propriedade `firstAppearance`:
Vamos declarar um `constructor` que recebe um parâmetro e atribui esse parâmetro à uma propriedade `firstAppearance`:
Agora, podemos passar um argumento na invocação da classe `Reptile`.
Quando invocamos `new ClassName(value)`, duas coisas acontecem:
1️⃣ Um novo objeto é criado;
2️⃣ O parâmetro do `constructor` recebe o argumento passado para a invocação da classe.
Quando invocamos `new ClassName(value)`, duas coisas acontecem:
1️⃣ Um novo objeto é criado;
2️⃣ O parâmetro do `constructor` recebe o argumento passado para a invocação da classe.
Portanto, `smaug` é um novo objeto, que foi criado com uma propriedade `firstAppearance`, que recebeu a string 'The Hobbit':
🔥 4 Formas de se declarar métodos em classes
1️⃣ Métodos tradicionais
Vamos criar um método `getFirstAppearance`, que apenas retorna o valor de `firstAppearance`.
1️⃣ Métodos tradicionais
Vamos criar um método `getFirstAppearance`, que apenas retorna o valor de `firstAppearance`.
Para fazer isso, basta lembrarmos que o `this` dentro de uma classe referencia o novo objeto que a invocação da classe criou, `smaug`.
Então dentro do método, podemos retornar `this.firstAppearance`:
Então dentro do método, podemos retornar `this.firstAppearance`:
2️⃣ Métodos Getters
Observe que o o método que acabamos de escrever é um "getter".
O papel dele é apenas retornar o valor de uma propriedade ao ser invocado.
Neste caso, é possível utilizarmos o shorthand `get`.
Observe que o o método que acabamos de escrever é um "getter".
O papel dele é apenas retornar o valor de uma propriedade ao ser invocado.
Neste caso, é possível utilizarmos o shorthand `get`.
Quando invocamos o `get` antes do nome do método, podemos invocar o método como se ele fosse uma propriedade, omitindo os parênteses.
Observe também que renomeei o método para `firstTimeAppearance`, para evitar que método e propriedade possuam o mesmo nome:
Observe também que renomeei o método para `firstTimeAppearance`, para evitar que método e propriedade possuam o mesmo nome:
3️⃣ Métodos Setters
Existe também o shorthand `set`, caso seja necessário setar um novo valor para a propriedade 'firstAppearance'.
Ele também trabalha com a omissão dos parênteses, utilizando o operador de atribuição de propriedade:
Existe também o shorthand `set`, caso seja necessário setar um novo valor para a propriedade 'firstAppearance'.
Ele também trabalha com a omissão dos parênteses, utilizando o operador de atribuição de propriedade:
☝️ Mutação é uma má prática, evite sempre que possível. Mostrei que esse shorthand existe para que você não fique confuso quando vê-lo por aí.
4️⃣ Métodos Estáticos
É possível também escrever métodos estáticos, utilizando a palavra chave `static` antes do nome do método.
É possível também escrever métodos estáticos, utilizando a palavra chave `static` antes do nome do método.
Os métodos estáticos não são invocados à partir dos objetos gerados pela classe. Para utilizá-los, você deve invocar o nome da classe e encadear a invocação do método:
O código acima funciona da mesma forma que atribuir um método para a classe diretamente:
O valor do `this` na invocação `Reptile.getClassName()` é a própria classe `Reptile`.
Normalmente, métodos estáticos são utilizados para implementar funções que pertencem à classe, mas não aos objetos que ela cria.
Normalmente, métodos estáticos são utilizados para implementar funções que pertencem à classe, mas não aos objetos que ela cria.
🔥 Como fazer Herança utilizando Classes
Através da palavra-chave `extends`, você pode criar "sub classes".
A `extends` é invocada entre o nome da classe filha e o nome da classe pai.
Isso faz com que a subclasse herde propriedades e métodos da classe pai.
Através da palavra-chave `extends`, você pode criar "sub classes".
A `extends` é invocada entre o nome da classe filha e o nome da classe pai.
Isso faz com que a subclasse herde propriedades e métodos da classe pai.
Vamos criar uma classe `Dragon`, que será uma subclasse da classe `Reptile`:
Se fizermos apenas isso e exibirmos `Dragon` no console, um objeto vazio é retornado.
Dentro dessa subclasse, é necessário declararmos um `constructor`, que também recebe `firstAppearance` por parâmetro.
Dentro dessa subclasse, é necessário declararmos um `constructor`, que também recebe `firstAppearance` por parâmetro.
E dentro desse `constructor`, precisamos invocar o método `super`, passando `firstAppearance` como argumento.
Isso faz com que o `constructor` da classe pai exista nessa subclasse:
Isso faz com que o `constructor` da classe pai exista nessa subclasse:
🔥 Os problemas que as classes trazem
Se você está acostumado a programar em uma linguagem baseada em classes e está aprendendo JavaScript, desapegue-se.
Classes não existem em JavaScript.
Se você está acostumado a programar em uma linguagem baseada em classes e está aprendendo JavaScript, desapegue-se.
Classes não existem em JavaScript.
Elas são um syntax sugar, uma maneira mais "confortável" de se trabalhar com a Herança Prototipal da linguagem.
Escrevi uma thread e fiz um vídeo detalhando prototypes, os links estão nos últimos tweets =)
Escrevi uma thread e fiz um vídeo detalhando prototypes, os links estão nos últimos tweets =)
É possível, por exemplo, comprovarmos que o método `getFirstAppearance` existe no prototype de `Dragon`:
🔥 Propriedades privadas
Atualmente, a sintaxe de classes não possibilita, por exemplo, tornar a propriedade `this.firstAppearance` privada desta forma:
Atualmente, a sintaxe de classes não possibilita, por exemplo, tornar a propriedade `this.firstAppearance` privada desta forma:
Ou seja, a propriedade `firstAppearance` pode ser acessada fora da classe e ter o seu valor modificado:
Para tentar contornar isso, alguns desenvolvedores(as) utilizam um underscore como convenção.
Ele é apenas um sinal visual, uma indicação de que essa propriedade não deve ser acessada diretamente.
Ele é apenas um sinal visual, uma indicação de que essa propriedade não deve ser acessada diretamente.
No momento em que estou escrevendo esta thread, "private" e "public fields" estão disponíveis no Babel com o stage-3 habilitado.
Ou seja, nas versões das plataformas abaixo, é possível, por exemplo, escrever propriedades privadas.
*Imagem extraída de developer.mozilla.org
Ou seja, nas versões das plataformas abaixo, é possível, por exemplo, escrever propriedades privadas.
*Imagem extraída de developer.mozilla.org
Ao utilizarmos essa feature (que ainda está em fase experimental), é possível escrevermos propriedades privadas e públicas com a seguinte sintaxe:
🔥 Tight Coupling - Acoplamento e dependência entre classes
Vamos declarar uma classe `MyClass`.
A `MyClass` possuirá os métodos `method1`, que retorna uma string e um método `dontWant`, que lança um Erro:
Vamos declarar uma classe `MyClass`.
A `MyClass` possuirá os métodos `method1`, que retorna uma string e um método `dontWant`, que lança um Erro:
Agora, vamos declarar uma classe `MySubclass`.
Ela herda propriedades e métodos de `MyClass`, através do `extends`, e tem um método `method2`, que retorna uma string:
Ela herda propriedades e métodos de `MyClass`, através do `extends`, e tem um método `method2`, que retorna uma string:
Vamos então criar um objeto chamado `instance`, gerado pela classe `MySubclass`:
Mas, e se quisermos que esse objeto `instance` herde os métodos `method2` e `method1`, mas não herde o método `dontWant`?
É complicado fazermos isso utilizando herança entre classes.
Observe que o objeto `instance` tem acesso ao método `dontWant`, que está em seu prototype:
É complicado fazermos isso utilizando herança entre classes.
Observe que o objeto `instance` tem acesso ao método `dontWant`, que está em seu prototype:
Acoplamentos e dependência talvez sejam o "calcanhar de Aquiles" do design orientado à objetos.
Afinal, nós acabamos de fazer exatamente o oposto que queríamos.
Se você programa há algum tempo, sabe que acoplamentos são indesejados.
Afinal, nós acabamos de fazer exatamente o oposto que queríamos.
Se você programa há algum tempo, sabe que acoplamentos são indesejados.
🔥 Qual é a solução para resolver este acoplamento?
"Quebrarmos" os métodos `method1`, `dontWant` e `method2` em objetos é uma possível solução.
O resultado final seria um novo objeto que contém apenas as propriedades que queremos, através da utilização do spread operator:
"Quebrarmos" os métodos `method1`, `dontWant` e `method2` em objetos é uma possível solução.
O resultado final seria um novo objeto que contém apenas as propriedades que queremos, através da utilização do spread operator:
Para alcançarmos esse resultado, vamos refatorar o código e fazer com que, ao invés de métodos acoplados à classe, `method1`, `dontWant` e `method2` sejam objetos literais que contém seus respectivos métodos:
Perceba que agora, ao invés de herdarmos todos os métodos que uma classe possui, temos poder e flexibilidade para compor objetos formados por outros pequenos objetos individuais.
E consequentemente, a nossa aplicação fica mais flexível, componível e modularizável.
Composição é a palavra chave aqui.
Composição é a palavra chave aqui.
Acha que esse conteúdo pode ajudar + pessoas❓
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
Te vejo na próxima 🔥
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
Te vejo na próxima 🔥
Thread e vídeo sobre prototypes:
Baixe meu eBook gratuito e com exercícios 👇
