Quel est le rôle de « new » dans l'héritage du prototype JavaScript : « Derived.prototype = new Base » ?

Comprendre le rôle de « nouveau » dans « Derived.prototype = new Base »

Considérez l'extrait de code suivant :

WeatherWidget.prototype = new Widget;

où Widget représente un constructeur, et notre objectif est de l'étendre avec une nouvelle fonction appelée WeatherWidget. La question se pose : quelle est la signification du nouveau mot-clé dans ce contexte, et quelles seraient les ramifications s'il était omis ?

Rôle du 'nouveau'

Le nouveau mot-clé effectue une opération cruciale en instanciant Widget en tant que constructeur et en attribuant sa valeur de retour à la propriété prototype de WeatherWidget. Si le nouveau mot-clé était absent, appeler Widget sans fournir d'argument(s) (par exemple, en omettant les parenthèses) entraînerait un comportement indéfini. De plus, si l'implémentation de Widget n'est pas conçue pour être appelée en tant que constructeur, cette approche pourrait par inadvertance polluer l'espace de noms global.

Comportement de l'instance héritée

En utilisant le nouveau mot-clé comme démontré, toutes les instances de WeatherWidget héritera de la même instance de Widget, ce qui donnera la chaîne de prototypes suivante :

[new WeatherWidget()] → [new Widget()] → [Widget.prototype] → …

Ceci particulier Cet arrangement peut convenir lorsque toutes les instances de WeatherWidget sont destinées à partager les valeurs de propriété héritées de l'instance du Widget. Cependant, dans la plupart des scénarios, un tel héritage partagé n'est pas souhaitable.

Héritage approprié basé sur les classes

Pour implémenter efficacement l'héritage basé sur les classes en JavaScript, qui utilise des prototypes, l'approche suivante est recommandée :

function Dummy () {}
Dummy.prototype = Widget.prototype;
WeatherWidget.prototype = new Dummy();
WeatherWidget.prototype.constructor = WeatherWidget;

Cette technique garantit que les instances WeatherWidget héritent correctement des propriétés via la chaîne de prototypes, mais sans partager les valeurs de propriété entre les instances car elles héritent du prototype de la chaîne de prototypes. Constructeur factice intermédiaire. Voici la chaîne de prototypes résultante :

[new WeatherWidget()] → [new Dummy()] → [Widget.prototype] → …

Exploiter les fonctionnalités JavaScript modernes

Dans les implémentations JavaScript modernes qui adhèrent à ECMAScript 5 et versions ultérieures, l'approche suivante est préférée :

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

Cette approche présente l'avantage supplémentaire de créer une propriété de constructeur non énumérable et non configurable.

Appeler le Constructeur parent

Enfin, il est important de noter que le constructeur parent (dans ce cas, Widget) ne sera appelé explicitement qu'à partir du constructeur enfant (WeatherWidget), de la même manière que les méthodes apply ou call sont utilisées :

function WeatherWidget (…)
{
  Widget.apply(this, arguments);
}

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!