JavaScript のプロトタイプ デザイン パターンは、オブジェクトを最初から作成するのではなく、既存のオブジェクト (「プロトタイプ」) を複製することによって新しいオブジェクトを作成できるようにする作成パターンです。プロトタイプ。このパターンは、JavaScript 自体がプロトタイプベースの言語であるため、JavaScript に特に適しており、オブジェクトの作成にコストがかかる場合や、基本プロトタイプと特定のプロパティを共有するオブジェクトを作成したい場合に役立ちます。

ES6 クラスを使用すると、オブジェクトの構造を理解しやすくなります。 extends を使用すると継承が簡素化されますが、ES6 より前では、これを継承して実装するためにプロトタイプが使用されていました。この概念を理解するためのブログは次のとおりです。

追伸: JavaScript のプロトタイプ設計パターンには、他の言語 (Java など) にあるような組み込み clone() メソッドはありません。ただし、プロトタイプまたはコンストラクター関数に clone() メソッドを手動で実装して、同様の機能を提供することができます。

プロトタイプ パターンの背後にある考え方は次のとおりです:

1. プロトタイプ (ブループリント) として機能するオブジェクトを作成します。
2. そのオブジェクトをコピーするか、新しいインスタンスをプロトタイプにリンクすることにより、そのオブジェクトを使用して新しいインスタンスを作成します。

プロトタイプパターンの重要な概念

プロトタイプ: 新しいオブジェクトの作成元となるテンプレート オブジェクト。
クローン作成: プロトタイプをコピーすることで新しいオブジェクトが作成されます。
プロトタイプ チェーン: オブジェクトは動作をプロトタイプに委任できます

パート 1: 基本形状クラス

class Shape {
  constructor(type = 'Generic Shape', color = 'White') {
    this.type = type;
    this.color = color;
  }

  getDetails() {
    return `Type: ${this.type}, Color: ${this.color}`;
  }

  // Clone method to create a new object with the same prototype
  clone() {
    return Object.create(this);  // Creates a new object that inherits from this prototype
  }
}

説明：

目的: Shape クラスは、円や四角形などの特定の形状を継承できる基本クラスまたは「プロトタイプ」として機能します。

clone() メソッド: これはプロトタイプ パターンの重要な部分です。クラスの新しいインスタンスを最初から作成するのではなく、既存のインスタンス (または「プロトタイプ」) のクローンを作成します。この場合、Object.create(this) は、元の Shape.

パート 2: サークル授業

class Circle extends Shape {
  constructor(radius = 0, color = 'White') {
    super('Circle', color); // Calls the parent (Shape) constructor
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

説明：
目的: Circle クラスは Shape クラスを拡張し、特定の種類の形状を表します。

属性:

• radius: 円の半径。
• コンストラクター内で、super() 関数は、 形状クラス。形状タイプと色として「Circle」を渡します。

getArea() メソッド: これは、式 π * radius^2 を使用して円の面積を計算します。

パート 3: Rectangle クラス

class Rectangle extends Shape {
  constructor(width = 0, height = 0, color = 'White') {
    super('Rectangle', color);  // Calls the parent (Shape) constructor
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

説明：

目的: Rectangle クラスは Shape クラスを拡張し、別の特定の種類の形状 (長方形) を表します。

• Circle クラスと同様に、Rectangle クラスは super() を使用して親クラス Shape コンストラクターを呼び出し、これが「Rectangle」であることを指定します。
• getArea() メソッド: width * height
という式を使用して長方形の面積を計算します。

パート 4: プロトタイプのクローン作成と使用

const circlePrototype = new Circle();  // Create prototype
const myCircle = circlePrototype.clone();  // Clone the prototype
myCircle.radius = 5;
myCircle.color = 'Red';

const rectanglePrototype = new Rectangle();  // Create prototype
const myRectangle = rectanglePrototype.clone();  // Clone the prototype
myRectangle.width = 10;
myRectangle.height = 5;
myRectangle.color = 'Blue';

説明：

ここでは、new キーワードを使用して myCircle オブジェクトと myRectangle オブジェクトを最初から作成するのではなく、プロトタイプのクローンを作成しています。

クローン作成プロセス:

• まず、プロトタイプ インスタンス (circlePrototype と RectanglePrototype) を作成します。
• 次に、 clone() メソッドを使用してこれらのプロトタイプのクローンを作成し、プロトタイプ オブジェクトを継承する新しいオブジェクトを作成します。

クローンインスタンスの変更:

• クローン作成後、ニーズに合わせてクローン オブジェクト (myCircle および myRectangle) のプロパティ (半径、幅、高さ、色など) を変更します。
• これにより、必要なプロパティのみを変更して、基本プロトタイプから複数のオブジェクトを簡単に作成できるようになります。

パート 5: アウトプット

console.log(myCircle.getDetails()); // Output: Type: Circle, Color: Red
console.log(`Circle Area: ${myCircle.getArea()}`);  // Output: Circle Area: 78.54

console.log(myRectangle.getDetails()); // Output: Type: Rectangle, Color: Blue
console.log(`Rectangle Area: ${myRectangle.getArea()}`);  // Output: Rectangle Area: 50

説明：

• Shape クラスから継承した getDetails() メソッドを使用して、myCircle と myRectangle の詳細 (タイプと色) を出力します。
• また、getArea() メソッド (Circle クラスと Rectangle クラスに固有) を使用して、各形状の面積を計算して表示します。

プロトタイプ設計パターンの視点:

• プロトタイプの作成: Circle と Rectangle の新しいオブジェクトを最初から作成する代わりに、最初にプロトタイプ インスタンス (circlePrototype と RectanglePrototype) を作成します。
• クローン作成: プロトタイプが存在すると、 clone() メソッドを使用してプロトタイプに基づいて新しいオブジェクトが作成されます。これがプロトタイプ パターンの本質です。既存のオブジェクト (プロトタイプ) をコピーしてオブジェクトを作成します。

使用事例：

プロトタイプ パターンは次の場合に役立ちます:

• 既存のオブジェクトのクローンを作成して、新しいオブジェクトを作成する必要があります。
• サブクラス化を避け、既存のオブジェクトをブループリントとして直接再利用したいと考えています。
• 作成にコストがかかるか複雑で、同様のオブジェクトを多数作成する必要がある場合。プロトタイプを使用することで、プロセスを合理化し、効率を向上させることができます。

ここまで進んだ方は?✨、ご質問やご意見があれば、以下にコメントを残してください。ぜひご意見を伺い、素晴らしいディスカッションをしていきたいと思っています!✨