ES6 | Class Variable Alternatives

A class is created using a class keyword. Whenever an object is initialized, the class method gets called for the object. The following examples show the class variable alternatives:

Using Class: The class keyword allows user to create a class. A class keyword is essential for the creation of a class in JavaScript.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>GeeksforGeeks</h1>
    </head>
      
    <body>
      
        <p id="gfg"></p>
      
        <script>
            class Fruit {
                constructor(fname) {
                    this.fruit1 = fname;
                }
            }
      
            Fru = new Fruit("Mango");
      
            document.getElementById("gfg").innerHTML
                    = Fru.fruit1;
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Using Methods: Every time the instance of a class is created. It is initialized using the constructor() method. If the user has not defined the constructor() method, then JavaScript does it automatically.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>GeeksforGeeks</h1>
    </head>
      
    <body>
        <p id="gfg"></p>
        <p id="gfg1"></p>
      
        <script>
            class Fruit {
                constructor(fname) {
                    this.fruit1 = fname;
                }
                present() {
                    return "My favourite fruit is "
                            + this.fruit1;
                }
            }
      
            Fru = new Fruit("Mango");
      
            document.getElementById("gfg").innerHTML
                        = Fru.fruit1;
            document.getElementById("gfg1").innerHTML
                        = Fru.present();
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Using Static Method: This methods is simple and they are called on the class and not on the objects of the class.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>GeeksforGeeks</h1>
    </head>
      
    <body>
        <p id="gfg1"></p>
      
        <script>
            class Fruit {
                constructor(fname) {
                    this.fruit1 = fname;
                }
                static new() {
                    return "Mango!!!!";
                }
            }
      
            Fru = new Fruit("Mango");
      
            document.getElementById("gfg1").innerHTML
                    = Fruit.new();
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Using Inheritance: Inheritance allows the child class to inherit the properties of the parent class. The keyword “extends” is used for this purpose.



  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>GeeksforGeeks</h1>
    </head>
      
    <body>
        <p id="gfg1"></p>
      
        <script>
            class Fruit {
                constructor(fname) {
                    this.fruit1 = fname;
                }
                present() {
                    return "My favourite fruit is "
                            + this.fruit1;
                }
      
            }
            class Healthy extends Fruit {
                constructor(fname, mod) {
                    super(fname);
                    this.healthy = mod;
                }
                show() {
                    return this.present() + ', it is very '
                             + this.healthy;
                }
            }
      
            fru = new Healthy("Mango", "healthy");
            document.getElementById("gfg1").innerHTML
                       = fru.show();
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Using Get- Set Method: Getters allows to get the values of ES6 class variables and Setters allows to set those values respectively in proper fields.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>GeeksforGeeks</h1>
    </head>
      
    <body>
        <p id="gfg1"></p>
      
        <script>
            class Fruit {
                constructor(fname) {
                    this.fruit1 = fname;
                }
      
                get fruitss() {
                    return this.fruit1;
                }
                set fruitss(x) {
                    this.fruit1 = x;
                }
      
            }
            Fru = new Fruit("Mango");
      
            document.getElementById("gfg1").innerHTML
                       = Fru.fruitss;
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Supported Browsers: The browsers supported by ES6 Class Variable Alternative are listed below:

  • Google Chrome 49
  • Firefox 45
  • Internet Explorer Edge 12
  • Opera 36
  • Safari 9

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.