プロトタイプパターン

プロトタイプパターンは、同じ型の多くのオブジェクト間でプロパティを共有するための便利な方法です。プロトタイプはJavaScriptネイティブのオブジェクトで、プロトタイプチェーンを通じてオブジェクトからアクセスできます。

アプリケーションでは、同じ型のオブジェクトを多数作成する必要があることがよくあります。これを行うための便利な方法は、ES6クラスの複数のインスタンスを作成することです。

使用時機

• 多くのオブジェクトが重複なく同じメソッドにアクセスする必要がある場合に使用してください
• JavaScriptの継承モデルとES6クラスを理解するのに役立ちます

指示

• ES6クラスを使用してメソッドを自動的にプロトタイプに追加します
• Object.create() を使用して特定のプロトタイプを持つオブジェクトを作成します
• 継承にプロトタイプチェーンを活用します（ES6クラスの extends キーワード）
• プロトタイプのプロパティは共有されており、インスタンスごとに複製されないことを理解します

詳細

たくさんの犬を作成したいとしましょう！この例では、犬はそこまで多くのことはできません。単に名前を持っていて、吠えることができるだけです！

class Dog {
  constructor(name) {
    this.name = name;
  }

  bark() {
    return `Woof!`;
  }
}

const dog1 = new Dog("Daisy");
const dog2 = new Dog("Max");
const dog3 = new Dog("Spot");

ここで注意すべき点は、constructor が name プロパティを含み、クラス自体が bark プロパティを含んでいることです。ES6クラスを使用する場合、クラス自体に定義されたすべてのプロパティ（この場合は bark）は自動的に prototype に追加されます。

prototype プロパティをコンストラクタを通じてアクセスするか、任意の_インスタンス_上の __proto__ プロパティを通じてアクセスすることで、prototype を直接見ることができます。

console.log(Dog.prototype);
// constructor: ƒ Dog(name, breed) bark: ƒ bark()

console.log(dog1.__proto__);
// constructor: ƒ Dog(name, breed) bark: ƒ bark()

コンストラクタの任意のインスタンス上の __proto__ の値は、コンストラクタのプロトタイプへの直接参照です！オブジェクト上に直接存在しないプロパティにアクセスしようとするたびに、JavaScriptは_プロトタイプチェーンを下って_プロトタイプチェーン内でプロパティが利用可能かどうかを確認します。

プロトタイプパターンは、同じプロパティへのアクセスを持つべきオブジェクトを扱うときに非常に強力です。プロパティの複製を毎回作成する代わりに、すべてのインスタンスがプロトタイプオブジェクトにアクセスできるため、単にプロトタイプにプロパティを追加できます。

すべてのインスタンスはプロトタイプにアクセスできるため、インスタンス作成後でもプロトタイプにプロパティを簡単に追加できます。

犬は吠えるだけではなく、遊ぶこともできるべきだとしましょう！プロトタイプに play プロパティを追加することでこれを実現できます。

プロトタイプチェーンという用語は、複数のステップが存在する可能性があることを示しています。実際のところ、ここまで見てきたのは、__proto__ が参照を持つ最初のオブジェクトで直接利用可能なプロパティにアクセスする方法だけです。しかし、プロトタイプ自体にも __proto__ オブジェクトがあります！

別の種類の犬、スーパードッグを作成しましょう！この犬は通常の Dog からすべてを継承すべきですが、飛ぶこともできるべきです。Dog クラスを拡張し、fly メソッドを追加することでスーパードッグを作成できます。

class SuperDog extends Dog {
  constructor(name) {
    super(name);
  }

  fly() {
    return "Flying!";
  }
}

Dog クラスを拡張したため、bark メソッドにアクセスできます。SuperDog のプロトタイプ上の __proto__ の値は、Dog.prototype オブジェクトを指しています！

プロトタイプ_チェーン_と呼ばれる理由が明確になります。オブジェクト上に直接利用可能でないプロパティにアクセスしようとするたびに、JavaScriptはプロパティを見つけるまで、__proto__ が指すすべてのオブジェクトを再帰的に下って歩きます！

Object.create

Object.create メソッドを使用すると、新しいオブジェクトを作成でき、そのプロトタイプの値を明示的に渡すことができます。

const dog = {
  bark() {
    return `Woof!`;
  },
};

const pet1 = Object.create(dog);

pet1 自体には何のプロパティもありませんが、プロトタイプチェーン上のプロパティにはアクセスできます！dog オブジェクトを pet1 のプロトタイプとして渡したため、bark プロパティにアクセスできます。

Object.create は、新しく作成されたオブジェクトのプロトタイプを指定することで、オブジェクトが他のオブジェクトからプロパティを直接継承できるようにする簡単な方法です。新しいオブジェクトはプロトタイプチェーンを下って歩くことで新しいプロパティにアクセスできます。

プロトタイプパターンにより、オブジェクトが他のオブジェクトのプロパティに簡単にアクセスして継承できます。プロトタイプチェーンにより、オブジェクト自体に直接定義されていないプロパティにアクセスできるため、メソッドとプロパティの複製を避けることができ、使用されるメモリの量を減らすことができます。

ソース

• patterns.dev/vanilla/prototype-pattern

参考資料

• Object.create - MDN
• Prototype - ECMA