JavaScript の構成と継承の説明

1. はじめに

継承を学習する前に、プロトタイプチェーンについてある程度理解しておく必要があります。

理解できない場合は、プロトタイプチェーンについてより詳しく説明している私の別の記事「JavaScript プロトタイプチェーンの詳細な説明」をまず読んでみてください。

すでに理解している場合は、そのまま続けてください。

以前、継承方法を全て列挙したブログ記事を書きましたが、一度に読むには長すぎて知識の吸収に役立たないと感じたので、最初に複合継承部分を分離し、後で寄生部分を補うことにしました。

2. プロトタイプチェーン継承

親クラスのインスタンスは、子クラスのプロトタイプとして使用されます。子クラスによって作成された2つのインスタンスの暗黙的なプロトタイプ__proto__ 、親クラスのインスタンスを指し、親クラスインスタンスの暗黙的なプロトタイプ__proto__はfather.prototypeを指します。
プロトタイプチェーンの特性に応じて、すべてのサブクラスインスタンスは親クラスプロトタイプのプロパティを継承できます。

コードを明確に理解するには、次の図を読んでください。

 // 父クラス関数 father() {
      this.fatherAttr = ["fatherAttr"];
    }
    
    //親クラスのプロトタイプのプロパティ father.prototype.checkProto = "checkProto";

    //サブクラス関数 child() {}

    // 父インスタンスを子コンストラクタのプロトタイプとして使用します。child.prototype = new father();
    child.prototype.constructor = 子;

    // 2 つのサブクラスインスタンス const test1 = new child();
    const test2 = 新しい子();

    console.log("テスト1:");
    コンソールにログ出力します。
    コンソールにログ出力します。
    コンソールにログを記録します。
    コンソールにログを記録します。

    console.log("テスト2:");
    test1.fatherAttr.push("newAttr");
    コンソールにログを記録します。
    コンソールにログを記録します。

    console.log("テスト3:");
    コンソールにログ出力します。

特徴：

2 つのインスタンスオブジェクトのどちらにもfatherAttr属性はありませんが、親クラスのインスタンスにはfatherAttr属性があり、親クラスのインスタンスが子のプロトタイプとして機能するため、プロトタイプチェーンに従って、独自のコンストラクターのchildのプロトタイプで属性を共有できます。（テスト1）
親クラスのインスタンスはプロトタイプとして 1 つだけなので、すべてのインスタンスはプロトタイプのプロパティfatherAttrを共有します。プロトタイプのプロパティが参照型 (ここでは配列) の場合、 test1に新しいコンテンツを追加すると、 test2のfatherAttrも変更されます。（テスト2）（デメリット）
childコンストラクターは入力パラメータを渡すことができません。（欠点）
インスタンスは親クラスプロトタイプのプロパティにアクセスできるため、親クラスプロトタイプで再利用可能なメソッドを定義できます。（テスト3）

3. コンストラクタの継承

this親クラスから子クラスにバインドします。つまり、子クラスがインスタンスを作成すると、親クラスのコンストラクターが子クラス内で呼び出され、親クラスのプロパティが子クラスのインスタンスにコピーされるため、インスタンスはこれらのプロパティを継承します。

    // 父クラス関数 father(params) {
      this.fatherAttr = ["fatherAttr"];
      this.params = パラメータ;
    }

    //親クラスのプロトタイプのプロパティ father.prototype.checkProto = "checkProto";

    //サブクラス関数 child(params) {
      父親を呼び出します(これ、パラメータ);
    }

    // 2 つのサブクラスインスタンス const test1 = new child("params1");
    const test2 = 新しい子("params2");

    console.log("テスト1:");
    コンソールにログ出力します。
    コンソールにログ出力します。
    コンソールにログを記録します。
    コンソールにログを記録します。

    console.log("テスト2:");
    test1.fatherAttr.push("newAttr");
    コンソールにログを記録します。
    コンソールにログを記録します。
    
    console.log("テスト3:");
    コンソールにログ出力します。

特徴：

両方のインスタンスオブジェクトにはコピーされたfatherAttr属性があるため、共有属性はありません。インスタンスを作成するには、親クラスのすべての属性を 1 回コピーする必要があります。また、親クラスのプロトタイプは継承できないため、メソッドを再利用できず、メソッドをコピーする必要があります。（テスト１）（デメリット）
test1新しいコンテンツを追加すると、 test1自体のプロパティのみが変更され、 test2は影響しません。（テスト2）
childコンストラクターはパラメーターを渡して独自のプロパティをカスタマイズできます。（テスト1）
インスタンスは親クラスのプロトタイプからプロパティを継承できません。 (テスト3) (デメリット)

4. 組み合わせ継承

プロトタイプチェーン継承とコンストラクター継承を組み合わせることで、2つの継承の特性に応じて使い分けることができます。

  // 父クラス関数 father(params) {
      this.fatherAttr = ["fatherAttr"];
      this.params = パラメータ;
    }

    //親クラスのプロトタイプのプロパティ father.prototype.checkProto = "checkProto";

    //サブクラス関数 child(params) {
      //親クラスのコンストラクターへの 2 回目の呼び出し father.call(this, params);
    }

    // 親インスタンスを子コンストラクターのプロトタイプとして使用します。child.prototype = new father(); // 親クラスのコンストラクターが初めて呼び出されます。child.prototype.constructor = child;

    // 2 つのインスタンス const test1 = new child("params1"); // ここからサブクラスのコンストラクターにジャンプし、親クラスのコンストラクターを 2 回目に呼び出します const test2 = new child("params2");

    console.log("テスト1:");
    コンソールにログ出力します。
    コンソールにログ出力します。
    コンソールにログを記録します。
    コンソールにログを記録します。

    console.log("テスト2:");
    test1.fatherAttr.push("newAttr");
    コンソールにログを記録します。
    コンソールにログを記録します。

    console.log("テスト3:");
    コンソールにログ出力します。

    console.log("テスト4:");
    test1.fatherAttr を削除します
    コンソールにログ出力します。
    コンソールにログを記録します。

特徴：

両方のインスタンスオブジェクトには、コピーされたfatherAttr属性があります。インスタンスを作成するには、親クラスのすべての属性を 1 回コピーする必要があります (コンストラクター継承特性、テスト 1)。ただし、親クラスのプロトタイプにアクセスでき、親クラスのプロトタイプで再利用メソッドを定義できます。 (プロトタイプチェーン継承機能、テスト 1)
test1新しいコンテンツを追加すると、test1 自体のプロパティのみが変更され、test2 には影響しません。（コンストラクタ継承機能、テスト2）
childコンストラクターはパラメーターを渡して独自のプロパティをカスタマイズできます。（コンストラクタ継承機能、テスト1）
インスタンスは親クラスのプロトタイプからプロパティを継承できます。 (プロトタイプチェーン継承機能、テスト 3)
親クラスのコンストラクターが 2 回呼び出され、インスタンスが 2 つ生成され、サブクラスのプロトタイプチェーンが 1 回作成され、サブクラスを使用してインスタンスを作成すると、サブクラス内で 1 回呼び出され、2 回目が 1 回目をカバーします。（欠点）
親クラスのコンストラクターが 2 回呼び出されるため、インスタンスからコピーされたfatherAttr属性を削除するために delete が使用されると、インスタンスには暗黙のプロトタイプによって指される親クラスインスタンスのfatherAttr属性が引き続き保持されます。 (プロトタイプチェーン継承機能、テスト4) (デメリット)

JavaScript の組み合わせと継承の詳細な説明はこれで終わりです。JavaScript の組み合わせと継承に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: