Science Knowings: JavaScript Course For Social Media

Prototype Pattern

Prototype Pattern: An Introduction

Welcome back! In today's session, we'll dive into the Prototype Pattern, a powerful Design Pattern used in JavaScript and many other programming languages.

This pattern allows us to create new objects by cloning existing objects, providing a flexible and efficient way to create and share complex objects.

Benefits of Prototype Pattern

The Prototype Pattern offers several benefits:

  • Code Reusability: Clone existing objects instead of recreating them from scratch, reducing code duplication and improving maintainability.
  • Performance: Cloning objects is generally faster than creating new ones, especially for complex objects with many properties and methods.
  • Flexibility: Allows for easy customization and extension of existing objects by adding new properties and methods to the prototype.

When to Use Prototype Pattern?

Consider using Prototype Pattern when:

  • You need to create multiple objects with similar properties and methods.
  • You want to reduce code duplication and improve performance by cloning objects.
  • You need to extend or modify existing objects dynamically without affecting other instances.

Implementation of Prototype Pattern

To implement Prototype Pattern:

  1. Create a Prototype Object: Define a prototype object that contains the shared properties and methods for all cloned objects.
  2. Clone Objects: Use the JavaScript Object.create() method or the ES6 class syntax to clone objects based on the prototype.
  3. Customize Clones (Optional): Modify or extend cloned objects as needed by adding new properties or methods.

Clone Objects vs. New Objects

Cloning objects differs from creating new objects:

  • Cloning: Creates a new object that inherits properties and methods from an existing prototype object.
  • New Objects: Creates brand new objects with their own set of properties and methods.

Prototype Chain

Every object in JavaScript has a prototype property that points to its prototype object. When accessing a property on an object that doesn't exist on that object, JavaScript searches the prototype chain to find the property.

const obj = {name: 'John'};  obj.age; // undefined  // Search prototype chain  obj.__proto__.age; // 30

Example 1 - Simple Objects

Prototype Object:

const personProto = {  getName: function() {    return this.name;  } };
Create Object:
const person1 = Object.create(personProto); person1.name = 'John';

Example 1 - Canvas API

Canvas API uses Prototype Pattern extensively:

const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d');

Where context inherits methods and properties from the CanvasRenderingContext2D prototype.

Example 1 - Game Programming

In game development, objects like enemies or characters can be cloned from prototypes:

const enemyProto = {  move: function() {    // ... move logic  } };  const enemy1 = Object.create(enemyProto); enemy1.position = { x: 10, y: 20 };

Example 2 - jQuery Objects

jQuery extensively uses Prototype Pattern:

const $ = jQuery; const div = $('div');

Where $ and div inherit methods and properties from their respective prototypes.

Example 2 - Framework Objects

Frameworks like Angular and React use Prototype Pattern for component creation:

// Angular Component  @Component({  selector: 'my-component' })  export class MyComponent {    // ... component logic  }

Components inherit properties and methods from the framework's prototype.

Example 2 - Class Inheritance

In ES6 classes, inheritance can be achieved using Prototype Pattern:

class Parent {  constructor(name) {    this.name = name;  }  getName() {    return this.name;  } }  class Child extends Parent {  constructor(name, age) {    super(name);    this.age = age;  }  getAge() {    return this.age;  } }

ES6 Class Example

ES6 classes implement Prototype Pattern under the hood:

class Person {  constructor(name) {    this.name = name;  }  getName() {    return this.name;  } }  const person = new Person('John');

Where person inherits properties and methods from the Person prototype.

Pros and Cons of Prototype Pattern

Pros:

  • Code Reusability
  • Performance
  • Flexibility

Cons:

  • Can lead to complex inheritance hierarchies
  • Prototype modifications affect all cloned objects

Next Up: Constructor Function

In our next session, we'll explore Constructor Functions, another technique for creating objects in JavaScript. Follow us to learn more!