JavaScript の継承: Child.prototype = Parent.Prototype と Child.prototype = new Parent() - どちらのアプローチが優れていますか?

JavaScript 継承の微妙なニュアンス: Child.prototype = Parent.Prototype と Child.prototype = new Parent()

JavaScript では、継承は多くの場合、プロトタイプ メカニズムを使用して実装されます。これら 2 つの一般的なアプローチの主な違いは、子オブジェクトの proto プロパティへの影響にあります。

Child.prototype = Parent.Prototype を使用する場合、子と親のプロトタイプは両方とも同じオブジェクトを指します。これは、子のプロトタイプに加えられた変更は親のプロトタイプにも影響することを意味します。

ただし、Child.prototype = new Parent() を使用すると、親のプロトタイプを継承する新しいオブジェクトが作成されます。これにより、子のプロトタイプが親のプロトタイプから確実に分離され、親に影響を与えることなく独立した変更が可能になります。

インスタンス プロパティへの影響

この例では、問題が発生します。子コンストラクター内でインスタンス プロパティを設定するときに発生します:

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

With Child.prototype = Parent.Prototype、これらのプロパティは、親のプロトタイプでもある子のプロトタイプに直接追加されます。その結果、プロトタイプは Spaceship として設定されているため、子コンストラクターの console.log(this) には proto: Spaceship が表示されます。

解決策: Object.create を使用する

この問題を回避するには、次の使用をお勧めします。 Object.create(Parent.prototype):

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

この戦略は、独自の独立したプロトタイプを維持しながら、親のプロトタイプを継承する新しいオブジェクトを作成します。子のプロトタイプに追加されたインスタンス プロパティは、親のプロトタイプには影響しません。

instanceof との比較

オブジェクト instanceof GameObject を使用して継承をチェックする場合、次のことが重要です。子のプロトタイプは GameObject のインスタンスではないため、Child.prototype = Parent.Prototype はこのテストに失敗することに注意してください。対照的に、Child.prototype = new Parent() は期待どおりにテストに合格します。

推奨事項

JavaScript で堅牢かつ分離された継承を実現するには、一般に次のことが推奨されます。 Child.prototype = Parent.Prototype.

ではなく、Child.prototype = Object.create(Parent.prototype) を使用してください。

以上がJavaScript の継承: Child.prototype = Parent.Prototype と Child.prototype = new Parent() - どちらのアプローチが優れていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。