¿Cómo crear una clase en ES6?

Una clase en programación es el modelo o plantilla para crear un objeto, y cada objeto representa la entidad distinguible del mundo real. En otras palabras también podemos decir como, es una colección de grupo de ciertos objetos. En ES6, las clases se pueden crear simplemente escribiendo la palabra clave class (en el prefijo). En este artículo, vamos a discutir los conceptos generales de las clases con su sintaxis junto con ejemplos relevantes.

Veamos la siguiente sección que ilustra algunos hechos que incluyen que hay dos métodos para crear una clase en ES6, ya sea escribiendo palabras clave de clase antes de la definición de clase o asignando una expresión de clase a una variable.

Método 1: Declaración de clase En este método, simplemente escribimos el código y agregamos la palabra clave clase como prefijo del nombre de la clase. Siempre prefiera y escriba la primera letra del nombre de la clase en mayúscula (no minúscula).

Sintaxis:

class ClassName {
    // Definition and code
}

Ejemplo: 

• En este ejemplo, hemos declarado una clase y dentro de ella hay dos métodos getter y setter (o funciones
• ) junto con un constructor.
• Más tarde, fuera de la declaración de la clase, hemos creado un objeto de esa clase al proporcionar el radio al constructor y, en la siguiente línea, simplemente estamos extrayendo la propiedad del área del círculo. 

Nota: 

• ES6 tiene diferentes tipos de sintaxis especial para crear getter y setter. Primero escribimos la palabra clave get o set y luego el nombre de la propiedad. 
• En el caso de get, cualquier cosa que devolvamos de este método se considera como el valor de esa propiedad del objeto, y en el caso de set, cualquier cosa que proporcionemos como argumento se puede establecer en cualquier propiedad escrita dentro del constructor. 
• El guión bajo se escribe antes de la propiedad para evitar la colisión de nombres; de lo contrario, llamará a la misma función una y otra vez. 
• Evite poner paréntesis después del método getter, ya que generará un error de que la función no está definida porque se considera una propiedad del objeto.

<script>
    class Circle {
        constructor(radius) {
            this.radius = radius;
        }
     
        get radius() {
            return this._radius;
        }
         
        set radius(r) {
            this._radius = r;
        }
         
        get area() {
            return ((22/7)*this.radius*this.radius);
        }
    }
     
    let myCircle = new Circle(5);
    console.log(myCircle.area);
</script>

Producción:

78.57142857142857

Método 2: expresión de clase En este método, escribimos la definición de clase y la asignamos a alguna variable y puede ser de dos tipos, ya sea clase con nombre o clase sin nombre.

Sintaxis:

const VariableName = class ClassName {
   // Definition and code
}

const VariableName = class {
   // Definition and code
}

Ejemplo: 

• En este ejemplo, hemos asignado nuestra clase a una variable, ahora esta variable se usará para acceder a la clase, esta es una clase sin nombre, también aquí podemos crear una con nombre, pero no hay una gran diferencia. 
• Dentro de la expresión de la clase, hemos declarado el constructor junto con el getter y el setter.
•  Más tarde, fuera de la clase, hay una creación de objeto sin inicialización y después de eso, estamos configurando el radio a través de setter y en la última línea, estamos accediendo a la propiedad del área a través de getter, que a su vez devuelve el área calculada.

<script>
    const Circle = class {
        constructor(radius){
            this.radius = radius;
        }
     
        get radius() {
            return this._radius;
        }
         
        set radius(radius) {
            this._radius = radius;
        }
         
        get area() {
            return ((22/7)*this.radius*this.radius);
        }
    }
     
    let myCircle = new Circle();
    myCircle.radius = 3;
    console.log(myCircle.area);
</script>

Producción:

28.285714285714285