JavaScript Nested Classes

Last Updated : 20 Feb, 2023

Let us try to understand, what is class. A class in JavaScript is a type of function, which can be initialized through both function keywords as well as through class keywords. 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:

html

<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() { 
        document.getElementById("gfg").innerHTML = emp.name; 
    } 
</script> 
<button type="button" onclick="showName()"> 
    Click Me 
</button> 
<p id="gfg"></p>

Output:

JavaScript Nested Classes

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:

html

<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 () { 
                        document.getElementById("gfg") 
                                .innerHTML="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(); 
    document.getElementById("gfg") 
            .innerHTML = "Inner class Property z:" + outerClassObj.innerObj.z; 
    } 
</script> 
<button type="button" onclick="show()"> 
    Click Me 
</button> 
<p id="gfg"></p>