Gotcha avec les instances de classe anonymes : quand et comment éviter ce piège JavaScript ?

Instance de classe anonyme : un piège en JavaScript

Dans ES6, les programmeurs peuvent définir des classes anonymes avec le mot-clé class et les instancier immédiatement avec l'opérateur new :

<code class="javascript">var entity = new class {
    constructor(name) { this.name = name; }
    getName() { return this.name; }
}('Foo');</code>

Bien que cela puisse paraître pratique, il est crucial de comprendre son comportement sous-jacent et ses inconvénients potentiels.

En coulisses

En coulisses, la nouvelle expression de classe crée un nouveau constructeur fonction et objet prototype à chaque fois qu'il est évalué. Ceci est différent des déclarations de classe classiques, qui définissent un constructeur et un prototype uniques partagés entre toutes les instances.

Mises en garde

a. Consommation excessive de mémoire :

Avec l'instanciation immédiate, un nouveau constructeur et un nouveau prototype sont créés chaque fois qu'un objet est créé à l'aide de la nouvelle expression de classe. Cela peut entraîner une consommation inutile de mémoire, surtout si de nombreux objets sont instanciés.

b. Manque d'héritage :

Les objets créés à l'aide du nouveau modèle de classe n'héritent pas du constructeur parent et ne partagent pas de prototype commun. Par conséquent, ils perdent les avantages des classes, tels que l'héritage, la réutilisation de méthodes et le polymorphisme.

Idée fausse sur les objets singleton

Certains développeurs peuvent utiliser ce modèle pour créer des objets singleton, mais ce n'est pas efficace. La fonction constructeur est toujours accessible, et une seconde instance peut être créée à l'aide du nouvel entité.constructor, défiant le but d'un singleton.

Recommandation d'évitement

En raison de ces inconvénients, il est fortement déconseillé en utilisant le nouveau modèle de classe. Privilégiez plutôt les littéraux d'objet traditionnels pour plus de simplicité, de lisibilité et d'efficacité d'instanciation :

<code class="javascript">var entity = {
    name: 'Foo',
    getName() { return this.name; }
};</code>

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!