Comment « new.target » active-t-il l'héritage et différencie les appels de constructeur dans les classes ES6 ?

Comprendre "new.target"

Définition et emplacement

Bien qu'il ne soit mentionné que trois fois dans la spécification ECMAScript 2015, "new.target" est une méta-propriété définie au §12.3.8.

Objectif et utilisation

"NewTarget" récupère la valeur de la propriété interne [[NewTarget]] de l'environnement de fonction actuel. Cette valeur est définie lorsqu'une fonction est appelée en tant que constructeur.

Si une fonction a été invoquée à l'aide de new, new.target fera référence à la fonction constructeur utilisée pour créer la nouvelle instance. Cela permet aux développeurs de faire la distinction entre les appels de constructeur et les appels de fonction normaux.

Importance pour les classes ES6

"NewTarget" joue un rôle crucial dans les classes ES6. Lorsqu'un constructeur de classe est invoqué avec new, il renvoie ceci, qui n'est initialement pas initialisé. Cependant, super() initialise cela en appelant le constructeur parent tout en passant new.target comme argument.

Ce mécanisme permet aux classes d'hériter d'objets intégrés, tels que Array ou Map. En passant new.target au constructeur parent, la chaîne de prototypes correcte est établie, garantissant que la nouvelle instance hérite de l'objet prototype approprié.

Exemple

Considérez la structure de classe suivante :

class Parent {
  constructor() {
    // new.target = Child (from super() call)
    console.log(new.target);
  }
}

class Child extends Parent {
  constructor() {
    // new.target = Child (from new call)
    super();
    console.log(this);
  }
}

new Child;

Dans cet exemple, new.target est :

• Child dans le constructeur Parent (appelé depuis l'appel super())
• Child dans le constructeur Child (appelé avec new)

Le résultat sera :

Child
{ __proto__: Child.prototype }

Cela démontre comment new.target peut être utilisé pour différencier les appels de constructeur et de fonction normale, ainsi que pour gérer l'héritage dans les classes ES6.

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!