JavaScriptのプロトタイプの継承パターン

投稿日: 2022-04-20 2022-10-07
タグ: javascript

JavaScriptにはクラスは含まれていませんが、それでも強力なオブジェクト指向言語です。 JavaScriptのオブジェクトとオブジェクトの関係は、 prototype 結果として得られるプロトタイプパターンは、JavaScriptに非常に固有のものです。

ES6クラス構文の前は、継承のトピックは、他の言語から来た開発者にとってほとんど混乱していました。これは、私の謙虚な意見では、JSが真にオブジェクト駆動型の言語であるためです。

これにより、JavaScriptオブジェクトの継承の概念を理解することが非常に困難になります。たとえば、クラスなしで同じプロパティを持つ新しいオブジェクトを作成するにはどうすればよいですか？。この記事は、それと、このプロパティがJavaScriptの特定のオブジェクト指向パターンにどのように適用されるかを説明する試みです。

これまで見てきたように、JavaScriptのオブジェクトには、と呼ばれる共有プロパティを介して他のオブジェクトから直接継承する機能があります。 prototype そしてどのように prototype JavaScriptオブジェクトに継承を実装するために使用されます。

現在、この継承は、クラスベース言語で使用されている従来の継承ではなく、オブジェクト委任に匹敵するものです。大まかに言うと、特定のプロパティがオブジェクトに見つからない場合は、そのプロトタイプで問題のプロパティの定義を確認します。

これが私が話していることを示すための簡単なスニペットです：

let Alligator = function(color) {
  this.color = color;
}

Alligator.prototype.introduce = function() {
 console.log('I am ' + this.color);
}

let Croc = function(color) {
  Alligator.call(this, color);
}

Croc.prototype = Object.create(Alligator.prototype)

let alligatorObj = new Alligator('green');
let crocObj = new Croc('yellow');

alligatorObj.introduce(); // I am green
crocObj.introduce(); // I am yellow

したがって、上で起こったことはこれです-のインスタンス croc のコピーを持っています prototype にリンクします prototype の Croc これは次にリンクします prototype の Alligator. The Alligator prototype の定義を提供することができます introduce().

これは、委任が意味するものであり、オブジェクト内のターゲットの動作を検索します（つまり、 prototype). また、JavaScriptプロトタイプは複数のプロトタイプにリンクできるため、そのようにして複数の継承を行うこともできますが、実際にはそれはしばしば悪い考えです。

スニペットは、オブジェクト間コードがどのように見えるかの例です。これは非常に原始的ですが、オブジェクト間でのプロパティとメソッドの直接転送を容易にします。これはJavaScriptの設計に組み込まれています。クラスのシンタックスシュガーまたはコンストラクターは、これを単にラッパーにして、古典的なOOPのように感じさせます。

ほとんどの場合、プロトタイプパターンは非常にシンプルで実装が簡単です。なんで？オブジェクトとクラスの古典的な理解のために、コンストラクター関数がインスタンスを作成することを期待しています。 JavaScriptでは、次のように任意の関数をコンストラクターにすることができます。

function Alligator(color) {
 This.color = color;
}

Let alligator = new Alligator('purple');

私たちがしなければならないのは、接頭辞を付けることだけです new 関数呼び出しのキーワードであり、オブジェクトがあります。そのすべて new キーワードはそれが呼び出すことです Alligator() バインディングによりコンストラクターとして機能する this （これは新しいコンテキストです）関数呼び出しに。 JavaScriptで古典的なオブジェクトパターンを機能させるために、単に邪魔にならないように感じます。これと比較すると、プロトタイプパターンは直感的に感じられます。また、慣例により、新しいオブジェクトのコンストラクターとして使用することを目的とした関数は大文字で始める必要があります。そうしないと、どこにあるかを知るのが非常に混乱する可能性があります。 new キーワードを使用する必要があります。

getdocs

13036