ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の継承で「Child.prototype = Parent.Prototype」を避けるべきなのはどのような場合ですか?

JavaScript の継承で「Child.prototype = Parent.Prototype」を避けるべきなのはどのような場合ですか?

Patricia Arquette
リリース: 2024-11-14 10:28:02
オリジナル
451 人が閲覧しました

When Should You Avoid `Child.prototype = Parent.Prototype` in JavaScript Inheritance?

JavaScript の継承で Child.prototype = Parent.Prototype を避けるべき場合

JavaScript では Child.prototype = を使用して継承するのが一般的ですが、 new Parent();、Child.prototype = Parent.Prototype の場合は例外があり、意図しないエラーが発生する可能性があります。

次のスニペットを考えてみましょう:

function GameObject(oImg, x, y) {

    this.x = x;
    this.y = y;
    this.img = oImg;

    this.hit = new Object();
    this.hitBox.x = x;
    this.hitBox.y = y;
    this.hitBox.width = oImg.width;
    this.hitBox.height = oImg.height;

}

Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;

function Spaceship(){
    console.log("instantiate ship");
    GameObject.apply(this, arguments);
    this.vx = 0;
    this.vy = 0;
    this.speed = 3;
    this.friction = 0.94;
}
ログイン後にコピー

Spaceship コンストラクターを調べると、その __proto__ プロパティが GameObject ではなく Spaceship を指していることがわかります。これは、次の行:

this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
ログイン後にコピー

が GameObject プロトタイプには存在しない this.hitBox にプロパティを直接割り当てているためです。この動作は次の理由から問題があります。

  • 継承が壊れる: Child.prototype = Parent.Prototype を使用する場合、子プロトタイプは親プロトタイプに追加された新しい関数を継承しません。
  • instanceof チェックに違反します: Spaceship インスタンスの __proto__ は GameObject ではなく Spaceship を指しているため、if(object instanceof GameObject) をチェックすると、失敗します。

Child.prototype = new Parent(); を使用する理由代わりに

Child.prototype = new Parent(); Parent クラスのコンストラクターを呼び出し、新しく作成されたインスタンスを Child プロトタイプに割り当てます。これにより、次のことが保証されます。

  • 継承が保持されます: 親プロトタイプに追加された新しい関数は、自動的に子に継承されます。
  • instanceof チェックは正確です: 子インスタンスの __proto__親プロトタイプを指し、正しいインスタンスを許可します。 check.

代替解決策

Object.create をサポートする最新のブラウザでは、Spaceship.prototype = Object.create(GameObject.prototype); を使用できます。子プロトタイプを作成します。これは機能的には Child.prototype = new Parent(); と同等です。しかし、より簡潔であり、不必要なコンストラクター呼び出しを回避します。

以上がJavaScript の継承で「Child.prototype = Parent.Prototype」を避けるべきなのはどのような場合ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート