Javascript OOPS

Introduction to Java-script OOPS

 

JavaScript is a high level, interpreted, programming language used to make web pages more interactive. It is a very powerful client-side scripting language that makes your webpage more lively and interactive.

JavaScript  is a object-oriented programming language which is used by several websites for scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for adding programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by all other graphical web browsers. With JavaScript, users can build modern web applications to interact directly without reloading the page every time. The traditional website uses JavaScript to provide several forms of interactivity and simplicity.

There are certain features or mechanisms which makes a Language Object-Oriented like:

  • Encapsulation

  • Inheritance

  • Abstraction

  • Polymorphism

    Encapsulation −

    Encapsulation means hiding information or data. It refers to the ability of the object to execute its functionality without revealing any execution details to the caller. In other words, the private variable is only visible to the current function and is not accessible to the global scope or other functions.

    Inheritance −

        JavaScript inheritance is a mechanism allows us to create a new class using the existing class. It means the child class inherits all the properties and behaviors of the parent class.

    Generally, JavaScript is not a class-based language. The keyword class was introduced in ES6 but is syntactical sugar, JavaScript remains prototype-based. In JavaScript inheritance is achieved by using the prototype. This pattern is called Behavior Delegation Pattern or prototypal inheritance.

    Abstraction-

     Abstraction means implementation hiding. It is a way of hiding the implementation details and only showing the essential features to the caller. In other words, it hides irrelevant details and shows only what’s necessary to the outer world. A lack of abstraction will lead to problems of code maintainability.

    The ability to call the same method on different objects and have each of them respond in their own way is called polymorphism.

    Polymorphism –

  • Object–

    An Object is a unique entity which contains property and methods.Object can be created in two ways in JavaScript with using an Object Literal and using using an object constructor.

    1.Object literal:-

Create a new object in JavaScript by setting its properties inside curly braces. Object literals property values can be any data types, like function literals, arrays, strings, numbers, or boolean.

Let’s create an object with a named book, with properties such as author, published year, title, and a method — summary.

const book = {
   title: "Hippie",    
   author: "Paulo Coelho",  
   year: "2018"
}

After creating an object you can get the value with dot notation. For example, we can get the value of the title with book.title. We can also access the properties with square brackets: book[‘title’]

    2.Object constructor:-

Object constructor is the same as a regular function. It will be called each time an object is created. We can use them with the new keyword. Object constructor is useful when we want to create multiple objects with the same properties and methods.

const book = {
   title: "Hippie",    
   author: "Paulo Coelho",  
   year: "2018"
}const book1 = {
   title: "The Alchemist",    
   author: "Paulo Coelho",  
   year: "1988", 
}

If we want to create multiple book objects we have to duplicate the code for each book. We can keep creating books but it’s kind of a pain — the object constructor helps us to reuse the object literal.

function Book(title, author, year) { 
   this.title = title; 
   this.author = author; 
   this.year = year;
} const book1 = new Book ('Hippie', 'Paulo Coelho', '2018');console.log(book1);
> Book {
     title: "Hippie", 
     author: "Paulo Coelho", 
     year: "2018"
  }// if we want to create more than one book just we call function book with new keyword.const book2 = new Book ('The Alchemist', 'Paulo Coelho', '1988');

book1 and book2 create an instance of Book and assigned it to a variable. To find out whether an object is an instance of another one. We can use instanceof.

 Extending of object in javascript:-

The extends keyword can be used to extend the objects as well as classes in JavaScript. It is usually used to create a class which is child of another class.

Syntax:-

   class childclass extends parentclass {…}

   class parentclass extends in-built object {…}

Below example depicts how a child class uses properties of parent class using the keyword extends and by creating objects of the child class. In example 1, we see that class Profile has two attributes name and age. Now we will see that class Student acquires both attributes of class Profile using the keyword extends with an added attribute languages and then all attributes are displayed.

Example:-

<script>
 
    // Declaring class
    class Profile { 
         
        // Constructor of profile class
        constructor(name, age) { 
            this.name = name;
            this.age = age;
        }
 
        getName() {
             
            // Method to return name
            return this.name; 
        }
 
        getAge() {
             
            // Method to return age
            return this.age; 
        }
 
        getClass() {
            return this;
        }
    }
 
// Class Student extends class Profile 
class Student extends Profile { 
     
    // Each data of class Profile can be
    // accessed from student class.
    constructor(name, age, languages) {
         
        // Acquiring of attributes of parent class
        super(name, age); 
        this.lang = [...languages];
    }
 
    // Method to display all attributes
    getDetails() {
        console.log("Name : " + this.name);
        console.log("Age : " + this.age);
        console.log("Languages : " + this.lang);
    }
}
 
// Creating object of child class with passing of values
var student1 = new Student("Ankit Dholakia", 24,
            ['Java', 'Python', 'PHP', 'JavaScript']);
student1.getDetails(); 
</script>

Cloning of object in javascript:-

Cloning a JavaScript object is a task that is used mostly because we do not want to create the same object if the same object already exists

  • Classes–

    A class can have many Object, because class is a template while Object are instances of the class or the concrete implementation. Before we move further into implementation, we should know unlike other Object Oriented Language there is no classes in JavaScript we have only Object.