Informations sur les classes JavaScript

Output
y {}constructor: class

constructor.js

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

Lorsque nous traduisons cette syntaxe de classe, qui est montré alors, nous voyons que sa structure est assez similaire.

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

Nous savons qu’une fonction de constructeur est conçue Pour être un schéma d’objet pour l’utilisation de majuscules dans la première lettre de l’initialiszer (facultatif) 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 de syntaxe d’initialisation a à voir avec l’utilisation du mot clé class au lieu de function, et avec l’affectation des propriétés dans une méthode constructor().

Définir des méthodes

La pratique courante avec les fonctions de construction consiste à attribuer des méthodes directement à prototype au lieu de l’initialisation, comme on peut le voir dans l’ID

ci-dessous.

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

avec des classes, cette syntaxe est simplifiée et la La méthode peut être ajoutée directement aux classes. Lors de l’utilisation de la définition de méthode de la méthode introduite dans ES6, une concision encore plus grande est obtenue lors de la définition d’une méthode.

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

Observons ces propriétés et méthodes d’action. Nous allons créer une nouvelle instance de Hero à l’aide du mot-clé new et attribuer certaines valeurs.

Si nous imprimons plus d’informations sur notre nouvel objet avec , nous pouvons apprécier 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 le résultat que les fonctions constructor() et greet() ils ont appliqué à __proto__ ou de hero1, et pas directement comme Une méthode dans l’objet hero1. Bien que cela soit révélé dans la création de fonctions de constructeur, il n’est pas évident lors de la création de cours. Les classes permettent une syntaxe plus simple et plus succincte, bien qu’elles sacrifient une certaine clarté dans le processus.

Développer une classe

Une caractéristique avantageuse des fonctions et des classes de construction est qu’elles peuvent être étendues à de nouveaux schémas d’objets basés sur l’élément principal. Cela empêche la répétition du code d’objets similaires, mais ils ont besoin de fonctionnalités supplémentaires ou plus spécifiques.

Vous pouvez créer de nouvelles fonctions de construction à partir de l’élément principal à l’aide de la méthode call(). Dans l’exemple suivant, nous créerons une classe de caractères plus spécifique appelée Mage et nous allons vous attribuer les propriétés de Hero en utilisant call(), en plus de l’ajout d’une propriété.

// Creating a new constructor from the parentfunction 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 de Hero, ainsi qu’un nouveau que nous ajoutons.

en envoyant hero2 à la console, nous pouvons comprendre que nous créons une nouvelle classe Mage basé sur le constructora.

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

avec des classes ES6, le mot-clé est utilisé à la place. de call pour accéder aux fonctions principales. Nous allons utiliser extends pour faire référence à la classe principale.

// 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; }}

Maintenant, nous pouvons créer une nouvelle instance de Mage de la même manière.

Nous allons primer hero2 sur la console et nous verrons 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, avec la différence que dans la construction de la classe est liée à l’élément principal; Dans ce cas, Hero.

ci-dessous est une comparaison parallèle de l’ensemble du processus d’initialisation, de l’incorporation de méthodes et de l’héritage d’une fonction de constructeur et d’une 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;}