JavaScript | Nested Classes

28 May, 2020
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
javascript-oop
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.