Crear una clase en JavaScript

Anika Tabassum Era 15 febrero 2024
  1. Clases en JavaScript
  2. Crear una clase en JavaScript
  3. Declaración de un método en una clase en JavaScript
  4. Uso de get y set en Classes en JavaScript
Crear una clase en JavaScript

En JavaScript, tenemos el proceso básico de declaración de funciones para habilitar tareas específicas, pero las funciones no continúan con el concepto de trabajar para crear un objeto. Más como una función es un bloque de código independiente para realizar una tarea en particular.

Clases en JavaScript

¿Qué hace la clase? El concepto de clase se introdujo a través de las actualizaciones de ES6, que tiene un enfoque asertivo para construir algo de valor.

Supongamos que estamos creando un juego con varios personajes. Los personajes tienen figura humana, dos ojos, dos orejas, dos manos, etc.

Definir funciones explícitas para cada personaje causará un lío y la incomodidad de las modificaciones. Entonces, creamos una clase que tendrá las características comunes de las figuras; por lo tanto, una clase funciona como modelo para un objeto.

Aquí, discutiremos la inicialización básica de una clase y demostraremos algunas formas significativas en que funciona. Además, algunos puntos a tener en cuenta: la clase funciona en modo estricto en JavaScript, por lo que iniciaremos eso antes que nuestros códigos de controlador.

Otro punto clave es que, a diferencia de las funciones, no podemos llamar a una clase antes de que haya sido declarada. En funciones y métodos, podemos llamar al método primero y luego describir su detalle.

Pero en las clases, siempre tendremos que describir los contenidos y declaraciones y luego llamarlos explícitamente. De lo contrario, nos enfrentamos a un referenceError.

Entonces, saltemos a las líneas de código para obtener una mejor vista previa del tema.

Crear una clase en JavaScript

Siempre usaremos la palabra clave clase para crear una clase en JavaScript. Y después de eso, se definirá el nombre que dará derecho a la clase.

En este ejemplo, tomaremos una clase abc con su método constructor que tiene el parámetro valor. Esto implica que incluso si no se declaran otros métodos o expresiones, la clase siempre tendrá este constructor como contenido.

Los constructores son como la parte predeterminada o básica.

Más tarde, después de completar la clase y su constructor, iniciaremos una instancia u objeto para la clase. Y cuando llamamos al objeto junto con el parámetro constructor, dará como resultado el valor que es propiedad de la clase.

Y por tanto, implica que el objeto creado bajo la clase posee todas las propiedades de esa clase abc. Comprobemos el código.

Fragmento de código:

'use strict';

class abc {
  constructor(value) {
    this.value = value;
  }
}

var x = new abc(5);
console.log(x.value)

Producción:

Crear clase en JavaScript

Declaración de un método en una clase en JavaScript

En el ejemplo de código anterior, hemos visto cómo funciona el constructor. Aparte de eso, también podemos iniciar propiedades privadas y métodos básicos.

En el caso de declaraciones privadas, las instancias no pueden acceder a ellas. Pero los métodos que se declaran sin una declaración explícita de privado pueden ser accedidos y alterados por instancias.

El siguiente ejemplo apoya la afirmación anterior.

Fragmento de código:

'use strict';

class abc {
  constructor(value) {
    this.value = value
  }
  math() {
    return this.value + 5
  }
}
var x = new abc(5);
console.log(x.value);
console.log(x.math());

Producción:

Declaración de método en una clase

Uso de get y set en Classes en JavaScript

Las palabras clave get y set, a menudo denominadas getter y setter, se utilizan para definir funciones de forma más explícita. Aquí, la parte del colocador establece el valor u opera cualquier cálculo basado en el requisito.

Más tarde, el captador devuelve el valor a la clase. Este proceso hace que la tarea sea más flexible.

Visualicemos este concepto con un ejemplo.

Fragmento de código:

'use strict';

class abc {
  constructor(val) {
    this.val = val
  }

  get math() {
    return this.value
  }

  set math(y) {
    this.val = y + 10
  }
}

var x = new abc()
x.math = 32
console.log(x.val)

Producción:

Uso de get & set en Clases

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Artículo relacionado - JavaScript Class