JavaScript evoluiu significativamente ao longo dos anos. Em particular, com a introdução do ES6, programar com classes tornou-se muito mais fácil. O antigo método de criação de classes usando protótipos e funções construtoras era muitas vezes complicado e propenso a erros. Neste tutorial, você aprenderá como utilizar a nova sintaxe de class de forma eficaz e quais as diferenças entre a antiga e a nova forma de escrita. Além disso, você aprenderá como expandir sua estrutura de classes através da herança.
Principais descobertas
- A nova sintaxe de class permite uma forma de definição mais clara e compacta.
- O uso de construtores é mais simples e não requer protótipos separados.
- A funcionalidade por trás da sintaxe de class permanece baseada em protótipos.
Guia passo a passo
1. Entendendo a antiga forma de escrita
Para reconhecer as vantagens da nova sintaxe de classes, vamos primeiro olhar para o antigo método. Aqui, uma função construtora foi criada e os métodos foram adicionados através do protótipo.
Se você quiser criar um novo objeto, isso é feito com new Shape(1, 100, 200). Depois, o objeto shape pode ser usado para acessar as propriedades.
2. Exibindo os valores
Para garantir que nossa instância do objeto funcione corretamente, vamos exibir as propriedades x e y.
3. Introduzindo a nova sintaxe de class
Agora, vamos mudar para a nova sintaxe de class, que está disponível a partir do ES6.
As mudanças são evidentes: você não precisa mais de um protótipo separado. Em vez disso, você define todos os métodos dentro da própria classe.
4. Criando objetos com a nova classe
A criação de um objeto com a nova sintaxe ocorre da mesma forma que antes. Você usa new para gerar uma instância da classe Shape.
5. Usando a nova classe
O uso da classe recém-definida é idêntico ao antigo método. Você pode usar a instância shape1 para acessar os valores e usar o método move.
6. Herança em classes
Mais uma vantagem da sintaxe de class é a possibilidade de herança. Se você quiser criar uma nova classe que herde de uma classe existente, pode usar a palavra-chave extends.
Nesse caso, o construtor da classe filha super() chama o construtor da classe pai. Isso permite que você utilize as propriedades de Shape e, ao mesmo tempo, defina propriedades exclusivas para Rectangle.
7. Conclusão sobre a declaração de class
A sintaxe de class não apenas torna sua base de código mais organizada, mas também permite uma estruturação mais clara ao trabalhar com conceitos orientados a objetos. Você pode não apenas criar classes, mas também construir hierarquias de herança complexas, o que torna seu código mais flexível e fácil de manter.
Resumo – A nova sintaxe de classes em JavaScript: ES6 até ES13
Neste tutorial, você aprendeu como utilizar a nova sintaxe de class em JavaScript do ES6 até o ES13 de forma eficaz. O antigo método de formação de classes era muitas vezes complicado e propenso a erros, enquanto a nova sintaxe permite uma estrutura clara e simples. Além disso, você aprendeu os fundamentos da herança através da sintaxe extends, para expandir ainda mais suas classes.
Perguntas frequentes
Qual é a diferença entre a antiga e a nova sintaxe de classes?A antiga método usa funções construtoras e protótipos, enquanto a nova sintaxe simplifica a definição e uso de classes.
Por que eu deveria usar a nova sintaxe de class?Ela oferece uma forma mais clara, compacta e intuitiva de definir classes, melhorando a manutenção e legibilidade do código.
Como funciona a herança com a sintaxe de class?Sua classe pode herdar funcionalidades de outra classe através da palavra-chave extends, chamando o construtor da classe pai com super().
