CodeGym /Cursos /Frontend SELF PT /Sintaxe de classes

Sintaxe de classes

Frontend SELF PT
Nível 39 , Lição 4
Disponível

5.1 Declaração de classe

Com a introdução do ECMAScript 6 (ES6) no JavaScript, surgiu uma nova estrutura para criar objetos e gerenciar a herança — a palavra-chave class. As classes fornecem uma sintaxe mais conveniente e compreensível para criar objetos e trabalhar com protótipos.

Classes em JavaScript — são açúcar sintático sobre o sistema de herança prototípica existente. Eles fazem a criação e o gerenciamento de objetos mais claros e estruturados.

Declaração de classe

Uma classe em JavaScript é declarada usando a palavra-chave class, seguida pelo nome da classe. O corpo da classe é delimitado por chaves {}.

Exemplo:

JavaScript
    
      class Person {
        // Método da classe
        greet() {
          console.log('Hello!');
        }
      }

      // Criando uma instância da classe
      const person = new Person();
      person.greet(); // Output: Hello!
    
  

Expressão de classe

As classes podem ser declaradas tanto por declaração quanto por expressão. As expressões de classe podem ser nomeadas ou anônimas.

Exemplo de classe nomeada:

JavaScript
    
      const Person = class PersonClass {
        greet() {
          console.log('Hello!');
        }
      };

      const person = new Person();
      person.greet(); // Output: Hello!
    
  

Exemplo de classe anônima:

JavaScript
    
      const Person = class {
        greet() {
          console.log('Hello!');
        }
      };

      const person = new Person();
      person.greet(); // Output: Hello!
    
  

5.2 Campos e métodos de classes

Propriedades de classes

Propriedades de classes em ES6 só podem ser declaradas dentro do constructor. No entanto, em versões mais recentes do JavaScript (ES2022) foram introduzidos campos de classe, permitindo declarar propriedades fora do constructor.

Exemplo de uso de propriedades no constructor:

JavaScript
    
      class User {
        constructor(username, email) {
          this.username = username;
          this.email = email;
        }
      }

      const user = new User('john_doe', 'john@example.com');

      console.log(user.username); // "john_doe"
      console.log(user.email); // "john@example.com"
    
  

Exemplo de uso de campos de classe (ES2022):

JavaScript
    
      class User {
        username = 'default_username';
        email = 'default@example.com';

        constructor(username, email) {
          this.username = username;
          this.email = email;
        }
      }

      const user = new User('john_doe', 'john@example.com');

      console.log(user.username); // "john_doe"
      console.log(user.email); // "john@example.com"
    
  

Explicação:

  • No primeiro exemplo, as propriedades username e email são declaradas e inicializadas dentro do construtor
  • No segundo exemplo, as propriedades username e email são declaradas fora do construtor como campos da classe

Métodos da classe

Uma classe pode conter métodos, que são definidos dentro do corpo da classe. Esses métodos são automaticamente adicionados ao protótipo dos objetos criados.

Exemplo de métodos da classe:

JavaScript
    
      class Animal {
        speak() {
          console.log('Animal speaks');
        }

        eat() {
          console.log('Animal eats');
        }
      }

      const animal = new Animal();
      animal.speak(); // Output: Animal speaks
      animal.eat();   // Output: Animal eats
    
  

3.3 Exemplos de uso de classes

Criando objetos complexos

Classes permitem criar objetos complexos com vários métodos e propriedades.

Exemplo:

JavaScript
    
      class Car {
        constructor(brand, model) {
          this.brand = brand;
          this.model = model;
        }

        startEngine() {
          console.log(`${this.brand} ${this.model} motor ligado.`);
        }

        stopEngine() {
          console.log(`${this.brand} ${this.model} motor desligado.`);
        }
      }

      const myCar = new Car('Toyota', 'Camry');
      myCar.startEngine(); // Output: Toyota Camry motor ligado.
      myCar.stopEngine();  // Output: Toyota Camry motor desligado.
    
  
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION