Aprenda a crear clases en JavaScript

En 2015, se lanzó la versión ES6 del lenguaje de programación JavaScript. Esta versión introdujo algunas mejoras importantes en el lenguaje y lo colocó oficialmente en la categoría de lenguaje de programación orientado a objetos entre otros lenguajes como Java y C ++.

La programación orientada a objetos se centra en los objetos y las operaciones que se pueden realizar en ellos. Sin embargo, antes de que puedas tener cualquier objeto, necesitarás tener una clase.

Las clases de JavaScript son una de las características innovadoras que vienen con la versión ES6 del lenguaje. Una clase se puede describir como un plano que se utiliza para crear objetos.

En este artículo del tutorial, aprenderá a crear y manipular objetos mediante clases de JavaScript.

Estructura de clases de JavaScript

Al crear una clase en JavaScript, hay un componente fundamental que siempre necesitará: el clase palabra clave. Casi todos los demás aspectos de la clase JavaScript no son necesarios para su ejecución exitosa.

Una clase de JavaScript se ejecutará de forma natural si no se proporciona un constructor (la clase simplemente creará un constructor vacío durante la ejecución). Sin embargo, si se crea una clase de JavaScript con constructores y otras funciones, pero no se utiliza una palabra clave de clase, esta clase no será ejecutable.

El clase La palabra clave (que siempre debe estar en minúsculas) es una necesidad en la estructura de clases de JavaScript. El siguiente ejemplo es la sintaxis general de una clase de JavaScript. La sintaxis de la clase JavaScript se encuentra a continuación:

class ClassName {
// cuerpo de la clase
}

Crear una clase en JavaScript

En programación, una clase puede verse como una entidad generalizada que se utiliza para crear un objeto especializado. Por ejemplo, en un entorno escolar, una entidad generalizada (una clase) pueden ser estudiantes y un objeto de estudiantes puede ser John Brown. Pero antes de crear un objeto, necesitará conocer los datos que almacenará y aquí es donde entra en juego JavaScript Constructors.

Usar constructores en clases de JavaScript

Un constructor es vital para el proceso de creación de clases por varias razones; inicializa el estado de un objeto (a través de sus atributos) y se llama automáticamente cuando se crea una instancia (se define y se crea) de un nuevo objeto.

Usando un ejemplo de constructor

A continuación, verá un ejemplo de constructor con una explicación de lo que significa.

clase Student {
constructor (nombre, apellido, fecha de inicio) {
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}

El código anterior presenta un aspecto importante del constructor de clases de JavaScript; a diferencia de otros lenguajes como Java y C ++, un constructor de JavaScript no usa el nombre de la clase para crear un constructor. Usa el constructor palabra clave como puede ver en el ejemplo anterior.

Relacionada: Aprenda a crear clases en Java

El constructor en el ejemplo anterior toma tres parámetros y usa el esta palabra clave para asignar los parámetros a la instancia actual de la clase. Puede parecer un poco confuso, pero lo que debe comprender es que una clase puede verse como un plano que se utiliza para crear muchas casas.

Entonces, cada casa construida puede verse como un objeto de esta clase. Aunque cada una de estas casas se crea con el mismo plano, se distinguen por su ubicación geográfica específica o las personas que las poseen.

El esta La palabra clave se utiliza para distinguir cada objeto creado por una clase. Garantiza que se almacenen y procesen los datos correctos para cada objeto que se cree utilizando la misma clase.

Crear un objeto en JavaScript

Los constructores son importantes en un lenguaje como JavaScript porque significan la cantidad de atributos que debe tener un objeto de una clase específica. Algunos lenguajes requerirán que se declare un atributo (variable) antes de que pueda usarse en un constructor o en cualquier otro método. Sin embargo, este no es el caso de JavaScript.

Relacionada: Cómo declarar variables en JavaScript

Si observa el constructor de clases de estudiantes de arriba, puede discernir que un objeto de esta clase tendrá tres atributos.

Crear un ejemplo de objeto

A continuación, verá un ejemplo para crear un objeto en JavaScript.

// crea un nuevo objeto
const john = nuevo estudiante ('John', 'Brown', '2018');

El código anterior usa el Estudiante clase para crear un objeto.

Al crear un objeto de una clase, debe utilizar el nuevo palabra clave, seguida del nombre de la clase y los valores que desea asignar a los atributos respectivos. Ahora tiene un nuevo estudiante con el nombre John, el apellido Brown y una fecha de inicio de 2018. También tienes una variable constante: Juan. Esta variable es importante porque le permite utilizar el objeto que se crea.

Sin el Juan variable, aún podrá crear un nuevo objeto utilizando la Estudiante class, pero entonces no habrá forma de acceder a este objeto y usarlo con los diferentes métodos de la clase.

Usar métodos en clases de JavaScript

Un método es una función de una clase que se utiliza para realizar operaciones en objetos que se crean a partir de la clase. Un buen método para agregar a la clase de estudiantes es el que genera un informe sobre cada estudiante.

Ejemplo de creación de métodos de clase

A continuación se muestra un ejemplo para crear métodos de clase en JavaScript.

clase Student {
constructor (nombre, apellido, fecha de inicio) {
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// método de informe
reporte(){
return `$ {this.firstName} $ {this.lastName} comenzó a asistir a esta institución en $ {this.startDate}`
}
}

La clase anterior contiene un método que generará un informe sobre cada estudiante creado con el Estudiante clase. Usar el reporte() método, necesitará usar un objeto existente de la clase para hacer una llamada de función simple.

Gracias al "ejemplo de creación de un objeto" anterior, debería tener un objeto de la Estudiante clase que se asigna a la variable Juan. Utilizando Juan, ahora puede llamar con éxito al reporte() método.

Ejemplo de uso de métodos de clase

A continuación se muestra un ejemplo del uso de métodos de clase en JavaScript.

// crea un nuevo objeto
const john = nuevo estudiante ('John', 'Brown', '2018');
// llamando al método de informe y almacenando su resultado en una variable
dejar resultado = john.report ();
// imprimiendo el resultado en la consola
console.log (resultado);

El código anterior usa el Estudiantes class para producir la siguiente salida en la consola:

John Brown comenzó a asistir a esta institución en 2018

Uso de métodos estáticos en clases de JavaScript

Los métodos estáticos son únicos porque son los únicos métodos en una clase de JavaScript que se pueden usar sin un objeto.

En el ejemplo anterior, no puede utilizar la reporte() método sin un objeto de la clase. Esto se debe a que reporte() El método se basa en los atributos de un objeto para producir un resultado deseable. Sin embargo, para usar un método estático, solo necesitará el nombre de la clase que almacena el método.

Ejemplo de creación de un método estático

A continuación se muestra un ejemplo de método estático para JavaScript.

clase Student {
constructor (nombre, apellido, fecha de inicio) {
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// método de informe
reporte(){
return `$ {this.firstName} $ {this.lastName} comenzó a asistir a esta institución en $ {this.startDate}`
}
// método estático
static endDate (startDate) {
return startDate + 4;
}
}

Lo importante a tener en cuenta del ejemplo anterior es que cada método estático comienza con el estático palabra clave.

Uso de un ejemplo de método estático

A continuación se muestra un ejemplo para usar un método estático en JavaScript.

// llamar a un método estático e imprimir su resultado en la consola
console.log (Student.endDate (2018));

La línea de código anterior usa el Estudiantes class para producir la siguiente salida en la consola:

2022

Crear una clase de JavaScript es fácil

Hay varias cosas que debe recordar si desea crear una clase de JavaScript e instanciar uno o más objetos a partir de ella:

• Una clase de JavaScript debe tener la clase palabra clave.
• Un constructor de JavaScript indica el número de valores que puede tener un objeto.
• Los métodos de clase general no se pueden utilizar sin un objeto.
• Los métodos estáticos se pueden utilizar sin un objeto.

El consola.Iniciar sesión() El método se utiliza a lo largo de este artículo para proporcionar los resultados del uso de los métodos general y estático en una clase de JavaScript. Este método es una herramienta útil para cualquier desarrollador de JavaScript, ya que ayuda en el proceso de depuración.

Familiarizarse con el console.log () El método es una de las cosas más importantes que puede hacer como desarrollador de JavaScript.

La última hoja de trucos de JavaScript

Obtenga un repaso rápido sobre los elementos de JavaScript con esta hoja de trucos.

Leer siguiente

Sobre el Autor