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 actualizaciones importantes al 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 poder tener cualquier objeto, necesitará 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á: la palabra clave class . 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 JavaScript con constructores y otras funciones, pero no se usa una palabra clave de clase, esta clase no será ejecutable.
La palabra clave de clase (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{
//class body
}
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.
class Student{
constructor(firstName, lastName, startDate){
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. Utiliza la palabra clave constructor como puede ver en el ejemplo anterior.
El constructor en el ejemplo anterior toma tres parámetros y usa la palabra clave this 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.
La palabra clave this 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.
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.
//create a new object
const john = new Student('John', 'Brown', '2018');
El código anterior usa la clase Student para crear un objeto.
Al crear un objeto de una clase, debe usar la nueva palabra clave, seguida del nombre de la clase y los valores que desea asignar a los atributos respectivos. Ahora tiene un nuevo alumno con el nombre John, el apellido Brown y una fecha de inicio de 2018. También tiene una variable constante: john. Esta variable es importante porque le permite utilizar el objeto que se crea.
Sin la variable john , aún podrá crear un nuevo objeto usando la clase Student , 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.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}
La clase anterior contiene un método que generará un informe sobre cada estudiante creado con la clase de Estudiantes . Para usar el método report () , necesitará usar un objeto existente de la clase para hacer una llamada a una función simple.
Gracias al "ejemplo de creación de un objeto" anterior, debería tener un objeto de la clase Student que está asignado a la variable john . Con john , ahora puede llamar con éxito al método report () .
Ejemplo de uso de métodos de clase
A continuación se muestra un ejemplo del uso de métodos de clase en JavaScript.
//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);
El código anterior usa la clase Estudiantes para producir el siguiente resultado en la consola:
John Brown started attending this institution in 2018Uso 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 usar el método report () sin un objeto de la clase. Esto se debe a que el método report () 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.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}
Lo importante a tener en cuenta del ejemplo anterior es que cada método estático comienza con la palabra clave estática .
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.
//calling a static method and printing its result to the console
console.log(Student.endDate(2018));
La línea de código anterior usa la clase Estudiantes para producir el siguiente resultado en la consola:
2022Crear 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 palabra clave class .
- 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.
La consola . El método log () 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 método console.log () es una de las cosas más importantes que puede hacer como desarrollador de JavaScript.