Madame Lelica

Introdução

o JavaScript é uma linguagem baseada em protótipos, e cada objeto em JavaScript tem uma interna escondida propriedade chamada ] que pode ser usado para estender a propriedades e métodos de objetos. Você pode ler mais sobre protótipos em nossa compreensão protótipos e herança no tutorial JavaScript.

até recentemente, Desenvolvedores industriais usavam funções construtoras para imitar um padrão de projeto orientado a objetos em JavaScript., A especificação de linguagem ECMAScript 2015, muitas vezes referido como ES6, introduziu classes para a linguagem JavaScript. Classes em JavaScript na verdade não oferecem funcionalidade adicional, e são muitas vezes descritos como fornecendo “açúcar sintático” sobre protótipos e herança, na medida em que eles oferecem uma sintaxe mais limpa e mais elegante. Como outras linguagens de programação usam classes, a sintaxe de classe em JavaScript torna mais fácil para os desenvolvedores se moverem entre linguagens.

Classes são funções

Uma classe JavaScript é um tipo de função., As Classes são declaradas com a palavra-chave

. Usaremos a sintaxe de expressão de função para inicializar uma sintaxe de expressão de função e classe para inicializar uma classe.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

podemos acessar o ] de um objeto usando o Object.getPrototypeOf() método. Vamos usar isso para testar a função vazia que criamos.

Object.getPrototypeOf(x);

Output
ƒ () { }

também podemos utilizar esse método na classe que acabamos de criar.,

Object.getPrototypeOf(y);

Output
ƒ () { }

O código declarado com function e class ambos de retorno de uma função ]. Com protótipos, qualquer função pode se tornar uma instância Construtora usando a palavra-chave new.

Output
x {}constructor: ƒ ()

isto também se aplica às classes.

Output
y {}constructor: class

estes exemplos de construtores protótipos estão vazios, mas podemos ver como sob a sintaxe, ambos os métodos estão alcançando o mesmo resultado final.,

definindo uma classe

nos protótipos e tutorial de herança, nós criamos um exemplo baseado em torno da criação de caracteres em um jogo de rpg baseado em texto. Vamos continuar com este exemplo aqui para atualizar a sintaxe de funções para classes.

uma função de construtor é inicializada com um número de parâmetros, que seriam atribuídos como propriedades de this, referindo-se à função em si. A primeira letra do identificador seria capitalizada por convenção.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

quando traduzimos isto para a sintaxe da classe, mostrada abaixo, vemos que está estruturada de forma muito semelhante.classe

// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}

sabemos que uma função de construtor é destinada a ser um modelo de objeto pela capitalização da primeira letra do inicializador (que é opcional) e através da familiaridade com a sintaxe. Theclass keyword communicates in a more straightform the objective of our function.,

A única diferença na sintaxe de inicialização é usar o class palavra-chave em vez de function, e atribuir as propriedades dentro de uma constructor() método.

formas de Definição

A prática comum com as funções do construtor é atribuir métodos diretamente para o prototype em vez de na inicialização, como visto no greet() método abaixo.

com classes esta sintaxe é simplificada, e o método pode ser adicionado diretamente à classe., Usando a definição de método shorthand introduzida no ES6, definir um método é um processo ainda mais conciso.classe

vamos dar uma olhada nestas propriedades e métodos em ação. Vamos criar uma nova instância de Hero usando onew palavra-chave, e atribuir alguns valores.

const hero1 = new Hero('Varg', 1);

If we print out more information about our new object with console.log(hero1), we can see more details about what is happening with the class initialization.,

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

podemos ver a saída que o constructor() e greet() funções foram aplicados para __proto__, ou ] de hero1 e não diretamente como um método de hero1 objeto. Enquanto isso é claro ao fazer funções construtoras, não é óbvio ao criar classes. As Classes permitem uma sintaxe mais simples e sucinta, mas sacrificam alguma clareza no processo.,

estender uma classe

uma característica vantajosa das funções e classes construtoras é que elas podem ser estendidas em novas plantas de objetos baseadas fora do Pai. Isso impede a repetição de código para objetos que são similares, mas precisam de algumas características adicionais ou mais específicas.

novas funções de construção podem ser criadas a partir do pai usando o método call()., No exemplo abaixo, vamos criar uma classe de personagem chamado Mage, e atribuir as propriedades de Hero utilizando a tag call(), bem como a adição de uma propriedade adicional.

neste ponto, podemos criar uma nova instância de Mage usando as mesmas propriedades de Hero além de um novo, nós adicionamos.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Enviar hero2 para o console, podemos ver que nós temos criado um novo Mage baseado fora o construtor.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

com classes ES6, a palavra-chave é usada no lugar decall para aceder às funções-mãe. Usaremos extends para se referir à classe pai.classe

Agora podemos criar uma nova instância Mage da mesma maneira.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

vamos imprimir hero2 para a consola e ver o resultado.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

A saída é quase exatamente o mesmo, exceto que, na construção de classe ] está ligado para o pai, neste caso Hero.

abaixo está uma comparação lado a lado de todo o processo de inicialização, adicionando métodos, e herança de uma função construtora e uma classe.

embora a sintaxe seja bem diferente, o resultado subjacente é quase o mesmo entre ambos os métodos. Classes nos dão uma forma mais concisa de criar projetos de objetos, e funções de construtor descrevem com mais precisão o que está acontecendo sob o capô.

conclusão

neste tutorial, aprendemos sobre as semelhanças e diferenças entre funções de construção JavaScript e classes ES6. Ambas as classes e construtores imitam um modelo de herança orientado a objetos para JavaScript, que é uma linguagem de herança baseada em protótipos.,

compreender a herança prototípica é fundamental para ser um Desenvolvedor JavaScript eficaz. Estar familiarizado com classes é extremamente útil, já que bibliotecas populares de JavaScript, como Reat, fazem uso frequente da sintaxe class.