What is a prototype design pattern?
It's a software pattern that allows to use a prototype(sample, model) to replicate, clone or create objects that follow the same structure.
Type: Creational
Main use Cases
Cloning existing object instead of creating new one assuming that the object creation is an expensive operation.
The expensive operation examples include: sending multiple requests, querying a database, generating complex object property etc.
What problems does it solves?
It solves performance issues. By reducing resources hungry objects creation it allows an application to be more performant.
Furthermore, the pattern can abstract some of the object creation logic.
Related creation patterns:
- Abstract factory who allows dynamic configuration.
How does it work?
There are few ways to use prototype pattern:
- The standard that is used in object orientated languages
- Based on the native prototype inheritance
The OOP one, mostly used in objective orientated languages. The AIPrototype class takes the initial prototype of an AI and uses it as a temple to create multiple AI's.
class AIPrototype {
constructor(prototype){
this.name = prototype.name;
this.type = prototype.type;
this.brains = prototype.brains || this.generateBrains();
}
clone(){
// NOTE: if any of these properties are not a primitive type you need to create a shallow or deep copy.
// For example if `this.brains` would be an object all AI objects that are generated
// from this `clone` function would use brain.
// Though that may be good as they would think as one.
return new AI(this.name, this.type, this.brains)
}
generateBrains() {
// super expensive operation
const randomStringThatSimulatesBrainFunctionality = Math.random().toString(36).substring(7);
return randomStringThatSimulatesBrainFunctionality
}
}
class AI {
constructor(name, type, brains) {
this.name = name;
this.type = type;
this.brains = brains
}
}
const prototype = new AI("GLaDOS", "rampant");
const rampantAIPrototype = new AIPrototype(prototype);
const rampantAIV1 = rampantAIPrototype.clone();
const rampantAIV2 = rampantAIPrototype.clone();
console.log(rampantAIV1.brains === rampantAIV2.brains) // true
Native one, it uses Javascript prototype inheritance to share the same brains across multiple AI's.
class AI {
constructor(name, type, brains){
this.name = name;
this.type = type;
AI.prototype.brains = brains || this.generateBrains();
}
generateBrains() {
// super expensive operation
const randomStringThatSimulatesBrainFunctionality = Math.random().toString(36).substring(7);
return randomStringThatSimulatesBrainFunctionality
}
}
const rampantAI = new AI("GLaDOS", "rampant");
const friendlyAI = new AI("GLaDOS", "friendly");
console.log(rampantAI.brains === friendlyAI.brains) // true
Additional examples that could benefit from Javascript prototype inheritance might be Calculator. There could be add, div, sub functions defined in the prototype.
Feedback
Hey if you reached this place please tell me how did I do. I am experimenting and learning how to write a post.
So I would really appreciate the feedback, how was it, was it too short, was it too long :)
Sources
- https://en.wikipedia.org/wiki/Prototype_pattern
- https://medium.com/front-end-hacking/javascript-design-patterns-ed9d4c144c81
- https://github.com/fbeline/Design-Patterns-JS/
- https://weblogs.asp.net/dwahlin/techniques-strategies-and-patterns-for-structuring-javascript-code-the-prototype-pattern
- https://www.dofactory.com/javascript/prototype-design-pattern
- https://www.youtube.com/watch?v=xizFJHKHdHw
Top comments (0)