JavaScript is a prototypal-based scripting language, created by Brendan Eich back in 1995 for the sake of bringing dynamicity to the web, since then, JavaScript has been evolving to be now one of the most common programming languages used on the client-side by all modern browsers and also in the server-side with NodeJs, It could also be used to build desktop and mobile apps using some of the modern frameworks out there, i.e. ElectronJs, and React Native
Prototype-Based Language
JavaScript is an Object-Oriented Programming language but it doesn’t use classes? how is that?
OOP is one programming paradigm but it has two different styles, class-based and Prototypal-Based, in the programming languages that use the class-based style i.e Python & Java, to define an object you need first to create a blueprint for it which is the class, a class defines the object properties and methods, we use the class to initiate objects with custom properties.
a simple example with python;
# Define a class for cars objects
class Car():
""" Attributes:
model (str): Model of the car
color (str): The color of the car
year (int): The production year
loc (int); car location
Methodes:
move(loc): move the car method
"""
def __init__(self, model, color, year, loc = 0):
self.model = model
self.color = color
self.year = year
def self.move(loc):
return self.loc += 1
# Now we can initaite multiple objects of that class
bmw_x3 = new Car("bmw_x3", "red", 2012)
bently_mulsanne = new Car("bently_mulsanne", "black", 2020)
toyota_4runner = new Car("toyota_4runner", "white", 2016)How does it differ in JavaScript?
In JavaScript, instead of initiating objects from classes, we initiate objects from other objects ( called prototypal objects ). one way to recreate the same example in JavaScript:
// Define Car object
const Car = function(model, color, year, loc = 0) {
this.model = model;
this.color = color;
this.year = year;
this.loc = loc;
}
Car.prototype.move = function() {
this.loc++;
}
// Now we can initaite multiple objects of that class the same way
const bmw_x3 = new Car("bmw_x3", "red", 2012)
const bently_mulsanne = new Car("bently_mulsanne", "black", 2020)
const toyota_4runner = new Car("toyota_4runner", "white", 2016)You might get confused here that we defined Car as a function, not an object, but everything in JavaScript is an object including functions, by using the keyword “new” we are invoking the function in what’s called the Constructor Mode, What is happening behind, is creating a new object with the properties provided using Object.Create function then returning it, here’s how the Car function looks like in the Constructor mode:
const Car = function(model, color, year, loc = 0) {
// const obj = Object.Create(Car.prototype)
obj.model = model;
obj.color = color;
obj.year = year;
obj.loc = loc;
// Return obj;
}Now we understood how the object is created, what about the methods?
That’s where the term Prototype comes in, in JavaScript each function object has a special property named: Prototype, Prototype is an object that holds methods related to that object.
Here’s what happens when we look up for the move function upon the object bmw_x3
bmw_x3.move();
The lookup fails, because the move function is not defined in bmw_x3 object, but the failed lookups on bmw_x3 will fall back to the Car prototype methods, which happens because of the magic that Object.Create Creates!
This’s what’s known as Prototypal-Inheritance in the JavaScript World.
Most JavaScript Objects are delegated to one top level object called object prototype where all methods are defined for example:
The array prototype:
- It has special methods like indexOf and slice, …etc
- All array objects are delegated to the array prototype and this last one is delegated to the Object Prototype ( Highest level Object )
We can check that out in the console by defining an empty array then check it:
