JavaScript の寄生的構成継承についての簡単な説明

JavaScript の寄生的構成継承についての簡単な説明

コンポジション継承

組み合わせ継承は、疑似古典的継承とも呼ばれます。これは、昨日説明したプロトタイプ チェーンとコンストラクター盗難を組み合わせ、両方の利点を組み合わせたものです。その基本的な考え方は、プロトタイプ チェーンを使用してプロトタイプのプロパティとメソッドを継承し、コンストラクターを盗むことでインスタンスのプロパティを継承することです。これの利点は、プロトタイプで定義されたメソッドを再利用できることと、各インスタンスが独自のプロパティを持つことです。

    関数 SuperType (名前) {
        this.name = 名前;
        this.colors = ["赤","黄","青"];
    }
    SuperType.prototype.sayName = function(){
        console.log(この名前)
    }
    関数 SubType(名前,年齢){
        SuperType.call(this,name);
        this.age = 年齢;
    }
    SubType.prototype = 新しい SuperType();
    SubType.prototype.sayAge = function(){
        コンソールにログ出力します。
    }
    インスタンス = new SubType("jackson",22);
    instancel.colors.push("ピンク");
    instancel.sayName(); // "ジャクソン"
    instancel.sayAge(); //22
    console.log(instancel.colors); // ["赤", "黄",​​ "青", "ピンク"]
    
    instance2 = new SubType("bear", 20); とします。
    console.log(instance2.colors); // ["赤", "黄",​​ "青"]
    instance2.sayName(); // "クマ";
    instance2.sayAge(); // 20

上記のコードを見て、突然悟りを開いたような気分になりましたか? SubType は SuperType を呼び出して name を渡し、独自のプロパティ age を定義します。さらに、SubType.prototype も SuperType インスタンスに割り当てられます。プロトタイプが割り当てられると、このプロトタイプに sayage メソッドが追加され、2 つの subType インスタンスが作成されます。これらの 2 つのインスタンスには独自のプロパティがあり、同じメソッドを共有できます。

組み合わせ継承は、プロトタイプ チェーンとスティール コンストラクターの欠点を補うものであり、js で最もよく使用される継承モードです。

寄生遺伝

寄生継承とは、オブジェクトを関数でラップし、この関数の呼び出しを返すことです。この関数は、自由にプロパティを追加できるインスタンスまたはオブジェクトになります。これが object.create() の原理です。

  // 寄生継承関数subobject(obj) {
        clone = Object(obj); を作成します。
        clone.sayName = 関数(){
            console.log("ジャクソン")
        };
        クローンを返します。
    }
    サブ = {
        名前:"クマ"
    }
    sup = サブオブジェクト(sub)とします。
    sup.sayName();//ジャクソン

この例では、sub オブジェクトに基づいて新しいオブジェクトを返します。返される sup オブジェクトには、sub のプロパティとメソッド、および新しいメソッド sayName() が含まれます。

寄生継承は、主にオブジェクトに関心があり、型やコンストラクターを気にしないシナリオにも適しています。寄生継承では object() 関数は必要ありません。ここでは新しいオブジェクトを返す任意の関数を使用できます。

寄生継承を通じてオブジェクトに関数を追加すると、コンストラクター パターンと同様に、関数の再利用が困難になる可能性があることに注意してください。

寄生的な構成継承

複合継承には、効率に関する特定の問題があります。親クラスのコンストラクターは常に 2 回呼び出されます。1 回はサブクラスのプロトタイプを作成するとき、もう 1 回はサブクラスのコンストラクターで呼び出されます。基本的に、サブクラスは実行時に独自のプロトタイプを書き換えるだけで済みます。

     関数 inheritPrototype(サブタイプ、スーパータイプ) {
        let prototype = Object(superType.prototype); // オブジェクトの作成 prototype.constructor = subType; // 拡張オブジェクト subType.prototype = prototype; // オブジェクトの割り当て }

この inheritPrototype() 関数は、寄生的な構成継承のコア ロジックを実装します。この関数は、サブクラスのコンストラクターと親クラスのコンストラクターの 2 つのパラメーターを受け取ります。この関数内では、最初のステップは親クラスのプロトタイプのコピーを作成することです。次に、返されたプロトタイプ オブジェクトのコンストラクター プロパティを設定して、プロトタイプのオーバーライドによってデフォルトのコンストラクターが失われる問題を解決します。最後に、新しく作成されたオブジェクトがサブタイプのプロトタイプに割り当てられます。次の例に示すように、inheritPrototype() を呼び出すと、前の例のサブタイプ プロトタイプの割り当てを実装できます。

関数SuperType(名前) {
        this.name = 名前;
        this.colors = ["赤", "青", "緑"];
    }
    SuperType.prototype.sayName = 関数 () {
        コンソールにログ出力します。
    };

    関数 SubType(名前, 年齢) {
        SuperType.call(this、名前);
        this.age = 年齢;
    }
    プロトタイプを継承します(サブタイプ、スーパータイプ)。
    SubType.prototype.sayAge = 関数 () {
        コンソールにログ出力します。
    };

ここでは、SuperType コンストラクターは 1 回だけ呼び出され、SubType.prototype 上の不要な未使用のプロパティが回避されるため、この例はより効率的であると言えます。そしてプロトタイプチェーンは今もそのまま残っています。

要約する

JavaScript の寄生的構成継承に関するこの記事はこれで終わりです。より関連性の高い JS の寄生的構成継承のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascript の組み合わせ継承メソッドのコード例の分析
  • JavaScript における継承のさまざまな組み合わせの例
  • JavaScript 寄生結合継承の原理と使用法の分析
  • JavaScript クラスの継承方法まとめ【組み合わせ継承解析】
  • JavaScript の寄生的複合継承の例の詳細な説明
  • 【JSマスターへの道】プロトタイプチェーンから組み合わせ継承までのグラフィカル継承生成の詳細解説
  • 【JSマスターロード】寄生結合継承のメリットを詳しく解説
  • js の共通継承 - 結合継承
  • JS 継承: 借用コンストラクタ継承と結合継承
  • JavaScript の構成と継承の説明

<<:  ハンドラー PageHandlerFactory-Integrated のモジュール リストに不正なモジュール ManagedPipelineHandler が含まれています

>>:  Mysql general_log をクリーンアップする方法の概要

推薦する

Linux の運用と保守で netstat の代わりに ss コマンドを使用する方法

序文Linux サーバーを操作および管理するときに、最もよく使用されるコマンドの 1 つが nets...

Linux システム (Centos6.5 以上) のインストール JDK チュートリアル分析

記事の構成1. 準備2. Java JDK8.0をインストールする3. 環境変数を設定する3. イン...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル

ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...

Nginx try_files ディレクティブの使用例

Nginx の設定構文は柔軟で、高度に制御可能です。バージョン 0.7 以降では、try_files...

Navicat でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)

1. テーブルを作成する<br /> まず、2 つのテーブル (users テーブルと...

MySQL関数の包括的な概要

目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...

TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています

1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...

リソースアップロード機能を実現するための SpringBoot+nginx の詳細な例

最近、画像、ビデオ、CSS/JS などの静的リソースを配置するために nginx を使用する方法を学...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

CentOs システムで Python と yum をアンインストールするソリューション

事故の背景: 数日前、プロジェクトの必要性により、サーバーに python-mysql モジュールを...

MySQL テーブルの断片化を解消し、スペースを再利用する方法

目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...

Nginx+tomcat ロードバランシングクラスタの実装方法

実験環境は以下のとおりですここでは、4 台のサーバー (1 台の nginx、負荷用の 2 台の t...

LinuxにMySQLをインストールするための詳細なチュートリアル

すべてのプラットフォーム用の MySQL ダウンロードは、MySQL ダウンロードから入手できます。...

一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録

目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...