Tratemos de entender qué es la clase. Una clase en JavaScript es un tipo de función, que se puede inicializar tanto a través de la palabra clave de función como a través de la palabra clave de clase. En este artículo, cubriremos la clase interna en javascript mediante el uso de una palabra clave de función. Aquí hay un ejemplo de la clase que usa la palabra clave function.
Ejemplo:
<!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>
Producción:
miss anonymous
La diferencia entre clase como función y función es que usamos esta palabra clave en una definición de función que hace que funcione como una clase. Ahora, una clase interna se define de manera similar.
Como puede ver en este código, hemos creado una OuterClass y una InnerClass en él de la misma manera que lo hicimos antes. Pero, para acceder a las propiedades de la clase externa, necesitamos tener la dirección del objeto. Y esa es la única forma correcta de hacerlo. Como puede ver en el ejemplo anterior, para acceder a la propiedad x de OuterClass hemos usado la variable objOuterClass (que almacena la dirección de la instancia actual de la clase) y usando esa dirección de objeto podemos acceder fácilmente a cualquier propiedad o método de la clase exterior en la clase interior.
Ahora, se puede aplicar el mismo truco al intentar acceder a los miembros o propiedades de la clase interna. Como puede ver, hemos creado un objeto de clase interna fuera de la clase interna. Entonces, cada vez que se crea el objeto de la clase externa, estamos creando el objeto de la clase interna y almacenando su dirección en la variable innerObj.
Ejemplo:
<!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>
Producción:
Inner class Property z:10
Publicación traducida automáticamente
Artículo escrito por miss_anonymous y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA