Javascript

O.O.P in Javascript

Object-oriented programming is simply a programming pattern that is based on the concept of different types of objects and their properties.Now, mostly all...

Written by Luci · 3 min read >

Object-oriented programming is simply a programming pattern that is based on the concept of different types of objects and their properties.
Now, mostly all programming languages support OOP, but in this article, we would look into key characteristics of OOP in javascript and I would ensure to exemplify using simple examples.

We would take a look at two key OOP principlesinheritance and polymorphism on-base level in the sense of how it actually relates to javascript code, using the core characteristics of OOP in javascript to exemplify these principles, we have;

Constructors and the “this” keyword.

The two most essential things in Object-oriented programming in javascript and just about any other programming language is the this keyword and the constructors.

While Es6+ is considered a syntactic sugar and provides a more convenient way of writing constructors or declaring classes, I would be making use of Es5 in this article so we can have a deeper understanding of how constructors work under the hood.

Just like object literals where key-value pairs objects are assigned to a variable so does a constructor work but for multiple instances, unlike object literals, constructors consist of prototypes and inheritance.

First, having a constructor of either a single or multiple properties, we can instantiate an object from it using the new keyword. See code demonstration and console results below:

function Entity(name) {
  this.name = name;
} // declaration of a single property "Entity" constructor taking in a "name" argument

const human = new Entity('Creature'); // instantiating using the "new" keyword and assigning "Creature" as a name

console.log(human); // calling instantiated variable
Console Image of the instantiated constructor

The this keyword is a very important keyword, its value is determined by the current context in which your code is running. In our example, its value is scoped to the Entity function context. Whereas if used outside the function scope or in the global scope you would get the window object instead since it now exists in a global context. You can learn more about this keyword here.

You can add multiple properties to the constructor as well and instantiate them differently.

Prototypes & Prototypal Inheritance

Every object in javascript has a prototype. A prototype itself is an object, and all objects can inherit properties and methods from their prototypes. This means we can as well assign or append our choice of functions into the constructor prototypes chain.

See code representation below:

function Entity(name, dod) {
  this.name = name;
  this.creationDate = new Date(dod);
} // declaration of a multiple property "Entity" constructor

Entity.prototype.getTotalYears = function() {
  return new Date().getFullYear() - this.creationDate.getFullYear();
} // inputing the "getTotalYears" function into the "Entity" constructor's prototype

const human = new Entity('Creature', 'january 09 2000'); // instantiating using the "new" keyword and assigning a name and date 


console.log(human.getTotalYears()); // logging the total years of the instantiated variable using the "getTotalYears" function in the prototype
console.log(human); // logging the instantiated variable
The results of the logged code in the console

Prototypal Inheritance is when an object inherits its properties from another object in the same code context, this can be achieved with the help of object.create() method.

See code representation below:

function person(name) {
  this.name = name;
} // initializing "person" constructor 

person.prototype.greets = function() {
  return `${this.name} says hi`;
} // creating a "greets" function for the person constructor and assigning to it's prototype

const Yasir = new person('Yasir'); // instantiating a new student object

function Entity(name, regards) {
  person.call(this, name); // calling the "person" constructor and assigning it to the "Entity" constructor

  this.regards = regards;
} // initializing "Entity" constructor

Entity.prototype = Object.create(person.prototype); // INHEERITING THE "PERSON" CONSTRUCTOR PROTOTYPE TO THE "ENTITY" CONSTRUCTOR PROTOTYPE

const MrSmith = new Entity('Mr.Smith', 'how are you?'); // instantiating a new "Entity" object

console.log(Yasir); // logging the student object

console.log(MrSmith); // logging the teacher object

console.log(MrSmith.greets()); // calling the "greets()" function from "person" constructor on the "Entity" constructor and printing the result to the console
The console Image of the above code results 

Conclusion

There are core objects that make use of constructors but are not advisable to use, for instance, the Date() object.
When working with object-literals prototypes are gotten from object.prototype but when working with a constructor object it is gotten from (the constructor name).prototype
Prototypes can not be accessed by a for-in loop.

The art of appending/assigning functions into the constructor’s prototype is considered efficient, and in good practice, it is advised.
The Call() method is a function used to call another function from another code block in the same context.

Written by Luci
I am a multidisciplinary designer and developer with a main focus on Digital Design and Branding, located in Cluj Napoca, Romania. Profile
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x