Clases de JavaScript (class)

Las clases son plantillas para crear objetos.

Usamos la palabra clave class para crear una clase; el cuerpo de la clase se encuentra entre un par de llaves{}, y dentro de las llaves podemos{}definir la ubicación de los miembros de la clase, como métodos o constructores.

Cada clase contiene un método especialconstructor(), que es el constructor de la clase. Este método se utiliza para crear e inicializar un objeto creado porclassla clase.

La sintaxis para crear una clase es la siguiente:

class ClassName { constructor() { ... } }

Ejemplo:

Ejemplo

class Ejemplo { constructor(name, url) { this.name = name; this.url = url; } }

El ejemplo anterior crea una clase llamada "Ejemplo".

En la clase se inicializan dos propiedades: "name" y "url".

Compatibilidad del navegador

Los números de la tabla indican la primera versión del navegador que soporta esta propiedad.

Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016

Uso de clases

Una vez definida la clase, podemos usar lanewpalabra clave para crear objetos:

Ejemplo

class Ejemplo { constructor(name, url) { this.name = name; this.url = url; } } let site = new Ejemplo("Ejemplo", "https://www.example.com");

Pruébalo »

Al crear un objeto, se llama automáticamente al método constructor.constructor()。

Expresiones de clase

Las expresiones de clase son otra forma de definir clases. Pueden tener nombre o no. El nombre de una expresión de clase con nombre es local al cuerpo de la clase.

Ejemplo

//Clase sin nombre / anónima let Ejemplo = class { constructor(name, url) { this.name = name; this.url = url; } }; console.log(Ejemplo.name); // output: "Ejemplo" //Clase con nombre let Ejemplo = class Ejemplo2 { constructor(name, url) { this.name = name; this.url = url; } }; console.log(Ejemplo.name); //Salida: "Ejemplo2"

Método constructor

El método constructor es un método especial:

  • El método constructor se llama constructor().
  • El método constructor se ejecuta automáticamente al crear un nuevo objeto.
  • El método constructor se utiliza para inicializar las propiedades del objeto.
  • Si no se define un método constructor, JavaScript añade automáticamente un constructor vacío.

Métodos de clase

Usamos la palabra claveclasspara crear una clase, podemos añadir unconstructor()método, y luego añadir cualquier número de métodos.

class ClassName { constructor() { ... } method_1() { ... } method_2() { ... } method_3() { ... } }

En el siguiente ejemplo creamos un método "age" para devolver la edad del sitio web:

Ejemplo

class Ejemplo { constructor(name, year) { this.name = name; this.year = year; } age() { let date = new Date(); return date.getFullYear() - this.year; } } let ejemplo = new Ejemplo("Ejemplo", 2018); document.getElementById("demo").innerHTML = "Ejemplo" + ejemplo.age() + "años.";

Pruébalo »

También podemos enviar parámetros a los métodos de la clase:

Ejemplo

class Ejemplo { constructor(name, year) { this.name = name; this.year = year; } age(x) { return x - this.year; } } let date = new Date(); let year = date.getFullYear(); let ejemplo = new Ejemplo("Ejemplo", 2020); document.getElementById("demo").innerHTML= "Ejemplo" + ejemplo.age(year) + "años.";

Pruébalo »

Modo estricto "use strict"

Tanto el cuerpo de las declaraciones de clase como el de las expresiones de clase se ejecutan en modo estricto. Por ejemplo, los constructores, los métodos estáticos, los métodos de prototipo, los getters y los setters se ejecutan en modo estricto.

Si no sigues el modo estricto, se producirá un error:

Ejemplo

class Ejemplo { constructor(name, year) { this.name = name; this.year = year; } age() { //date = new Date(); // Error let date = new Date(); //Correcto return date.getFullYear() - this.year; } }

Pruébalo »

El siguiente ejemplo utiliza una variable no declarada en la clase:

Para más información sobre el modo estricto, consulta:Modo estricto de JavaScript (use strict)

Referencia

Métodos de clase

Método Descripción
constructor() Constructor, utilizado para crear e inicializar la clase

Palabras clave de clase

Palabra clave Descripción
extends Heredar de una clase
static Definir un método estático en una clase
super Llamar al constructor de la clase padre
Otras extensiones