Clases OOP en JavaScript | Explicado

Antes ES6, "prototipos"Se utilizaron para simular clases en JavaScript, donde las propiedades adicionales pueden asociarse con un prototipo utilizando la herencia. Cuando una versión nueva y mejorada de ES5 fue introducido, conocido como ES6, Clases de JavaScript fueron agregados a él.

En ES6, las clases se consideran un componente fundamental de JavaScript, y tiene mucho más simple y propenso a errores sintaxis en comparación con los prototipos. Similar a la programación orientada a objetos (OOP), la clase JavaScript comprende un método de constructor, algunas propiedades, métodos y objetos específicos del tipo de clase dado.

Esta publicación explica Clases OOP en Javascript con la ayuda de ejemplos adecuados. Entonces, comencemos!

Clases OOP en JavaScript

Como se mencionó anteriormente, las clases de JavaScript se introducen en ES6. Ofrecen una forma concisa de declarar clase utilizando una sintaxis similar a lo que usamos en OOP.

En JavaScript, puede usar el "clasePalabra clave para definir una clase. Agrega azúcar sintáctica (un buen tipo de azúcar) sobre el patrón de herencia prototipo existente.

Sintaxis de clases OOP en JavaScript

Para crear una clase OOP en JavaScript, debe seguir la sintaxis dada a continuación:

clase className
constructor () ...

Aquí, "clase"Es una palabra clave utilizada para crear una clase. Además, una clase OOP debe tener un método llamado "constructor()".

Ejemplo: Crear clase OOP en JavaScript

Definiremos una clase llamada "Persona"Que tiene dos propiedades:"nombre" y "edad":

persona de clase
constructor ()
este.nombre = 'Alex';
este.edad = 25;

Para utilizar la clase de la persona, tenemos que crear un objeto o instancia de la clase especificada:

Sea persona1 = nueva persona ();

Ahora, "persona1"El objeto puede acceder a las propiedades del"Persona" clase:

consola.registro (persona1.Nombre + "" + Person1.edad);

Como se mencionó anteriormente, una clase OOP en JavaScript debe contener un constructor. ¿Quieres saber más sobre constructores en JavaScript?? En caso afirmativo, siga la sección dada por debajo.

Constructores para clases OOP en JavaScript

Constructor es un método invocado cuando crea una instancia de una clase OOP. También se usa para inicializar objetos dentro de una clase. Sin embargo, JavaScript creará y ejecutará automáticamente un constructor vacío si no ha definido ningún método de constructor para una clase OOP.

Tipos de constructores para clases OOP en JavaScript

En JavaScript, hay los siguientes dos tipos de constructores:

• Constructor predeterminado
• Constructor parametrizado

La siguiente sección explicará brevemente el constructor predeterminado y parametrizado y su uso en JavaScript.

Constructor predeterminado para clases OOP en JavaScript

También puede definir explícitamente un constructor predeterminado sin argumentos si desea realizar cualquier operación específica mientras crea un objeto de clase OOP.

Sintaxis del constructor predeterminado en JavaScript

clase className
constructor()
// Cuerpo del constructor predeterminado

Ejemplo: Constructor predeterminado para clases OOP en JavaScript

En el ejemplo dado a continuación, definiremos un constructor predeterminado para el "Persona" clase. De acuerdo con la definición de "constructor()"Método, cada vez que un"Persona"Se crea objeto de clase, inicializará su"nombre"Propiedad a"Alex", y "edad"Propiedad como"25."

persona de clase
constructor ()
este.nombre = 'Alex';
este.edad = 25;


constante persona1 = nueva persona ();
consola.Log ("Nombre:" + Person1.nombre);
consola.log ("edad:" + persona1.edad);

La ejecución del programa dado creará un "persona1"Objeto del"Persona"OOP Clase utilizando el constructor predeterminado. El constructor predeterminado inicializará las propiedades especificadas para el "persona1" objeto. Por último, el "consola.registro()"El método imprimirá los valores almacenados en el"persona1.nombre" y "persona1.edad" propiedades:

En una clase OOP, la utilización del constructor predeterminado es útil cuando desea inicializar las propiedades de todos los objetos creados con el mismo valor. Pero, ¿qué pasa si necesita asignar algunos valores únicos al objeto mientras lo crea?? En JavaScript, puede lograr esta funcionalidad con la ayuda del "Constructor parametrizado".

Constructor parametrizado para clases OOP en JavaScript

Un constructor que comprende parámetros se conoce como el "Constructor parametrizado". Este tipo de constructor se usa principalmente cuando desea inicializar las propiedades de la clase OOP de JavaScript con algunos valores específicos.

Sintaxis del constructor parametrizado en JavaScript

clase className
constructor (parámetro1, parámetro2 ..., parametern)
// Cuerpo del constructor parametrizado

El constructor parametrizado acepta parámetros pasados ​​como "argumentos"Mientras crea un objeto de clase OOP.

Ejemplo: Constructor parametrizado para clases OOP en JavaScript

Crearemos un constructor parametrizado para el "PersonaClase que inicializa las propiedades con los valores aprobados como argumentos:

persona de clase
constructor (nombre, edad)
este.nombre = nombre;
este.edad = edad;

En el código dado a continuación ","persona1"Objeto del"Persona"La clase se creará utilizando constructor parametrizado donde"Máximo"Se pasa como"nombre"Valor de propiedad, y"25"El argumento representa el valor de"edad" propiedad:

constante persona1 = nueva persona ("max", 25);
consola.Log ("Nombre:" + Person1.nombre);
consola.log ("edad:" + persona1.edad);

La siguiente salida significa que hemos creado con éxito un "persona1Objeto que tiene los valores de propiedad especificados con la ayuda del constructor parametrizado:

Hemos hablado sobre la creación de clases de OOP, sus objetos relacionados y la definición de constructores predeterminados y parametrizados. Ahora, avanzaremos y discutiremos otro componente crítico de una clase OOP que es "Método".

Métodos en clases OOP en JavaScript

Métodos son un tipo de función asociada con clases de OOP de JavaScript específicas. También operan como una función miembro cuando se definen dentro de una clase y se pueden usar para acceder a las propiedades de la clase.

Sintaxis de métodos para clases OOP en JavaScript

clase className
MethodName
// Cuerpo del nombre de método

Nota: El nombre de un método de clase OOP debe estar en minúscula.

Ejemplo: Métodos en clases OOP en JavaScript

En el mismo "Persona"Clase, definiremos un"DisplayInfo ()"Método que devuelve los valores de"nombre" y "edad"Propiedades para un objeto especificado:

displayInfo ()
return ("nombre:" + esto.nombre + "edad:" + esto.edad);

Después de hacerlo, crearemos un objeto del "Persona" clase:

constante persona1 = nueva persona ("max", 25);

A continuación, invocaremos el "DisplayInfo ()"Al utilizar el"persona1" objeto:

persona1.DisplayInfo ();

El "DisplayInfo ()El método "devolverá el"nombre" y "edad"Valores de la"persona1" objeto:

Hemos compilado la información esencial relacionada con la clase OOP en JavaScript.

Conclusión

Utilizando el "clase"Palabra clave, puede definir un Clase OOP en JavaScript. En ES6, las clases de JavaScript se introdujeron para agregar azúcar sintáctica (un buen tipo de azúcar) sobre el patrón de herencia prototipo existente. Similar a OOP, la clase JavaScript comprende un método de constructor, algunas propiedades, métodos y objetos específicos del tipo de clase dado. Este artículo explicó Clases OOP en Javascript con la ayuda de ejemplos adecuados.