Héritage JavaScript : Child.prototype = Parent.Prototype vs Child.prototype = new Parent() - Quelle approche est la meilleure ?

Nuances subtiles de l'héritage Javascript : Child.prototype = Parent.Prototype vs. Child.prototype = new Parent()

En Javascript, l'héritage est souvent implémenté à l'aide du mécanisme de prototype. La principale distinction entre ces deux approches courantes réside dans leur impact sur la propriété proto de l'objet enfant.

Lors de l'utilisation de Child.prototype = Parent.Prototype, les prototypes enfant et parent pointent vers le même objet. Cela signifie que toute modification apportée au prototype de l'enfant affectera également le prototype du parent.

Cependant, lors de l'utilisation de Child.prototype = new Parent(), un nouvel objet est créé et hérite du prototype du parent. Cela garantit que le prototype de l'enfant est isolé de celui du parent, permettant des modifications indépendantes sans impact sur le parent.

Effets sur les propriétés de l'instance

Dans l'exemple fourni, le problème se produit lors de la définition des propriétés d'instance dans le constructeur enfant :

this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;

Avec Child.prototype = Parent.Prototype, ces propriétés sont ajoutées directement au prototype de l'enfant, qui est également le prototype du parent. En conséquence, le console.log(this) dans le constructeur enfant affiche proto : Spaceship car le prototype est maintenant défini comme Spaceship.

Solution : Utilisation d'Object.create

Pour éviter ce problème, il est recommandé d'utiliser Object.create(Parent.prototype) :

Spaceship.prototype = Object.create(GameObject.prototype);

Cette stratégie crée un nouvel objet qui hérite du prototype du parent tout en conservant son propre prototype indépendant. Les propriétés d'instance ajoutées au prototype de l'enfant n'affecteront pas celles du parent.

Comparaison avec instanceof

Dans le cas de la vérification de l'héritage à l'aide de l'instance d'objet de GameObject, il est important de notez que Child.prototype = Parent.Prototype échouera à ce test puisque le prototype de l'enfant n'est pas une instance de GameObject. En revanche, Child.prototype = new Parent() réussira le test comme prévu.

Recommandation

Pour un héritage robuste et isolé en Javascript, il est généralement préférable de utilisez Child.prototype = Object.create(Parent.prototype) plutôt que Child.prototype = Parent.Prototype.

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!