Object-Oriented JavaScript

|JavaScript is not a class-based object-oriented language. But it still has ways of using object-oriented programming (OOP) — freeCodeCamp

Photo by Émile Perron on Unsplash

What is OOP: According to Wikipedia, class-based programming is

a style of Object-oriented programming (OOP) in which inheritance occurs via defining classes of objects, instead of inheritance occurring via the objects alone

Keep in mind, JavaScript is a prototype-based language. According to MDN Docs “A prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object.”

There are some important concepts of object-oriented programming (OOP). Such as,

• Object, property, and method
• Class
• Encapsulation
• Abstraction
• Reusability/inheritance
• Polymorphism
• Association
• Aggregation
• Composition

Today, we will discuss some basic concepts about Object-Oriented JavaScript.

Object Creation: Everything in JavaScript acts like an object, except null and undefined. First of all, we have to know what is the Object. Simply, When a variable has some properties it is called Object. For example, we have a variable of ‘book’ if this variable has some properties then we will call ‘book’ is an Object.

let book = {
   name: 'C programming',
   author: 'XYZ',
   publisher: 'Binary',
   page: 250,
   print: function(){
      console.log(this.name + ' by ' + this.author);
   }
}

This ‘book’ has five properties. But in ‘print’ property we create a function. Remember that, when you create a function in Object that is called ‘Method’ not a function. There is no difference between the function and method. Only different in naming conversion. There are two ways to access the Object property. One is ‘Dot Notation’ another one is ‘Bracket Notation’.

console.log('Book Name: ', book.name); // Dot Notation
console.log('Author Name: ', book['author']); // Bracked Notation

If you access all this property using a different for a loop. Like this,

for (var props in book){
    console.log(props + ' = ' + book[props])
}

This Keyword: JavaScript is a functional Programming as well as Object-oriented programming. Note that, This keyword is related to the only Object. Let’s focus on some examples.

let obj = {
    name: 'Maruf',
    print: function(){
        console.log('Nmae: ' + this.name);
    }
}

Actually, here this keyword simply means access name form this ‘obj’ Object.

function justFunc() {
    function inner() {
        console.log(this);
    }
    new inner();
}

Guess, What is the answer to the inner function ‘this’. Basically, it’s a window object. Cause, It’s just a simple function, not an Object. Let’s see, when Functional Programming & Object-Oriented programming in works in one code.

let person = {
    name: 'Maruf Ahmed',
    print: function(){
        setTimeout(function(){
            console.log('Hello, ' + this.name);
        }.bind(this), 2000)
    }
}
person.print();

Here, setTimeout function is a callback function that's why initially ‘this’ keyword returns an undefined value. But if you use bind keyword then it’s work smoothly. Don’t worry we discuss Object bind method properly in this article.

Constructor Pattern:

Output:

Maruf Ahmed maruf@gmail.com
Email: maruf@gmail.com
Name: Maruf Ahmed
Email: rajib@gmail.com
Name: Rajib Hossian
Email: ohidul@gmail.com
Name: Ohidul Islam

New Keyword:

Prototype:

Output:

{ name: 'Maruf Ahmed', email: 26 }
{ name: 'Rajib Hossain', email: 24 }
Hello,  Maruf Ahmed

Bind, Call & Apply:

Inheritance With Prototype:

__proto__ vs Prototype: