Skip to content
Related Articles

Related Articles

JavaScript | Nested Classes
  • Last Updated : 28 May, 2020
GeeksforGeeks - Summer Carnival Banner

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:




<!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>

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:




<!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>

Output:

Inner class Property z:10

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :