Informações sobre as classes JavaScript

introdução

javascript é um idioma baseado em prototipagem e cada objeto tem uma propriedade escondida interna chamada que pode ser usado para estender propriedades e métodos de objetos. Você pode obter mais informações sobre os protótipos de nossas informações do tutorial sobre os protótipos e a herança em javascript.

Até recentemente, os esforços usavam funções de construção para imitar um padrão de design orientado para objetos em JavaScript. A especificação de idioma ecmascript 2015, muitas vezes chamada ES6, introduziu aulas na linguagem JavaScript. As aulas JavaScript não oferecem realmente funcionalidades adicionais e muitas vezes se descrevem como elementos que fornecem “açúcar sintático” em comparação com protótipos e herança, à medida que oferecem sintaxe mais limpa e limpa. Como outras linguagens de programação usam classes, a sintaxe de classe JavaScript permite que os desenvolvedores alternem os idiomas mais diretamente.

As classes são funções

Uma classe JavaScript é um tipo de função. As aulas são declaradas com a palavra-chave class. Vamos usar a sintaxe da 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 ] de um objeto usando o método . Vamos usar isso para testar a função vazia que criamos.

Object.getPrototypeOf(x);

Output
ƒ () { }

Também podemos usar esse método em a classe que acabamos de criar.

Object.getPrototypeOf(y);

Output
ƒ () { }

O código declarado com function e class Mostra uma função . Com protótipos, qualquer função pode ser convertida em uma instância de construtores médios a palavra-chave new.

const x = function() {}// Initialize a constructor from a functionconst constructorFromFunction = new x();console.log(constructorFromFunction);

Output
x {}constructor: ƒ ()

Isto aplica-se também a classes.

const y = class {}// Initialize a constructor from a classconst constructorFromClass = new y();console.log(constructorFromClass);

Output
y {}constructor: class

Estes exemplos de Construtores de protótipos, caso contrário, eles estão vazios. No entanto, podemos ver que, sob a sintaxe ambos os métodos atingir o mesmo resultado final.

Defina uma classe

no protótipo tutorial e herança, nós preparamos um exemplo baseado na criação de caracteres em um jogo de papéis baseados em texto. Continuaremos com esse exemplo aqui para atualizar a sintaxe de funções para classes.

Uma função construtória é inicializada com vários parâmetros que seriam atribuídos como propriedades de this , em alusão à própria função. A primeira letra do identificador seria maiúscula por convenção.

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

Quando traduzirmos isso para a sintaxe da classe, é show então, vemos que sua estrutura é bastante semelhante.

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

Sabemos que uma função de construtor é projetada Para ser um esquema de objeto para o uso de maiúsculas na primeira letra do inicializador (opcional) e através da familiaridade com a sintaxe. A palavra-chave class comunica de uma maneira mais direta o objetivo de nossa função.

A única diferença na sintaxe de inicialização tem a ver com o uso da palavra-chave class em vez de function e com a atribuição das propriedades dentro de um método constructor()

Definir métodos

Common Practice com funções de construção é atribuir métodos diretamente para prototype em vez de inicialização, como pode ser visto no abaixo.

function Hero(name, level) { this.name = name; this.level = level;}// Adding a method to the constructorHero.prototype.greet = function() { return `${this.name} says hello.`;}

com classes, esta sintaxe é simplificada e O método pode ser adicionado diretamente às classes. Ao usar a definição do método de método introduzida no ES6, uma concisão ainda maior é obtida ao definir um método.

Vamos observar essas propriedades e métodos em ação. Vamos criar uma nova instância de Hero usando a palavra-chave new e atribuir alguns valores.

Se imprimirmos mais informações sobre o nosso novo objeto com , podemos apreciar mais detalhes sobre o que acontece com a inicialização de classe.

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

podemos ver no resultado que as funções constructor() e greet() Eles aplicaram para __proto__ ou ] de hero1 e não diretamente como Um método no objeto hero1. Embora isso seja revelado na criação de funções construtores, não é evidente ao criar classes. As aulas permitem uma sintaxe mais simples e sucinta, embora sacrifiquem alguma clareza no processo.

Expanda uma característica vantajosa das funções e classes de construção é que eles podem ser estendidos para novos esquemas de objetos com base no elemento principal. Isso impede a repetição de código para objetos semelhantes, mas eles precisam de recursos adicionais ou mais específicos.

Você pode criar novas funções de construção do elemento principal usando o método call(). No exemplo a seguir, criaremos uma classe de caractere mais específica chamada Mage e atribuiremos as propriedades de Hero Usando call(), além de adicionar uma propriedade.

// Creating a new constructor from the parentfunction Mage(name, level, spell) { // Chain constructor with call Hero.call(this, name, level); this.spell = spell;}

neste ponto, Podemos criar uma nova instância de Mage usando as mesmas propriedades do Hero, bem como um novo que adicionamos.

enviando hero2 para o console, podemos apreciar que criamos uma nova classe Mage Baseado no construtora.

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

com as classes ES6, a palavra-chave é usada de call para acessar as principais funções. Vamos usar extends para se referir à classe principal.

// Creating a new class from the parentclass Mage extends Hero { constructor(name, level, spell) { // Chain constructor with super super(name, level); // Add a new property this.spell = spell; }}

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

Nós vamos primo hero2 no console e veremos o resultado.

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

O resultado é quase exatamente o mesmo, com a diferença que na construção da classe ] está ligada ao elemento principal; Neste caso, Hero.

Abaixo é uma comparação paralela de todo o processo de inicialização, incorporação de métodos e herança de uma função de construtor e uma classe.

function Hero(name, level) { this.name = name; this.level = level;}// Adding a method to the constructorHero.prototype.greet = function() { return `${this.name} says hello.`;}// Creating a new constructor from the parentfunction Mage(name, level, spell) { // Chain constructor with call Hero.call(this, name, level); this.spell = spell;}

// Initializing a classclass Hero { constructor(name, level) { this.name = name; this.level = level; } // Adding a method to the constructor greet() { return `${this.name} says hello.`; }}// Creating a new class from the parentclass Mage extends Hero { constructor(name, level, spell) { // Chain constructor with super super(name, level); // Add a new property this.spell = spell; }}

embora A sintaxe é bem diferente, o resultado subjacente é quase o mesmo para ambos os métodos. As aulas oferecem uma alternativa mais concisa para criar esquemas de objetos e as funções do construtor descrevem mais precisamente o que acontece no fundo.

Conclusão

Neste tutorial, ele incorporou conhecimento sobre as semelhanças e diferenças entre as funções do construtor de JavaScript e as classes ES6. Ambas as classes e funções de construção imitam um modelo de herança orientada a objetos para JavaScript, que é uma linguagem patrimônio baseada em protótipo.

O património prototípico é fundamental para executar efetivamente como desenvolvedor de JavaScript. Familiarize-se com as aulas é extremamente útil, uma vez que nas bibliotecas populares de JavaScript à medida que a sintaxe é usada frequentemente class.