How To Create Static Methods In Class Using JavaScript

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

Static methods are defined on the class itself, and not on the prototype.

How To Create Static Methods In Class Using JavaScript

ECMAScript 2015

ES6, also known as ECMAScript2015, introduced classes.

 

Class Definition

Use the keyword class to create a class, and always add the constructor() method.

The constructor method is called each time the class object is initialized.

Example A simple class definition for a class named "Car":

class Car {
    constructor(brand) {
        this.carname = brand;
    }
    present() {
        return "I have a " + this.carname;
    }
}


Now you can create objects using the Car class:
<script>
    class Car {
        constructor(brand) {
            this.carname = brand;
        }
    }

    mycar = new Car("Ford");

    document.getElementById("demo").innerHTML = mycar.carname;
</script>
 

Static Methods

Static methods are defined on the class itself, and not on the prototype.

That means you cannot call a static method on the object (mycar), but on the class (Car):

Example(1)

<script>
    class Car {
        constructor(brand) {
            this.carname = brand;
        }
        static hello() {
            return "Hello!!";
        }
    }

    mycar = new Car("Ford");

    //Call 'hello()' on the class Car:
    document.getElementById("demo1").innerHTML = Car.hello();

    //and NOT on the 'mycar' object:
    //document.getElementById("demo").innerHTML = mycar.hello();
    //this would raise an error.
</script>


If you want to use the mycar object inside the static method, you can send it as a parameter:
Example(2)

<script>
    class Car {
        constructor(brand) {
            this.carname = brand;
        }
        static hello(x) {
            return "Hello " + x.carname;
        }
    }

    mycar = new Car("Ford");

    document.getElementById("demo").innerHTML = Car.hello(mycar);
</script>


Complete Code For Creating Static Methods In Class Using JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Static Methods In Class Using JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: tomato">How To Create Static Methods In Class Using JavaScript</h1>
    </div>

    <div class="well">

        <h2 id="demo1"></h2>
        <h2 id="demo2"></h2>
        <h2 id="demo3"></h2>


        <script>
            class Car {
                constructor(brand) {
                    this.carname = brand;
                }
                static hello() {
                    return "Hello!!";
                }
            }

            mycar = new Car("Ford");

            //Call 'hello()' on the class Car:
            document.getElementById("demo1").innerHTML = Car.hello();

            //and NOT on the 'mycar' object:
            //document.getElementById("demo").innerHTML = mycar.hello();
            //this would raise an error.
            document.getElementById("demo2").innerHTML = Car.hello(mycar);
        </script>
    </div>
</div>
</body>
</html>

 

Related Post