JavaScript

Classes in JavaScript ES6

February 09, 2022

JavaScript Classes

JavaScript Classes are one of the features introduced in the ES6 version of JavaScript. JavaScript Classes are templates for creating JavaScript Objects.

Class is a blueprint of an object. It contains some details and based on these descriptions we can create as many objects as we want.

You can think of a class as a prototype of a User. It contains all the details like name, age, salary, organization, etc based on which the User is created and the good part is that now we can re-use this class for creating multiple users or we can extend some other classes from this class.

Defining Classes

JavaScript classes are similar to JavaScript methods For example,


    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>class</title>
            <script>

                // classs

                class company {
                    firstcar() {        // methods
                        console.log("this is first car");
                    }
                    secondcar() {       // methods
                        console.log("this is second car");
                    }
                }

                var a = new company();  // property

                a.firstcar();           // values
                a.secondcar();          // values

            </script>
        </head>
        <body></body>
    </html>


Types of Methods

  • Constructor ::
    Constructor functions are basically regular function which starts with a capital letter. Constructor function is used to create multiple instance of an object. Constructor should be executed with new operator. Main purpose of constructor function is code reusability. A constructor consists of constructor name, properties and method. We use this to assign values to the properties that are passed to constructor function during the object creation

    This Key word ...

         <script>

            class cars{
                constructor(name,color){
                    this.name=name;
                    this.color = color;
                }
            }

            var myCar = new cars ("Ford","Red");
            var myCarTwo = new cars ("BMW","Black");

            console.log(myCar);
            console.log(myCarTwo);
           
        </script>

Inheritence :


    <script>

        class cars{
            constructor(name,color){
                this.name=name;
                this.color = color;
            }             //function
            carDetails(){
                return `Car brand is ${this.name} and its color
                is ${this.color}`
            }
        }

        var myCar = new cars ("Ford","Red");
        var myCarTwo = new cars ("BMW","Black");

        console.log(myCar.carDetails());
        console.log(myCarTwo);
       
    </script>
The super keyword

It allows the child class to invoke the properties, methods, and constructors of the immediate parent class. It is introduced in ECMAScript 2015 or ES6. The super.prop and super[expr] expressions are readable in the definition of any method in both object literals and classes.

Syntax

super(arguments);

Example

In this example, the characteristics of the parent class have been extended to its child class. Both classes have their unique properties. Here, we are using the super keyword to access the property from parent class to the child class. 


     <script>

        class cars{
            constructor(name,color){
                this.name=name;
                this.color = color;
            }
            //function
            carDetails(){
                return `Car brand is ${this.name} and its color is ${this.color}`
            }
        }

        var myCar = new cars ("Ford","Red");
        var myCarTwo = new cars ("BMW","Black");

        console.log(myCar.carDetails());
        console.log(myCarTwo);

        class Model extends Car{
            constructor(name,model){                 // name is same property for inheretence and cars
                super(name)
                this.mod = mod;
            }
            // its a function
            show(){
                return `car brand is ${this.brand}and its model
                is ${this.mod}`
            }
        }

        var myCarModel = new Model("benz","mustang");

        console.log(myCarModel.show());
       
    </script>