JavaScript | Nested Classes

Let us try to understand, what is class. A class in JavaScript is a type of function, which can be initialized through both function keyword as well as through class keyword. In this article, we will cover the inner class in javascript through the use of a function keyword. Here’s an example of the class using the function keyword.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Class as a function</title>
        <meta charset="utf-8" />
        <script>
            
            // Write Javascript code here
            function Employee() {
                
                // Here we have created a property
                // name of class Employee;
                this.name = ""; 
                this.employeeId = 0;
            }
            
            // An (global) object of type Employee
            // is created.
            var emp = new Employee(); 
  
            emp.name = "miss anonymous";
            emp.employeeId = 101;
            function showName() {
                alert(emp.name);
            }
        </script>
    </head>
    <body>
        <button type="button" onclick="showName()">
          Click Me
        </button>
    </body>
</html>

chevron_right


Output:

miss anonymous

The difference between class as a function and function is that we make use of this keyword in a function definition that makes it work as a class. Now, an inner class is defined in a similar way.

As you can see in this code, we have created an OuterClass and InnerClass in it just the same way as we did before. But, to access the properties of the outer class we need to have the address of the object. And that is the only right way to do it. As you can see in the example above, in order to access the property x of OuterClass we have used the variable objOuterClass (which stores the address of the current instance of the class) and using that address of object we can easily access any property or method of the outer class in the inner class.



Now, the same trick can be applied while trying to access the members or properties of the inner class. As you can see, we have created an inner class object outside the inner class. So every time the object of Outer Class is created we are creating the object of inner class ad storing its address in the variable innerObj.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Inner class in JS</title>
        <meta charset="utf-8" />
        <script>
            function OuterClass() {
                
            // Property x of OuterClass
            this.x = 0; 
            this.y = 30;
                
            // Assign the variable objOuterClass the address 
           // of the particular instance of OuterClass
            var objOuterClass = this; 
                
            // Inner class
            function InnerClass() {
              this.z = 10;
              this.someFuncton = function () {
                  alert("inner class function");
                    }; 
                      
             // Assign the address of the anonymous function.
             // to access the value of property of outer class 
             // in inner class.
               this.accessOuter = function () {
                  alert("value of x property:" + objOuterClass.x);
                    };
             
                
                // InnerClass ends to access the inner class 
                // properties or methods.
                this.innerObj = new InnerClass();
            }
  
          function show() {
             var outerClassObj = new OuterClass();
            alert("Inner class Property z:" + outerClassObj.innerObj.z);
            }
        </script>
    </head>
  
    <body>
        <button type="button" onclick="show()">
         Click Me
        </button>
    </body>
</html>

chevron_right


Output:

Inner class Property z:10

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.