


Les nouveaux champs de classe privée de JavaScript, et comment les utiliser
Feb 10, 2025 pm 02:30 PM
ES6 présente des classes pour JavaScript, mais pour des applications complexes, elles peuvent être trop simples. Les champs de classe (également appelés attribut de classe ) sont con?us pour simplifier les constructeurs avec des membres privés et statiques. La proposition est actuellement dans le stade TC39 Phase 3: candidat et sera probablement ajoutée à ES2019 (ES10). Node.js 12, Chrome 74 et Babel prennent actuellement en charge les champs privés. Avant de comprendre comment les champs de classe sont mis en ?uvre, il est utile de revoir la classe ES6. Cet article a été mis à jour en 2020. Pour des connaissances JavaScript plus approfondies, lisez notre livre "JavaScript: From Newbie to Ninja, deuxième édition".
Points clés
- ES6 présente des classes pour JavaScript, mais pour des applications complexes, elles peuvent être trop simples. Les champs de classe de l'ES2019 sont con?us pour simplifier le constructeur avec des membres privés et statiques qui peuvent être ajoutés à ES2019 (ES10).
- La nouvelle implémentation de champ de classe permet l'initialisation des propriétés publiques en dehors de tout constructeur en haut de la classe. Si le constructeur est toujours nécessaire, l'initialisateur est exécuté avant son exécution.
- Les champs de classe dans ES2019 permettent de déclarer les champs de classe privée à l'aide d'un préfixe de hachage #. Cela rend le champ accessible uniquement dans les méthodes intérieures de la classe, et non de l'extérieur de la classe.
- L'utilisation de # pour représenter la confidentialité dans les champs de classe a été critiquée, principalement parce qu'elle n'est pas aussi intuitive que les mots clés privés. Cependant, le symbole # n'est pas valide en dehors de la définition de la classe, garantissant que les champs privés restent privés.
- L'avantage immédiat des champs de classe ES2019 est le code de réaction plus propre. Ils peuvent être attribués en fonction de la flèche ES6 = & gt;
ES6 Basics de catégorie
Les développeurs de langues tels que C, C #, Java et PHP peuvent être confus par le modèle d'héritage orienté objet de JavaScript. Par conséquent, ES6 a introduit la classe . Ils sont principalement du sucre syntaxique, mais offrent un concept plus familier de programmation orientée objet. Une classe est un modèle d'objet qui définit comment les objets de ce type se comportent. La classe animale suivante définit les animaux généraux (les classes sont généralement représentées en majuscules initiaux pour les distinguer des objets et d'autres types):
class Animal { constructor(name = 'anonymous', legs = 4, noise = 'nothing') { this.type = 'animal'; this.name = name; this.legs = legs; this.noise = noise; } speak() { console.log(`${this.name} says "${this.noise}"`); } walk() { console.log(`${this.name} walks on ${this.legs} legs`); } }
Les déclarations de classe sont toujours exécutées en mode strict. Pas besoin d'ajouter ?Utiliser Strict?. La méthode du constructeur s'exécute lors de la création d'un objet de type animal. Il définit généralement les propriétés initiales et gère d'autres initialisations. Speak () et Walk () sont des méthodes d'instance qui ajoutent plus de fonctionnalités. Vous pouvez maintenant utiliser le nouveau mot clé pour créer des objets à partir de cette classe:
let rex = new Animal('Rex', 4, 'woof'); rex.speak(); // Rex says "woof" rex.noise = 'growl'; rex.speak(); // Rex says "growl"
getter et seter
setter est une méthode spéciale utilisée uniquement pour définir les valeurs. De même, Getter est une méthode spéciale pour les valeurs de retour uniquement. Par exemple:
class Animal { constructor(name = 'anonymous', legs = 4, noise = 'nothing') { this.type = 'animal'; this.name = name; this.legs = legs; this.noise = noise; } speak() { console.log(`${this.name} says "${this.noise}"`); } walk() { console.log(`${this.name} walks on ${this.legs} legs`); } // setter set eats(food) { this.food = food; } // getter get dinner() { return `${this.name} eats ${this.food || 'nothing'} for dinner.`; } } let rex = new Animal('Rex', 4, 'woof'); rex.eats = 'anything'; console.log( rex.dinner ); // Rex eats anything for dinner.
Sous-classe ou sous-classe
Il est généralement possible d'utiliser une classe comme classe de base pour une autre. La classe humaine peut hériter de toutes les propriétés et méthodes de la classe animale en utilisant le mot clé EXTENSE. Des propriétés et des méthodes peuvent être ajoutées, supprimées ou modifiées au besoin pour créer des objets humains plus faciles et plus clairs:
class Animal { constructor(name = 'anonymous', legs = 4, noise = 'nothing') { this.type = 'animal'; this.name = name; this.legs = legs; this.noise = noise; } speak() { console.log(`${this.name} says "${this.noise}"`); } walk() { console.log(`${this.name} walks on ${this.legs} legs`); } }
Super fait référence à la classe parent, c'est donc généralement le premier appel appelé dans le constructeur. Dans cet exemple, la méthode Human Speak () remplace la méthode définie dans l'animal. Vous pouvez maintenant créer une instance d'objet humain:
let rex = new Animal('Rex', 4, 'woof'); rex.speak(); // Rex says "woof" rex.noise = 'growl'; rex.speak(); // Rex says "growl"
Méthodes et propriétés statiques
La définition de méthodes utilisant des mots clés statiques permet de l'appeler sur une classe sans créer une instance d'objet. Considérez les constantes math.pi: il n'est pas nécessaire de créer un objet mathématique avant d'accéder aux propriétés PI. ES6 ne prend pas en charge les mêmes propriétés statiques que les autres langues, mais les propriétés peuvent être ajoutées à la définition de classe elle-même. Par exemple, la classe humaine peut être adaptée pour maintenir le nombre d'objets humains créés:
class Animal { constructor(name = 'anonymous', legs = 4, noise = 'nothing') { this.type = 'animal'; this.name = name; this.legs = legs; this.noise = noise; } speak() { console.log(`${this.name} says "${this.noise}"`); } walk() { console.log(`${this.name} walks on ${this.legs} legs`); } // setter set eats(food) { this.food = food; } // getter get dinner() { return `${this.name} eats ${this.food || 'nothing'} for dinner.`; } } let rex = new Animal('Rex', 4, 'woof'); rex.eats = 'anything'; console.log( rex.dinner ); // Rex eats anything for dinner.Le Getter statique de la classe
renverra le nombre d'humains en conséquence:
class Human extends Animal { constructor(name) { // 調(diào)用Animal構(gòu)造函數(shù) super(name, 2, 'nothing of interest'); this.type = 'human'; } // 重寫Animal.speak speak(to) { super.speak(); if (to) console.log(`to ${to}`); } }
ES2019 Fields de classe ( new )
La nouvelle implémentation du champ de classe permet l'initialisation des propriétés publiques en dehors de tout constructeur en haut de la classe:
let don = new Human('Don'); don.speak('anyone'); // Don says "nothing of interest" to anyone don.eats = 'burgers'; console.log( don.dinner ); // Don eats burgers for dinner.
Cela équivaut à:
class Human extends Animal { constructor(name) { // 調(diào)用Animal構(gòu)造函數(shù) super(name, 2, 'nothing of interest'); this.type = 'human'; // 更新Human對象的計數(shù) Human.count++; } // 重寫Animal.speak speak(to) { super.speak(); if (to) console.log(`to ${to}`); } // 返回人類對象的個數(shù) static get COUNT() { return Human.count; } } // 類的靜態(tài)屬性本身 - 不是其對象 Human.count = 0;
Si vous avez toujours besoin du constructeur, l'initialisateur sera exécuté avant son exécution.
champ de classe statique
Dans l'exemple ci-dessus, des propriétés statiques sont ajoutées à l'objet de définition de classe de manière inélégante après avoir défini l'objet de classe. Vous n'avez pas besoin d'utiliser des champs de classe:
console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 0 let don = new Human('Don'); console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 1 let kim = new Human('Kim'); console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 2
Cela équivaut à:
class MyClass { a = 1; b = 2; c = 3; }
Champ de classe privée
Tous les attributs de la classeES6 sont publics par défaut et peuvent être vérifiés ou modifiés en dehors de la classe . Dans l'exemple d'animal ci-dessus, rien ne peut empêcher de modifier la propriété alimentaire sans appeler le setter à manger:
class MyClass { constructor() { this.a = 1; this.b = 2; this.c = 3; } }D'autres langues permettent généralement la déclaration d'attributs privés. Ce n'est pas possible dans ES6, donc les développeurs utilisent souvent des conventions de soulignement (_propertyName), des fermetures, des symboles ou des maps faibles pour résoudre ce problème. Le soulignement donne aux développeurs un indice, mais rien ne peut les empêcher d'accéder à la propriété. Dans ES2019, les champs de classe privée sont définis à l'aide de Hash # Prefix:
class MyClass { x = 1; y = 2; static z = 3; } console.log( MyClass.z ); // 3Veuillez noter que les méthodes privées, les getters ou les setters ne peuvent pas être définis. TC39 Phase 3: Draft Proposition recommande l'utilisation d'un préfixe de hachage # pour les noms, qui est implémenté dans Babel. Par exemple:
class MyClass { constructor() { this.x = 1; this.y = 2; } } MyClass.z = 3; console.log( MyClass.z ); // 3
Bénéfice immédiatement: Code de réaction plus concis!
Les composants réagis ont généralement des méthodes liées aux événements DOM. Pour s'assurer que cela se résout en composant, il est nécessaire de lier chaque méthode en conséquence. Par exemple:
class Animal { constructor(name = 'anonymous', legs = 4, noise = 'nothing') { this.type = 'animal'; this.name = name; this.legs = legs; this.noise = noise; } set eats(food) { this.food = food; } get dinner() { return `${this.name} eats ${this.food || 'nothing'} for dinner.`; } } let rex = new Animal('Rex', 4, 'woof'); rex.eats = 'anything'; // 標(biāo)準(zhǔn)setter rex.food = 'tofu'; // 完全繞過eats setter console.log( rex.dinner ); // Rex eats tofu for dinner.Lorsqu'il est défini comme un champ de classe ES2019, il peut être attribué en fonction à l'aide de la flèche ES6 = & gt; qui est automatiquement liée à l'objet de définition. Pas besoin d'ajouter une instruction de liaison:
class MyClass { a = 1; // .a是公共的 #b = 2; // .#b是私有的 static #c = 3; // .#c是私有的和靜態(tài)的 incB() { this.#b++; } } let m = new MyClass(); m.incB(); // 運(yùn)行正常 m.#b = 0; // 錯誤 - 私有屬性不能在類外部修改
Champ de classe: amélioré?
La définition de la classe ES6 est trop simple. Les champs de classe ES2019 nécessitent moins de code, améliorent la lisibilité et implémentent certaines possibilités intéressantes pour la programmation orientée objet. Utiliser # signifie la privatin a re?u des critiques, principalement parce qu'elle est laide et ressemble à une compétence. La plupart des langues implémentent le mot-clé privé, donc essayer d'utiliser ce membre en dehors de la classe sera rejeté par le compilateur. JavaScript est interprété. Considérez le code suivant:
class Animal { constructor(name = 'anonymous', legs = 4, noise = 'nothing') { this.type = 'animal'; this.name = name; this.legs = legs; this.noise = noise; } speak() { console.log(`${this.name} says "${this.noise}"`); } walk() { console.log(`${this.name} walks on ${this.legs} legs`); } }
Cela lancera une erreur d'exécution sur la dernière ligne, mais ce n'est qu'une grave conséquence d'essayer de définir la propriété. JavaScript est délibérément tolérant et ES5 permet de modifier les propriétés sur n'importe quel objet. Bien que maladroit, le symbole # est invalide en dehors de la définition de la classe. Essayer d'accéder à MyObject. # Secret peut lancer une erreur de syntaxe. Ce débat se poursuivra, mais les champs de classe sont déjà adoptés dans plusieurs moteurs JavaScript, comme cela. Ils continueront d'exister.
FAQS (FAQ) sur les champs de classe privée JavaScript
Quels sont les avantages de l'utilisation de champs de classe privée JavaScript?
Les champs de classe privée en JavaScript fournissent un moyen d'encapsuler ou de masquer des données dans une classe, qui est le principe de base de la programmation orientée objet. Cette encapsulation garantit que l'état interne d'un objet ne peut être modifié que par une classe explicitement définie. Cela rend le code plus robuste et prévisible car il empêche le code externe de modifier accidentellement l'état de l'objet d'une manière inattendue. De plus, les champs privés peuvent aider à simplifier l'interface des classes car elles réduisent le nombre de propriétés et de méthodes exposées au monde extérieur.
Comment déclarer les champs de classe privée en JavaScript?
Dans JavaScript, les champs de classe privée sont déclarés en ajoutant un symbole de hachage (#) avant le nom du champ. Par exemple, pour déclarer un champ privé nommé "valeur" dans une classe, vous pouvez écrire un #Value. Ce champ ne peut ensuite être accessible que dans les méthodes internes de la classe, et non de l'extérieur de la classe.
Puis-je accéder aux champs de classe privée de l'extérieur de la classe?
Non, les champs de classe privée en JavaScript ne sont pas accessibles à partir de l'extérieur de la classe. C'est par conception, car l'une des principales utilisations des champs privés est de masquer les données internes du monde extérieur. Si vous essayez d'accéder à un champ privé depuis l'extérieur de la classe, JavaScript lancera une erreur de syntaxe.
Puis-je utiliser des champs de classe privée avec des domaines publics?
Oui, les classes JavaScript peuvent avoir des domaines privés et publics. Les domaines publics sont déclarés de la même manière que les champs privés, mais n'ont pas de préfixe de hachage (#). Contrairement aux champs privés qui ne sont accessibles qu'à l'intérieur d'une classe, les champs publics sont accessibles et modifiés à l'intérieur et à l'extérieur de la classe.
En quoi les champs de classe privée sont-ils différents des méthodes privées en JavaScript?
Les champs de classe privée et les méthodes privées en JavaScript ont des utilisations similaires, qui fournissent tous deux un moyen de masquer les détails internes d'une classe du monde extérieur. Cependant, ils sont utilisés différemment. Les champs privés sont utilisés pour stocker des données qui ne peuvent être accessibles que dans la classe, tandis que les méthodes privées sont des fonctions qui ne peuvent être appelées qu'à l'intérieur de la classe.
Puis-je utiliser des champs de classe privée dans tous les environnements JavaScript?
Les champs de classe privée sont des fonctionnalités relativement nouvelles en JavaScript, donc tous les environnements ne le prennent pas en charge. Au moment de la rédaction du moment de la rédaction, les dernières versions de la plupart des navigateurs majeurs, notamment Chrome, Firefox et Safari, prennent en charge les champs privés. Cependant, Internet Explorer ne les soutient pas. Si vous devez écrire du code qui s'exécute dans tous les navigateurs, vous devrez peut-être utiliser un convertisseur comme Babel pour convertir le code en un formulaire que les navigateurs plus anciens peuvent comprendre.
Comment utiliser des champs de classe privée dans les méthodes intérieures d'une classe?
Pour utiliser un champ de classe privée dans une méthode interne d'une classe, reportez-vous simplement au champ avec son nom (préfixé avec un symbole de hachage (#)). Par exemple, si vous avez un champ privé appelé "valeur", vous pouvez y accéder dans votre méthode comme ceci: ce. # Valeur.
Puis-je utiliser des champs de classe privée en sous-classes?
Oui, les champs de classe privée peuvent être utilisés dans les sous-classes de JavaScript. Cependant, chaque sous-classe a son propre ensemble indépendant de champs privés qui ne sont pas partagés avec des superclasses ou d'autres sous-classes. Cela signifie que si le champ privé déclaré par la sous-classe est du même nom que le champ privé de la superclasse, les deux champs sont complètement indépendants et n'interfèrent pas les uns avec les autres.
Puis-je utiliser des champs de classe privée dans des méthodes statiques?
Non, les champs de classe privée en JavaScript ne peuvent pas être utilisés dans les méthodes statiques. En effet, les méthodes statiques sont associées à la classe elle-même, et non aux instances de la classe, et les champs privés ne sont accessibles que dans les cas de la classe.
Puis-je itérer sur des champs de classe privée en JavaScript?
Non, les champs de classe privée en JavaScript ne sont pas inclus dans l'itération de la propriété de l'objet. C'est par conception, car l'une des principales utilisations des champs privés est de masquer les données internes du monde extérieur. Si vous avez besoin d'itérer les propriétés de l'objet, vous devez utiliser un champ ou une méthode public à la place.
Cette réponse maintient le format d'image d'origine et le placement, et paraphrase le texte tout en préservant la signification d'origine.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple

Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.

Quel framework JavaScript est le meilleur choix? La réponse est de choisir la plus appropriée selon vos besoins. 1.RIATT est flexible et gratuit, adapté aux projets moyens et grands qui nécessitent une personnalisation élevée et des capacités d'architecture d'équipe; 2. Angular fournit des solutions complètes, adaptées aux applications au niveau de l'entreprise et à la maintenance à long terme; 3. Vue est facile à utiliser, adaptée à des projets de petite et moyenne taille ou à un développement rapide. De plus, s'il existe une pile technologique existante, la taille de l'équipe, le cycle de vie du projet et si le RSS est nécessaire sont également des facteurs importants dans le choix d'un cadre. En bref, il n'y a pas absolument le meilleur cadre, le meilleur choix est celui qui convient à vos besoins.

Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle

Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.

La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)

Des méthodes intégrées de la matrice JavaScript telles que .map (), .filter () et .reduce () peuvent simplifier le traitement des données; 1) .map () est utilisé pour convertir les éléments un en un pour générer de nouveaux tableaux; 2) .filter () est utilisé pour filtrer les éléments par condition; 3) .reduce () est utilisé pour agréger les données en tant que valeur unique; Une mauvaise utilisation doit être évitée lorsqu'elle est utilisée, entra?nant des effets secondaires ou des problèmes de performance.

La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.
