ES6 - Clases

Object Orientationes un paradigma de desarrollo de software que sigue el modelado del mundo real. Orientación a objetos, considera un programa como una colección de objetos que se comunican entre sí a través de un mecanismo llamadomethods. ES6 también admite estos componentes orientados a objetos.

Conceptos de programación orientada a objetos

Para empezar, entendamos

Object- Un objeto es una representación en tiempo real de cualquier entidad. Según Grady Brooch, se dice que cada objeto tiene 3 características:
- State - Descrito por los atributos de un objeto.
- Behavior - Describe cómo actuará el objeto.
- Identity - Un valor único que distingue un objeto de un conjunto de objetos similares.
Class- Una clase en términos de POO es un modelo para crear objetos. Una clase encapsula los datos del objeto.
Method - Los métodos facilitan la comunicación entre objetos.

Traduzcamos estos conceptos orientados a objetos a los del mundo real. Por ejemplo: un automóvil es un objeto que tiene datos (marca, modelo, número de puertas, número de vehículo, etc.) y funcionalidad (acelerar, cambiar, abrir puertas, encender faros, etc.)

Antes de ES6, crear una clase era un asunto delicado. Las clases se pueden crear usando la palabra clave class en ES6.

Las clases se pueden incluir en el código declarándolas o utilizando expresiones de clase.

Sintaxis: declarar una clase

class Class_name {  
}

Sintaxis: Expresiones de clase

var var_name = new Class_name {  
}

La palabra clave class va seguida del nombre de la clase. Las reglas para los identificadores (ya discutidas) deben considerarse al nombrar una clase.

Una definición de clase puede incluir lo siguiente:

Constructors - Responsable de asignar memoria para los objetos de la clase.
Functions- Las funciones representan acciones que puede realizar un objeto. En ocasiones, también se denominan métodos.

Estos componentes juntos se denominan miembros de datos de la clase.

Note - El cuerpo de una clase solo puede contener métodos, pero no propiedades de datos.

Ejemplo: declarar una clase

class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Ejemplo: expresión de clase

var Polygon = class { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

El fragmento de código anterior representa una expresión de clase sin nombre. Una expresión de clase nombrada se puede escribir como.

var Polygon = class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Note - A diferencia de las variables y funciones, las clases no se pueden elevar.

Creando Objetos

Para crear una instancia de la clase, use la nueva palabra clave seguida del nombre de la clase. A continuación se muestra la sintaxis de la misma.

var object_name= new class_name([ arguments ])

Dónde,

La nueva palabra clave es responsable de la creación de instancias.
El lado derecho de la expresión invoca al constructor. Se deben pasar valores al constructor si está parametrizado.

Ejemplo: instanciar una clase

var obj = new Polygon(10,12)

Acceso a funciones

Se puede acceder a los atributos y funciones de una clase a través del objeto. Utilizar el '.'dot notation (llamado como el período) para acceder a los miembros de datos de una clase.

//accessing a function 
obj.function_name()

Ejemplo: ponerlos juntos

'use strict' 
class Polygon { 
   constructor(height, width) { 
      this.h = height; 
      this.w = width;
   } 
   test() { 
      console.log("The height of the polygon: ", this.h) 
      console.log("The width of the polygon: ",this. w) 
   } 
} 

//creating an instance  
var polyObj = new Polygon(10,20); 
polyObj.test();

El ejemplo dado arriba declara una clase 'Polígono'. El constructor de la clase toma dos argumentos: alto y ancho respectivamente. los‘this’palabra clave se refiere a la instancia actual de la clase. En otras palabras, el constructor anterior inicializa dos variables h y w con los valores de los parámetros pasados al constructor. lostest () función en la clase, imprime los valores de altura y ancho.

Para que el script sea funcional, se crea un objeto de la clase Polygon. El objeto es referido por elpolyObjvariable. A continuación, se llama a la función a través de este objeto.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

The height of the polygon:  10 
The width of the polygon:  20

Setters y Getters

Setters

Se invoca una función de establecimiento cuando se intenta establecer el valor de una propiedad. losset keywordse utiliza para definir una función de setter. La sintaxis para definir una función de establecimiento se da a continuación:

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

prop es el nombre de la propiedad para enlazar a la función dada. val es un alias de la variable que contiene el valor que se intenta asignar a la propiedad. expression con ES6, se puede utilizar como nombre de propiedad para enlazar con la función dada.

Ejemplo

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      set rollno(newRollno){
         console.log("inside setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //setter is called
   s1.rollno = 201
   console.log(s1)
</script>

El ejemplo anterior define una clase Student con three properties a saber rno, fname and lname. Una función de setterrollno() se utiliza para establecer el valor de la propiedad rno.

La salida del código anterior será como se muestra a continuación:

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside setter
Student {rno: 201, fname: "Sachin", lname: "Tendulkar"}

Ejemplo

El siguiente ejemplo muestra cómo utilizar un expression como un nombre de propiedad con un setter function.

<script>
   let expr = 'name';
      let obj = {
      fname: 'Sachin',
      set [expr](v) { this.fname = v; }
   };
   console.log(obj.fname);
   obj.name = 'John';
   console.log(obj.fname);
</script>

La salida del código anterior será la que se menciona a continuación:

Sachin
John

Getters

UN getter functionse invoca cuando se intenta recuperar el valor de una propiedad. losget keywordse utiliza para definir una función getter. La sintaxis para definir una función getter se da a continuación:

{get prop() { ... } }
{get [expression]() { ... } }

prop es el nombre de la propiedad para enlazar a la función dada.

expression - A partir de ES6, también puede usar expresiones como un nombre de propiedad para enlazar con la función dada.

Ejemplo

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      get fullName(){
         console.log('inside getter')
         return this.fname + " - "+this.lname
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //getter is called
   console.log(s1.fullName)
</script>

El ejemplo anterior define una clase Student con tres propiedades a saber rno, fname and lname. La función getterfullName() concatena el fname y lname y devuelve una nueva cadena.

La salida del código anterior será como se indica a continuación:

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside getter
Sachin - Tendulkar

Ejemplo

El siguiente ejemplo muestra cómo usar una expresión como nombre de propiedad con una función getter:

<script>
   let expr = 'name';
   let obj = {
      get [expr]() { return 'Sachin'; }
   };
   console.log(obj.name);
</script>

La salida del código anterior será la que se menciona a continuación:

Sachin

La palabra clave estática

La palabra clave estática se puede aplicar a funciones en una clase. Los miembros estáticos son referenciados por el nombre de la clase.

Ejemplo

'use strict' 
class StaticMem { 
   static disp() { 
      console.log("Static Function called") 
   } 
} 
StaticMem.disp() //invoke the static metho

Note- No es obligatorio incluir una definición de constructor. Cada clase por defecto tiene un constructor por defecto.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Static Function called

El operador instanceof

El operador instanceof devuelve verdadero si el objeto pertenece al tipo especificado.

Ejemplo

'use strict' 
class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

La siguiente salida se muestra en la ejecución exitosa del código anterior.

obj is an instance of Person True

Herencia de clase

ES6 apoya el concepto de Inheritance. La herencia es la capacidad de un programa para crear nuevas entidades a partir de una entidad existente, aquí una clase. La clase que se amplía para crear clases más nuevas se llamaparent class/super class. Las clases recién creadas se denominanchild/sub classes.

Una clase hereda de otra clase usando la palabra clave 'extiende'. Las clases secundarias heredan todas las propiedades y métodos excepto los constructores de la clase principal.

A continuación se muestra la sintaxis de la misma.

class child_class_name extends parent_class_name

Ejemplo: herencia de clase

'use strict' 
class Shape { 
   constructor(a) { 
      this.Area = a
   } 
} 
class Circle extends Shape { 
   disp() { 
      console.log("Area of the circle:  "+this.Area) 
   } 
} 
var obj = new Circle(223); 
obj.disp()

El ejemplo anterior declara una clase Shape. La clase se amplía con la clase Circle. Dado que existe una relación de herencia entre las clases, la clase secundaria, es decir, la clase Circle obtiene un acceso implícito a su atributo de clase principal, es decir, el área.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

Area of Circle: 223

La herencia se puede clasificar como:

Single - Cada clase puede extenderse como máximo desde una clase principal.
Multiple- Una clase puede heredar de varias clases. ES6 no admite herencia múltiple.
Multi-level - Considere el siguiente ejemplo.

'use strict' 
class Root { 
   test() { 
      console.log("call from parent class") 
   } 
} 
class Child extends Root {} 
class Leaf extends Child   

//indirectly inherits from Root by virtue of inheritance {} 
var obj = new Leaf();
obj.test()

La clase Leaf deriva los atributos de las clases Root y Child en virtud de la herencia multinivel.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

call from parent class

Herencia de clase y anulación de método

Method Overridinges un mecanismo por el cual la clase hija redefine el método de superclase. El siguiente ejemplo ilustra lo mismo:

'use strict' ;
class PrinterClass { 
   doPrint() { 
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass { 
   doPrint() { 
      console.log("doPrint() is printing a string…"); 
   } 
} 
var obj = new StringPrinter(); 
obj.doPrint();

En el ejemplo anterior, la clase secundaria ha cambiado la implementación de la función de superclase.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

doPrint() is printing a string…

La súper palabra clave

ES6 permite que una clase secundaria invoque a su miembro de datos de clase principal. Esto se logra utilizando elsuperpalabra clave. La palabra clave super se utiliza para referirse al padre inmediato de una clase.

Considere el siguiente ejemplo:

'use strict' 
class PrinterClass { 
   doPrint() {
      console.log("doPrint() from Parent called…") 
   } 
}  
class StringPrinter extends PrinterClass { 
   doPrint() { 
      super.doPrint() 
      console.log("doPrint() is printing a string…") 
   } 
} 
var obj = new StringPrinter() 
obj.doPrint()

los doPrint()redefinición en la clase StringWriter, emite una llamada a su versión de clase principal. En otras palabras, la palabra clave super se usa para invocar la definición de la función doPrint () en la clase principal: PrinterClass.

La siguiente salida se muestra en la ejecución exitosa del código anterior.

doPrint() from Parent called. 
doPrint() is printing a string.

↰ Previous page Next page ↱