Classe JavaScript

Resumo : neste tutorial, você aprenderá sobre a classe JavaScript e como usá-la de forma eficaz.

Uma classe JavaScript é um modelo para a criação de objetos . Uma classe encapsula dados e funções que manipulam dados.

Ao contrário de outras linguagens de programação, como Java e C# , as classes JavaScript são um açúcar sintático sobre a herança prototípica . Em outras palavras, as classes ES6 são apenas funções especiais .

Aulas anteriores ao ES6 revisitadas

Antes do ES6, o JavaScript não tinha conceito de classes. Para imitar uma classe, você geralmente usa o padrão construtor/protótipo conforme mostrado no exemplo a seguir:

function Person(name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
};

var john = new Person("John Doe");
console.log(john.getName());Linguagem de código:  JavaScript  ( javascript )

Saída:

John Doe

Como funciona.

Primeiro, crie a Personfunção construtora que possui um nome de propriedade chamado name. A getName()função é atribuída ao prototypepara que possa ser compartilhada por todas as instâncias do Persontipo.

Em seguida, crie uma nova instância do Persontipo usando o newoperador. O johnobjeto, portanto, é uma instância da herança prototípicaPerson e Objectpor meio .

As instruções a seguir usam o instanceofoperador para verificar se johné uma instância do tipo Personand Object:

console.log(john instanceof Person); // true
console.log(john instanceof Object); // trueLinguagem de código:  JavaScript  ( javascript )

Declaração de classe ES6

ES6 introduziu uma nova sintaxe para declarar uma classe conforme mostrado neste exemplo:

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}Linguagem de código:  JavaScript  ( javascript )

Esta Personclasse se comporta como o Persontipo do exemplo anterior. No entanto, em vez de usar um padrão construtor/protótipo, ele usa a classpalavra-chave.

Na Personclasse, constructor()é onde você pode inicializar as propriedades de uma instância. JavaScript chama automaticamente o constructor()método quando você instancia um objeto da classe.

O seguinte cria um novo Personobjeto, que chamará automaticamente o constructor()da Personclasse:

let john = new Person("John Doe");Linguagem de código:  JavaScript  ( javascript )

O getName()é chamado de método da Personclasse. Como uma função construtora, você pode chamar os métodos de uma classe usando a seguinte sintaxe:

objectName.methodName(args)Linguagem de código:  CSS  ( css )

Por exemplo:

let name = john.getName();
console.log(name); // "John Doe"Linguagem de código:  JavaScript  ( javascript )

Para verificar o fato de que as classes são funções especiais, você pode usar o typeofoperador of para verificar o tipo da Personclasse.

console.log(typeof Person); // functionLinguagem de código:  JavaScript  ( javascript )

Ele retorna functionconforme o esperado.

O johnobjeto também é uma instância dos tipos Persone Object:

console.log(john instanceof Person); // true
console.log(john instanceof Object); // trueLinguagem de código:  JavaScript  ( javascript )

Classe vs. tipo personalizado

Apesar das semelhanças entre uma classe e um tipo personalizado definido por meio de uma função construtora, existem algumas diferenças importantes.

Primeiro, as declarações de classe não são içadas como as declarações de função.

Por exemplo, se você colocar o código a seguir acima da Personseção de declaração de classe, obterá um arquivo ReferenceError.

let john = new Person("John Doe");Linguagem de código:  JavaScript  ( javascript )

Erro:

Uncaught ReferenceError: Person is not definedLinguagem de código:  JavaScript  ( javascript )

Segundo, todo o código dentro de uma classe é executado automaticamente no modo estrito. E você não pode mudar esse comportamento.

Terceiro, os métodos de classe não são enumeráveis . Se você usar um padrão construtor/protótipo, deverá usar o Object.defineProperty()método para tornar uma propriedade não enumerável.

Finalmente, chamar o construtor da classe sem o newoperador resultará em um erro conforme mostrado no exemplo a seguir.

let john = Person("John Doe");Linguagem de código:  JavaScript  ( javascript )

Erro:

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'Linguagem de código:  JavaScript  ( javascript )

Observe que é possível chamar a função construtora sem o newoperador. Neste caso, a função construtora se comporta como uma função regular.

Resumo

• Use a palavra-chave JavaScript classpara declarar uma nova classe.
• Uma classdeclaração é um açúcar sintático sobre a herança prototípica com melhorias adicionais.