Part 1: The JavaScript OLOO Pattern Explained (with pictures)

  • Part 1 covers Prototype Inheritance and delegation in JavaScript with the OLOO pattern
  • Part 2 deals with the Pseudo-classical pattern — a combination of constructor functions and prototypes that create objects in JavaScript

Traditional Class-Based Objects

class Chair
def initialize(width, height)
@width = width
@height = height
end
end
my_chair = Chair.new(50, 45)
class Chair
def initialize(width, min_height)
@width = width
@min_height = min_height
end
end
class DeskChair < Chair
def initialize(width, min_height, max_height, wheels)
super(width, min_height)
@max_height = max_height
@wheels = wheels
end
end
my_chair = Chair.new(50, 45)
my_desk_chair = DeskChair.new(50, 45, 52, 5)

JavaScript Prototypes

let myChair = {
width: 50,
height: 45,
};
In JavaScript objects don’t need classes
let myChair = {
width: 50,
minHeight: 45,
};
let myDeskChair = Object.create(myChair);
myDeskChair.maxHeight = 52;
myDeskChair.wheels = 5;
let myChair = {
init(width, height) {
this.width = width;
this.height = height;
return this;
}
};
let anotherChair = Object.create(myChair).init(40,60);
p my_desk_chair#<DeskChair:0x000055e0cfa1fdc8 
@width=50, @min_height=45, @max_height=52, @wheels=5>
console.log(myDeskChair);{ maxHeight: 52, wheels: 5 }

The Prototypal Chain: Inheritance & Delegation

console.log(myDeskChair);    // { maxHeight: 52, wheels: 5 }myDeskChair.width;           // 50
myDeskChair.min_height; // 45

Conclusion

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Complete Guide to Setting Up React Native

Desk setup

Enhance Your Redux By Using Redux Toolkit — An Intro to RTK and How It Can Help You

Upgrading React Native from 0.39.0 to 0.42.3 in a hybrid app

SVGs in React Apps

Easy Google Auth with Node.js in 2021, without Google+

10 important things of javascript

Mistletoe Offline

Learning to Code: Day 46 — Basic JavaScript Part 11

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karis Tobias

Karis Tobias

More from Medium

Part 2: The JavaScript Pseudo-Classical Pattern Explained (with pictures)

Manifest Your JavaScript Developer Power with Precise Function Invocations

The main pitfalls of learning JavaScript

JS-08— JavaScript for Programmers, Bonus Points