JavaScript Classes

JavaScript Classes

Contenido original de W3Schools


ECMAScript 2015, también conocido como ES6, introdujo clases de JavaScript. Las clases de JavaScript son plantillas para objetos de JavaScript.


Sintaxis de clase JavaScript

Utilice la palabra clave class para crear una clase.

Siempre agregue un método llamado constructor():

Sintaxis

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

Ejemplo:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

El ejemplo anterior crea una clase llamada "Car".

La clase tiene dos propiedades iniciales: "name" y "year".

Una clase de JavaScript no es un objeto.

Es una plantilla para objetos JavaScript.


Usando una clase

Cuando tienes una clase, puedes usar la clase para crear objetos:

Ejemplo:

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Ver ejemplo

El ejemplo anterior utiliza la clase Car para crear dos objetos Car.

El método constructor se llama automáticamente cuando se crea un nuevo objeto.


El método constructor

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

  • Tiene que tener el nombre exacto "constructor".

  • Se ejecuta automáticamente cuando se crea un nuevo objeto.

  • Se utiliza para inicializar las propiedades del objeto.

Si no defines un método constructor, JavaScript agregará un método constructor vacío.


Métodos de clase

Los métodos de clase se crean con la misma sintaxis que los métodos de objeto.

Utilice la palabra clave class para crear una clase.

Agregue siempre un método constructor().

Luego agregue cualquier número de métodos.

Sintaxis:

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

Cree un método de clase llamado "age", que devuelva la edad de Car:

Ejemplo:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"Mi coche tiene " + myCar.age() + " años.";

Ver ejemplo

Puedes enviar parámetros a métodos de clase:

Ejemplo:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Mi coche tiene " + myCar.age(year) + " años.";

Ver ejemplo


Soporte del navegador

La siguiente tabla define la primera versión del navegador con soporte completo para clases en JavaScript:

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

Aprenderás mucho más sobre las clases de JavaScript más adelante en este tutorial.


W3Schools es el sitio de desarrolladores web más grande del mundo.

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!