JS Intermediate – All About (OOP)

Abstraction

Abstraction is one of the key concepts of object-oriented programming (OOP) languages. Its main goal is to handle complexity by hiding unnecessary details from the user. That enables the user to implement more complex logic on top of the provided abstraction without understanding or thinking about all the hidden complexity.

Encapsulation

Encapsulation is another fundamental concept in object-oriented programming (OOP). Creating a class by combining the attributes and behaviors of an object is called encapsulation. It describes the idea of bundling data and methods that work on that data within one unit.

Inheritance

In object-oriented programming, a class can inherit from another class as needed. It is a mechanism where you can derive a class from another class for a hierarchy of classes that share a set of attributes and methods. Here, the inherited class is called the base class and the class which inherits another class is called the derived class.

Polymorphism

Polymorphism means many forms. Polymorphic objects can be created in the program through this feature of object-oriented programming. The word polymorphism is used in various contexts and describes situations in which something occurs in several different forms. Computer science describes the concept that objects of different types can be accessed through the same interface. Each type can provide its own, independent implementation of this interface. It is one of the core concepts of object-oriented programming (OOP).

Factory Pattern

About Factory Pattern, it can be used to create objects directly without using the new keyword. Instead, it creates a common interface that creates objects with subclasses. In Javascript, to create a class we can use two patterns where one is known as Factory Pattern and another is Constructor Pattern.

Example:

var createRect = function (width, height) {
   return {
       width: width,
       height: height,
 
       draw: function () {
           console.log('I\'m a rectangle');
           this.printProp()
       },
       printProp: function () {
           console.log('My width is: ' + this.width);
           console.log('My height is: ' + this.height);
           console.log('The Area is: ' + this.height * this.width + '\n\n');
       }
   }
}
var rect1 = createRect(10,12)
rect1.draw()
var rect2 = createRect(16,12)
rect2.draw()

Output:

I'm a rectangle
My width is: 10
My height is: 12
The Area is: 120
 
I'm a rectangle
My width is: 16
My height is: 12
The Area is: 192

Constructor Pattern

A factory method builds new objects according to the client’s requests. JavaScript’s new operator can be used to call a constructor function in order to create objects. However, there are some circumstances in which the client should not be expected to know which of numerous candidates objects to instantiate. Through the use of the factory method, the client can delegate the generation of objects while still maintaining control over the sort of object to create.

Example:

var Rectangle = function (width, height) {
   this.width = width
   this.height = height
 
   this.draw = function () {
       console.log('I\'m a rectangle');
       this.printProp()
   }
 
   this.printProp = function () {
       console.log('My width is: ' + this.width);
       console.log('My height is: ' + this.height);
       console.log('The Area is: ' + this.height * this.width + '\n\n');
   }
}
 
var rect1 = new Rectangle(10, 12)
rect1.draw()
var rect2 = new Rectangle(16, 12)
rect2.draw()

Output:

I'm a rectangle
My width is: 10
My height is: 12
The Area is: 120
 
I'm a rectangle
My width is: 16
My height is: 12
The Area is: 192

Methods for Manipulate Object

These three methods in JavaScript that are used to manipulate the this keyword and pass arguments to functions.

The bind() method creates a new function that has the same body as the original function but with a specified this value. This can be useful for creating new functions that can be called in different contexts. For example, you can bind a function to a specific object and then call it with different arguments in different situations.

The call() method is similar to bind(), but instead of returning a new function, it immediately invokes the function with a specified this value and any additional arguments passed in as separate parameters. This can be useful for invoking a function with a specific this value, such as when working with objects that have methods.

The apply() method is similar to call(), but instead of passing arguments as separate parameters, it expects an array of arguments to be passed in as a single argument. This can be useful for calling a function with a variable number of arguments, or for passing in an array of arguments that have been dynamically generated.

bind()

bind() is a function that aids in the creation of another function that can be executed later with the newly provided context of this.

Example:

function myFunc (c,d) {
   console.log(this);
   console.log(this.a * c + this.b * d + '\n\n');
}
myFunc()
var bindTest = myFunc.bind({a:10, b:13});
bindTest(4,6);
var bindTest = myFunc.bind({a:10, b:13}, 4, 7); //Both works
bindTest();

Output:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
NaN
 
{a: 10, b: 13}
118
 
{a: 10, b: 13}
131

call()

You can alter the context of the invoking function by using the function call(). In plain English, it enables you to substitute any desired value for the value of this inside a function.

Example:

function myFunc (c,d) {
   console.log(this);
   console.log(this.a * c + this.b * d + '\n\n');
}
myFunc()
myFunc.call({a:10, b:13}, 11, 16)

Output:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
NaN
 
{a: 10, b: 13}
318

apply()

apply() and the call function are extremely similar. The main distinction is that you can pass an array as an argument list when using apply().

Example:

function myFunc (c,d) {
   console.log(this);
   console.log(this.a * c + this.b * d + '\n\n');
}
myFunc()
myFunc.apply({a:10, b:13}, [11, 16])

Output:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
NaN
 
{a: 10, b: 13}
318