Quel est l'impact du « nouveau » mot-clé sur l'héritage basé sur des prototypes en JavaScript ?

Héritage basé sur un prototype : exploration du rôle du « nouveau » mot-clé

Lors de l'extension d'une classe Widget avec une nouvelle fonction nommée WeatherWidget, le mission de prototype :

WeatherWidget.prototype = new Widget;

joue un rôle crucial. Le mot-clé 'new' appelle le constructeur Widget et attribue sa valeur de retour à la propriété prototype de WeatherWidget.

Si elle est omise, cette action générerait une erreur ou polluerait éventuellement l'espace de noms global. En utilisant « new », le constructeur du Widget est invoqué, garantissant une initialisation correcte et une valeur de retour valide.

Cependant, cette approche crée un scénario dans lequel toutes les instances de WeatherWidget héritent des propriétés de la même instance du Widget, partageant des valeurs entre elles. . Cela peut ne pas correspondre aux principes d'héritage.

Pour résoudre ce problème et mettre en œuvre un véritable héritage basé sur les classes, les étapes suivantes doivent être suivies :

1. Créer un objet factice :

function Dummy () {}
Dummy.prototype = Widget.prototype;

2. Attribuer le Prototype :

WeatherWidget.prototype = new Dummy();

3. Corriger le constructeur :

WeatherWidget.prototype.constructor = WeatherWidget;

Cette approche garantit que les instances WeatherWidget héritent des propriétés à travers la chaîne de prototypes sans partager de valeurs entre eux.

Pour une solution plus concise dans ECMAScript Ed. 5 et versions ultérieures, envisagez d'utiliser :

WeatherWidget.prototype = Object.create(Widget.prototype, {
  constructor: {value: WeatherWidget}
});

Alternativement, pour une implémentation d'héritage généralisée, explorez Function.prototype.extend(). Cette méthode permet une augmentation facile du prototype et fournit une fonction d'accès « super » pratique pour appeler les méthodes parent.

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!