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 Person
função construtora que possui um nome de propriedade chamado name
. A getName()
função é atribuída ao prototype
para que possa ser compartilhada por todas as instâncias do Person
tipo.
Em seguida, crie uma nova instância do Person
tipo usando o new
operador. O john
objeto, portanto, é uma instância da herança prototípicaPerson
e Object
por meio .
As instruções a seguir usam o instanceof
operador para verificar se john
é uma instância do tipo Person
and Object
:
console.log(john instanceof Person); // true
console.log(john instanceof Object); // true
Linguagem 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 Person
classe se comporta como o Person
tipo do exemplo anterior. No entanto, em vez de usar um padrão construtor/protótipo, ele usa a class
palavra-chave.
Na Person
classe, 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 Person
objeto, que chamará automaticamente o constructor()
da Person
classe:
let john = new Person("John Doe");
Linguagem de código: JavaScript ( javascript )
O getName()
é chamado de método da Person
classe. 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 typeof
operador of para verificar o tipo da Person
classe.
console.log(typeof Person); // function
Linguagem de código: JavaScript ( javascript )
Ele retorna function
conforme o esperado.
O john
objeto também é uma instância dos tipos Person
e Object
:
console.log(john instanceof Person); // true
console.log(john instanceof Object); // true
Linguagem 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 Person
seçã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 defined
Linguagem 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 new
operador 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 new
operador. Neste caso, a função construtora se comporta como uma função regular.
Resumo
- Use a palavra-chave JavaScript
class
para declarar uma nova classe. - Uma
class
declaração é um açúcar sintático sobre a herança prototípica com melhorias adicionais.