One place for hosting & domains

      classes

      Comprendre les classes en JavaScript


      Introduction

      JavaScript est un langage basé sur des prototypes, et chaque objet en JavaScript possède une propriété interne cachée appelée [[Prototype]] qui peut être utilisée pour étendre les propriétés et les méthodes des objets. Vous pouvez en savoir plus sur les prototypes dans notre tutoriel Comprendre les prototypes et l’héritage en JavaScript.

      Jusqu’à récemment, les développeurs industriels utilisaient des fonctions de constructeur pour imiter un modèle de conception orienté objet en JavaScript. La spécification de langage ECMAScript 2015, souvent appelée ES6, a introduit des classes dans le langage JavaScript. Les classes en JavaScript n’offrent pas réellement de fonctionnalités supplémentaires, et sont souvent décrites comme fournissant du « sucre syntaxique » par rapport aux prototypes et à l’héritage, en ce sens qu’elles offrent une syntaxe plus propre et plus élégante. Comme d’autres langages de programmation utilisent des classes, la syntaxe des classes en JavaScript permet aux développeurs de passer plus facilement d’un langage à l’autre.

      Les classes sont des fonctions

      Une classe JavaScript est un type de fonction. Les classes sont déclarées avec le mot-clé class. Nous utiliserons la syntaxe d’expression de fonction pour initialiser une fonction et la syntaxe d’expression de classe pour initialiser une classe.

      // Initializing a function with a function expression
      const x = function() {}
      
      // Initializing a class with a class expression
      const y = class {}
      

      Nous pouvons accéder au [[Prototype]] d’un objet en utilisant la méthode Object.getPrototypeOf(). Utilisons cela pour tester la fonction vide que nous avons créée.

      Object.getPrototypeOf(x);
      

      Output

      ƒ () { [native code] }

      Nous pouvons également utiliser cette méthode sur la classe que nous venons de créer.

      Object.getPrototypeOf(y);
      

      Output

      ƒ () { [native code] }

      Les codes déclarés avec function et class renvoient tous deux une fonction [[Prototype]]. Avec les prototypes, toute fonction peut devenir une instance de constructeur en utilisant le mot-clé new.

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

      Output

      x {} constructor: ƒ ()

      Cela s’applique également aux classes.

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

      Output

      y {} constructor: class

      Ces exemples de constructeurs de prototypes sont par ailleurs vides, mais nous pouvons voir comment, au-delà de la syntaxe, les deux méthodes aboutissent au même résultat final.

      Définir une classe

      Dans le tutoriel sur les prototypes et l’héritage, nous avons créé un exemple basé sur la création de personnages dans un jeu de rôle en mode texte. Continuons avec cet exemple pour modifier la syntaxe en la faisant passer des fonctions aux classes.

      Une fonction de constructeur est initialisée avec un certain nombre de paramètres, qui seraient attribués comme propriétés de this, en référence à la fonction elle-même. La première lettre de l’identifiant serait en majuscule par convention.

      constructor.js

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

      Lorsque nous traduisons cela dans la syntaxe de classe, illustrée ci-dessous, nous constatons qu’elle est structurée de manière très similaire.

      class.js

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

      Nous savons qu’une fonction de constructeur est censée être un plan d’objet par la capitalisation de la première lettre de l’initialiseur (qui est facultative) et par la familiarité avec la syntaxe. Le mot-clé class communique de manière plus directe l’objectif de notre fonction.

      La seule différence dans la syntaxe de l’initialisation est l’utilisation du mot-clé class au lieu de function, et l’attribution des propriétés à l’intérieur d’une méthode constructor ().

      Définir les méthodes

      La pratique courante avec les fonctions de constructeur est d’assigner les méthodes directement au prototype plutôt que dans l’initialisation, comme on le voit dans la méthode greet() ci-dessous.

      constructor.js

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

      Avec les classes, cette syntaxe est simplifiée, et la méthode peut être ajoutée directement à la classe. En utilisant la syntaxe simplifiée de définition de méthode introduite dans l’ES6, la définition d’une méthode est un processus encore plus concis.

      class.js

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

      Examinons ces propriétés et ces méthodes en action. Nous allons créer une nouvelle instance de Hero en utilisant le mot-clé new, et lui attribuer quelques valeurs.

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

      Si nous imprimons plus d’informations sur notre nouvel objet avec console.log(hero1), nous pouvons voir plus de détails sur ce qui se passe avec l’initialisation de la classe.

      Output

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

      Nous pouvons voir dans la sortie que les fonctions constructor() et greet() ont été appliquées au __proto__, ou [[Prototype]] de hero1, et non directement comme méthode sur l’objet hero1. Si cela est évident lors de la création de fonctions de constructeur, ce n’est pas le cas lors de la création de classes. Les classes permettent une syntaxe plus simple et plus succincte, mais sacrifient une certaine clarté dans le processus.

      Étendre une classe

      L’une des caractéristiques avantageuses des fonctions de constructeur et des classes est qu’elles peuvent être étendues à de nouveaux plans d’objet basés sur le parent. Cela permet d’éviter la répétition du code pour des objets qui sont similaires mais qui nécessitent des caractéristiques supplémentaires ou plus spécifiques.

      De nouvelles fonctions de constructeur peuvent être créées à partir du parent en utilisant la méthode call(). Dans l’exemple ci-dessous, nous allons créer une classe de personnage plus spécifique appelée Mage, et lui attribuer les propriétés de Hero en utilisant call(), tout en ajoutant une propriété supplémentaire.

      constructor.js

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

      À ce stade, nous pouvons créer une nouvelle instance de Mage en utilisant les mêmes propriétés que celles de Hero, ainsi qu’une nouvelle propriété que nous avons ajoutée.

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

      En envoyant hero2 à la console, nous pouvons voir que nous avons créé un nouveau Mage basé sur le constructeur.

      Output

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

      Avec les classes ES6, le mot-clé super est utilisé à la place de call pour accéder aux fonctions parents. Nous utiliserons extends pour renvoyer à la classe parent.

      class.js

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

      Nous pouvons maintenant créer une nouvelle instance Mage de la même manière.

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

      Nous allons imprimer hero2 sur la console et visualiser le résultat.

      Output

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

      Le résultat est presque exactement le même, sauf que dans la construction de la classe, le [[Prototype]] est lié au parent, dans ce cas Hero.

      Vous trouverez ci-dessous une comparaison côte à côte de l’ensemble du processus d’initialisation, d’ajout de méthodes et d’héritage d’une fonction de constructeur et d’une classe.

      constructor.js

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

      class.js

      // Initializing a class
      class 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 parent
      class Mage extends Hero {
          constructor(name, level, spell) {
              // Chain constructor with super
              super(name, level);
      
              // Add a new property
              this.spell = spell;
          }
      }
      

      Bien que la syntaxe soit assez différente, le résultat sous-jacent est presque le même entre les deux méthodes. Les classes nous donnent un moyen plus concis de créer des plans d’objets, et les fonctions de constructeur décrivent plus précisément ce qui se passe sous le capot.

      Conclusion

      Dans ce tutoriel, nous avons découvert les similitudes et les différences entre les fonctions de constructeur JavaScript et les classes ES6. Les classes et les constructeurs imitent un modèle d’héritage orienté objet en JavaScript, qui est un langage d’héritage basé sur un prototype.

      Comprendre l’héritage des prototypes est primordial pour être un développeur JavaScript efficace. Il est extrêmement utile de se familiariser avec les classes, car les bibliothèques JavaScript populaires telles que React utilisent fréquemment la syntaxe class.



      Source link

      How To Modify Attributes, Classes, and Styles in the DOM


      Introdução

      No tutorial anterior nesta série, “Como fazer alterações no DOM,” falamos sobre como criar, inserir, substituir e remover elementos do Modelo de Objeto de Documentos (DOM) com métodos integrados. Ao ampliar sua capacidade de gerenciar o DOM, você se tornará mais capacitado para utilizar as funcionalidades interativas do JavaScript e modificar elementos Web.

      Neste tutorial, vamos aprender como fazer mais alterações no DOM, modificando estilos, classes e outros atributos de nós do elemento HTML. Isso dará a você uma maior compreensão sobre como manipular elementos essenciais no DOM.

      Revisão de seleção de elementos

      Até recentemente, a biblioteca de JavaScript chamada jQuery era a mais usada para selecionar e modificar elementos no DOM. O jQuery simplificou o processo de selecionar um ou mais elementos e de aplicar alterações a todos eles ao mesmo tempo. Em “Como acessar os elementos no DOM,” analisamos os métodos DOM para apreender e trabalhar com nós no vanilla JavaScript.

      Para revisão, o document.querySelector() e o document.getElementById() são os métodos usados para acessar um único elemento. Ao usar um div com um atributo id no exemplo abaixo, poderemos acessar aquele elemento de qualquer maneira.

      <div id="demo-id">Demo ID</div>
      

      O método do querySelector() é mais robusto no ponto de que ele pode selecionar um elemento na página por qualquer tipo de seletor.

      // Both methods will return a single element
      const demoId = document.querySelector('#demo-id');
      

      Ao acessar um único elemento, podemos atualizar facilmente uma parte do elemento como o texto dentro dele.

      // Change the text of one element
      demoId.textContent = 'Demo ID text updated.';
      

      No entanto, ao acessar vários elementos por um seletor comum, como uma classe específica, precisamos percorrer todos os elementos na lista. No código abaixo, temos dois elementos div com um valor de classe comum.

      <div class="demo-class">Demo Class 1</div>
      <div class="demo-class">Demo Class 2</div>
      

      Vamos usar o querySelectorAll() para captar todos os elementos com demo-class aplicado a eles e usaremos o forEach()para percorrê-los e aplicar uma alteração. Também é possível acessar um elemento específico com o querySelectorAll() da mesma forma que você utilizaria um array — usando a notação entre parênteses.

      // Get a NodeList of all .demo elements
      const demoClasses = document.querySelectorAll('.demo-class');
      
      // Change the text of multiple elements with a loop
      demoClasses.forEach(element => {
        element.textContent = 'All demo classes updated.';
      });
      
      // Access the first element in the NodeList
      demoClasses[0];
      

      Esta é uma das diferenças mais importantes que você deve saber ao passar do jQuery para o vanilla JavaScript. Muitos exemplos de modificação de elementos não irão explicar o processo de aplicação desses métodos e propriedades a vários elementos.

      As propriedades e métodos neste artigo serão, muitas vezes, anexadas aos event listeners para responder aos métodos de seleção via cliques, passar o mouse ou outros gatilhos.

      Nota: os métodos getElementsByClassName() e o getElementsByTagName() retornarão coleções do HTML que não têm acesso ao método forEach() que o querySelectorAll() tem. Nestes casos, será necessário usar um padrão para for loop iterar na coleção.

      Modificando atributos

      Os atributos são valores que contêm informações adicionais sobre elementos do HTML. Normalmente, eles vêm em pares de nome/valor e podem ser essenciais dependendo do elemento.

      Alguns dos atributos do HTML mais comuns são os atributos src de uma tag img, o href de uma tag a, class, id e style. Para obter uma lista completa de atributos do HTML, veja a lista de atributos na Rede de Desenvolvedores da Mozilla. Os elementos personalizados que não fazem parte do padrão do HTML serão anexados no início com o data-.

      No JavaScript, temos quatro métodos para modificar atributos do elemento:

      Método Descrição Exemplo
      hasAttribute() Devolve valores lógicos boolianos do tipo true ou false element.hasAttribute('href');
      getAttribute() Retorna o valor de um atributo especificado ou null element.getAttribute('href');
      setAttribute() Adiciona ou atualiza o valor de um atributo especificado element.setAttribute('href', 'index.html');
      removeAttribute() Remove um atributo de um elemento element.removeAttribute('href');

      Vamos criar um novo arquivo de HTML com uma tag img com um atributo. Vamos vincular uma imagem pública disponível através de um URL, mas você pode trocá-la por uma imagem local alternativa se estiver trabalhando offline.

      attributes.html

      <!DOCTYPE html>
      <html lang="en">
      <body>
      
          <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">
      
      </body>
      
      </html>
      

      Quando carregar o arquivo de HTML acima em um navegador Web moderno e abrir o Console do desenvolvedor integrado, deverá ver algo assim:

      First rendering of classes.html

      Agora, podemos testar todos os métodos de atributo rapidamente.

      // Assign image element
      const img = document.querySelector('img');
      
      img.hasAttribute('src');                // returns true
      img.getAttribute('src');                // returns "...shark.png"
      img.removeAttribute('src');             // remove the src attribute and value
      

      Neste ponto, você terá removido o atributo src e o valor associado ao img, mas poderá redefinir aquele atributo e atribuir o valor para uma imagem alternativa com o img.setAttribute():

      img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
      

      Second rendering of classes.html

      Finalmente, podemos modificar o atributo diretamente atribuindo um novo valor ao atributo como uma propriedade do elemento, definindo o src de volta para o arquivo shark.png

      img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
      

      Qualquer atributo pode ser editado desta maneira, bem como com os métodos acima.

      Os métodos hasAttribute() e getAttribute() são normalmente usados com declarações condicionais, e os métodos setAttribute() e removeAttribute() são usados para modificar diretamente o DOM.

      Modificando as classes

      O atributo classe corresponde aos seletores de classe CSS. Não pode ser confundido com as classes ES6, um tipo especial de função do JavaScript.

      As classes CSS são usadas para aplicar estilos a vários elementos, ao contrário das IDs que só podem existir uma vez por página. No JavaScript, temos as propriedades de className e de classListpara trabalhar com o atributo de classe.

      Método/Propriedade Descrição Exemplo
      className Obtém ou define o valor de classe element.className;
      classList.add() Adiciona um ou mais valores de classe element.classList.add('active');
      classList.toggle() Liga ou desliga uma classe element.classList.toggle('active');
      classList.contains() Verifica se o valor de classe existe element.classList.contains('active');
      classList.replace() Substitui um valor de classe existente com um novo valor de classe element.classList.replace('old', 'new');
      classList.remove() Remove um valor de classe element.classList.remove('active');

      Vamos fazer outro arquivo de HTML para trabalhar com os métodos de classe, com dois elementos e algumas classes.

      classes.html

      <!DOCTYPE html>
      <html lang="en">
      
      <style>
          body {
              max-width: 600px;
              margin: 0 auto;
              font-family: sans-serif;
          }
          .active {
              border: 2px solid blue;
          }
      
          .warning {
              border: 2px solid red;
          }
      
          .hidden {
              display: none;
          }
      
          div {
              border: 2px dashed lightgray;
              padding: 15px;
              margin: 5px;
          }
      </style>
      
      <body>
      
          <div>Div 1</div>
          <div class="active">Div 2</div>
      
      </body>
      
      </html>
      

      Quando abrir o arquivo classes.html em um navegador Web, receberá uma renderização parecida com a seguinte:

      First rendering of classes.html

      A propriedade className foi introduzida para evitar conflitos com a palavra-chave class encontrada no JavaScript e outras linguagens que têm acesso ao DOM. É possível usar o className para atribuir um valor diretamente à classe.

      // Select the first div
      const div = document.querySelector('div');
      
      // Assign the warning class to the first div
      div.className = 'warning';
      

      Atribuímos a classe warning definida nos valores CSS de classes.html para o primeiro div. Você receberá o seguinte resultado:

      Second rendering of classes.html

      Note que se alguma classe já existir no elemento, isso irá substituí-las. É possível adicionar várias classes com espaço delimitado usando a propriedade className, ou usá-las sem operadores de atribuição para obter o valor da classe no elemento.

      A outra maneira de modificar as classes é através da propriedade ](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)classList[, que vem com alguns métodos úteis. Estes métodos são semelhantes aos métodos do jQuery addClass, removeClass e toggleClass.

      // Select the second div by class name
      const activeDiv = document.querySelector('.active');
      
      activeDiv.classList.add('hidden');                // Add the hidden class
      activeDiv.classList.remove('hidden');             // Remove the hidden class
      activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
      activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class
      

      Após realizar os métodos acima, sua página Web se parecerá com esta:

      Final rendering of classes.html

      Ao contrário do exemplo className, usar classList.add() adicionará uma nova classe na lista de classes existentes. Também é possível adicionar várias classes como strings separadas por vírgula. Também é possível usar o setAttribute para modificar a classe de um elemento.

      Modificando os estilos

      A propriedade estilo representa os estilos embutidos em um elemento HTML. Muitas vezes, os estilos serão aplicados aos elementos através de uma folha de estilos, como fizemos anteriormente neste artigo. Porém, às vezes precisamos adicionar ou editar diretamente um estilo embutido.

      Vamos fazer um exemplo curto para demonstrar a edição de estilos com o JavaScript. Abaixo está um novo arquivo de HTML com um div que tem alguns estilos embutidos aplicados para mostrar um quadrado.

      styles.html

      <!DOCTYPE html>
      <html lang="en">
      
      <body>
      
          <div style="height: 100px;
                      width: 100px;
                      border: 2px solid black;">Div</div>
      
      </body>
      
      </html>
      

      Quando aberto em um navegador Web, o styles.html se parecerá com isso:

      First rendering of styles.html​

      Uma opção para editar os estilos é com o setAttribute().

      // Select div
      const div = document.querySelector('div');
      
      // Apply style to div
      div.setAttribute('style', 'text-align: center');
      

      No entanto, isso removerá todos os estilos embutidos do elemento. Uma vez que este provavelmente não é o efeito desejado, é melhor usar o atributo style diretamente.

      div.style.height = '100px';
      div.style.width = '100px';
      div.style.border = '2px solid black';
      

      As propriedades CSS são escritas em kebab-case, que são palavras minúsculas separadas por traços. É importante notar que as propriedades CSS em kebab-case não podem ser usadas na propriedade de estilo do JavaScript. Em vez disso, elas serão substituídas por seu equivalente em camelCase, que é quando a primeira palavra é minúscula e todas as palavras subsequentes são maiúsculas. Em outras palavras, em vez de text-align, vamos usar textAlign para a propriedade de estilo do JavaScript.

      // Make div into a circle and vertically center the text
      div.style.borderRadius = '50%';
      div.style.display = 'flex';
      div.style.justifyContent = 'center';
      div.style.alignItems = 'center';
      

      Após completar as modificações de estilo acima, sua versão final de styles.html mostrará um círculo:

      Final rendering of styles.html

      Se muitas alterações estilísticas tiverem que ser aplicadas a um elemento, o melhor a se fazer é aplicar os estilos para uma classe e adicionar uma nova classe. No entanto, existem alguns casos nos quais será necessário ou mais direto modificar o atributo estilo embutido.

      Conclusão

      Os elementos do HTML têm, frequentemente, informações adicionais atribuídas a eles na forma de atributos. Os atributos podem consistir em pares de nome/valor e alguns dos atributos mais comuns são de class e style.

      Neste tutorial, aprendemos como acessar, modificar e remover atributos em um elemento HTML no DOM usando o JavaScript simples. Também aprendemos como adicionar, remover, alternar e substituir as classes CSS em um elemento e como editar estilos de CSS embutidos. Para saber mais, verifique a documentação sobre atributos na Rede de Desenvolvedores da Mozilla.



      Source link

      Entendendo classes no JavaScript


      Introdução

      O JavaScript é uma linguagem baseada em protótipo, e cada objeto no JavaScript tem uma propriedade interna escondida chamada [[Prototype]], que pode ser usada para estender as propriedades e métodos de objetos. Você pode ler mais sobre protótipos no nosso tutorial Entendendo protótipos e herança no JavaScript.

      Até recentemente, os desenvolvedores criativos usavam funções de construção para imitar um padrão de design orientado a objeto no JavaScript. A especificação de linguagem ECMAScript 2015, frequentemente chamada de ES6, introduziu classes na linguagem JavaScript. As classes no JavaScript não oferecem, de fato, funcionalidades adicionais e são muitas vezes descritas como provedoras de “açúcar sintático” em relação a protótipos e herança, sendo que estes oferecem uma sintaxe mais limpa e mais elegante. Uma vez que outras linguagens de programação usam classes, a sintaxe de classe no JavaScript torna a coisa mais simples para que desenvolvedores consigam transitar entre linguagens.

      Classes são funções

      Uma classe do JavaScript é um tipo de função. As classes são declaradas com a palavra-chave class. Vamos usar a sintaxe de expressão de função para inicializar uma função e a sintaxe de expressão de classe para inicializar uma classe.

      // Initializing a function with a function expression
      const x = function() {}
      
      // Initializing a class with a class expression
      const y = class {}
      

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

      Object.getPrototypeOf(x);
      

      Output

      ƒ () { [native code] }

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

      Object.getPrototypeOf(y);
      

      Output

      ƒ () { [native code] }

      Ambos os código declarados com function e class retornam uma função [[Prototype]]. Com protótipos, qualquer função pode se tornar uma instância de construção usando a palavra-chave new.

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

      Output

      x {} constructor: ƒ ()

      Isso também se aplica às classes.

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

      Output

      y {} constructor: class

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

      Definindo uma classe

      No tutorial de protótipos e herança, criamos um exemplo baseado na criação de personagens em um jogo RPG baseado em texto. Vamos continuar com esse exemplo para atualizar a sintaxe de funções para classes.

      Uma função de construção é 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 maiúscula por convenção.

      constructor.js

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

      Quando traduzimos isso para a sintaxe classe mostrada abaixo, vemos que ela está estruturada de maneira similar.

      class.js

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

      Sabemos que uma função de construção é destinada a ser um projeto de objeto pela primeira letra do inicializador ser maiúscula (o que é opcional) e através da familiaridade com a sintaxe. A palavra-chave class comunica de maneira mais simples o objetivo da nossa função.

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

      Definindo métodos

      Uma prática comum com funções de construção é atribuir métodos diretamente ao prototype ao invés da inicialização, como visto no método greet() abaixo.

      constructor.js

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

      Com classes, esta sintaxe é simplificada e o método pode ser adicionado diretamente à classe. Ao usar a forma abreviada da definição do método introduzida como sendo ES6, definir um método é um processo ainda mais conciso.

      class.js

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

      Vamos ver essas propriedades e métodos em ação. Criaremos uma nova instância Hero usando a palavra-chave new e atribuiremos alguns valores.

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

      Se imprimirmos mais informações sobre nosso novo objeto com console.log(hero1), podemos ver mais detalhes sobre o que está acontecendo com a inicialização da classe.

      Output

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

      Podemos ver no resultado que as funções constructor() e greet() foram aplicadas ao __proto__, ou [[Prototype]] do hero1, e não diretamente como um método no objeto hero1. Embora isso seja claro ao criar funções de construção, não é óbvio ao criar classes. As classes permitem uma sintaxe mais simples e sucinta, mas sacrifica um pouco de clareza no processo.

      Estendendo uma classe

      Uma característica vantajosa de funções de construção e classes é que elas podem ser estendidas para novos projetos de objeto baseados no pai. Isso impede a repetição de código para objetos semelhantes, mas precisa 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 personagens mais específica chamada Mage e atribuir as propriedades de Hero a ela usando o call(), assim como adicionar uma propriedade adicional.

      constructor.js

      // Creating a new constructor from the parent
      function 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 que o Hero assim como uma nova que adicionamos.

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

      Ao enviar hero2 para o console, podemos ver que criamos um novo Mage baseado no construtor.

      Output

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

      Com classes ES6, a palavra-chave super é usada no lugar de call para acessar as funções do pai. Vamos usar extends para nos referir à classe pai.

      class.js

      // Creating a new class from the parent
      class 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 Mage da mesma maneira.

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

      Vamos imprimir hero2 para o console e visualizar o resultado.

      Output

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

      O resultado é quase exatamente o mesmo, exceto que na construção de classes o [[Prototype]] está ligado ao pai, neste caso, Hero.

      Abaixo está uma comparação lado a lado do processo inteiro de inicialização, adição de métodos e herança de uma função de construção e uma classe.

      constructor.js

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

      class.js

      // Initializing a class
      class 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 parent
      class Mage extends Hero {
          constructor(name, level, spell) {
              // Chain constructor with super
              super(name, level);
      
              // Add a new property
              this.spell = spell;
          }
      }
      

      Embora a sintaxe seja bastante diferente, o resultado fundamental é quase idêntico entre ambos os métodos. As classes dão-nos uma maneira mais concisa de criar plantas de objetos e as funções de construção descrevem com maior precisão o que está acontecendo nas entrelinhas.

      Conclusão

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

      Compreender a herança prototípica é fundamental para ser um desenvolvedor eficaz do JavaScript. Estar familiarizado com classes é extremamente útil, já que as bibliotecas populares do JavaScript como a React fazem uso frequente da sintaxe class.



      Source link