Decorators and Object creation pattern in JS

Object creation mechanisms increase the flexibility and reuse of existing code. Here in this post, we will see the Object Creation Pattern in JavaScript.

Some patterns to create an object are:

• Factory pattern
• Constructor pattern
• Prototype pattern
• Constructor / Prototype pattern

Factory Pattern

The factory pattern uses a function to abstract away the process of creating specific objects and returning their reference. It returns a new instance whenever called.

function createFruit(name) {
    const obj = new Object(); 
    obj.name = name; 
    obj.showName = function () {
        console.log("I'm " + obj.name); 
    }
    return obj; 
}

const fruitOne = createFruit('Apple'); 
const fruitTwo = createFruit('Orange'); 

fruitOne.showName(); // I'm Apple
fruitTwo.showName(); // I'm Orange

Constructor Pattern

In the constructor pattern, instead of returning the instance from the function, we use the new operator along with the function name.

function createFruit(name) {
    this.name = name; 
    this.showName = function () {
        console.log("I'm " + this.name); 
    }
}

const fruitOne = new createFruit('Apple'); 
const fruitTwo = new createFruit('Orange'); 

fruitOne.showName(); // I'm Apple
fruitTwo.showName(); // I'm orage

Prototype Pattern

The prototype pattern adds the properties of the object to the properties that are available and shared among all instances.

function Fruit(name) {
    this.name = none; 
}

Fruit.prototype.showName = function() {
    console.log("I'm " + this.name); 
}

const fruitOne = new Fruit('Apple'); 
fruitOne.showName(); // I'm Apple

const fruitTwo = new Fruit('Orange'); 
fruitTwo.showName(); // I'm Orange

Constructor / Prototype pattern

This is a combination of the constructor and prototype patterns. The constructor pattern defines object properties, while the prototype pattern defines methods and shared properties.

function Fruit() { }

Fruit.prototype.name = name; 
Fruit.prototype.showName = function () {
    console.log("I'm " + this.name); 
}

const fruit = new Fruit(); 
fruit.name = 'Apple'; 
fruit.showName(); // I'm Apple

What is a decorator pattern?

The decorator pattern is a structural design pattern that attaches additional responsibilities to an object dynamically. This is a concept of adding extra functionality to the original structure.

However, keeping it decoupled and clean.

The decorator pattern adds new behaviour to objects dynamically at runtime wrapping itself around the original object. Multiple decorators can add or override functionality to the original object.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Example:

function Fruit() {
    this.cost = function () { return 100; }; 
}

function Orange(fruit) {
    var v = fruit.cost(); 
    fruit.cost = function () {
        return v + 75; 
    }
}

function Apple(fruit) {
    var v = fruit.cost(); 
    fruit.cost = function () {
        return v + 200; 
    }; 
}    

var fruit = new Fruit(); 
Orange(fruit); 
Apple(fruit); 
console.log('Total Cost', fruit.cost()); // Total Cost: 375

It looks like Inheritance?

Inheritance and the decorator pattern allows changing object behaviour. But how they achieve this behaviour change is where inheritance and the decorator pattern are different.

The decorator would be difficult to implement when derived classes need to access non-public fields or methods in the parent class. The decorator pattern eliminates the problem of exploding class hierarchy encountered with inheritance.

THANKS FOR READING ⚡