Clases de JavaScript

ECMAScript 2015, también conocido como ES6, introdujo las clases de JavaScript.

Las clases de JavaScript son plantillas de objetos de JavaScript.

Clases de JavaScript

sintaxis

Utilice la palabra clave class Cree la clase.

Siempre agregue el nombre constructor() métodos:

sintaxis

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

instancia

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

El ejemplo anterior creó una clase llamada "Car".

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

Clases de JavaScriptNo esobjeto.

Es solo un objeto de JavaScript.plantilla.

Uso de clase

Si tiene una clase, puede usarla para crear objetos:

instancia

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

Pruebe usted mismo

El ejemplo anterior utiliza clase Carcreó dos Objeto Car.

Se llama automáticamente al crear un nuevo objeto.

Método constructor

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

  • Debe tener el nombre exacto de "constructor"
  • Se ejecuta automáticamente al crear un nuevo objeto
  • Se utiliza para inicializar propiedades del objeto
  • Si no se define un método constructor, JavaScript agregará un método constructor vacío.

Métodos de clase

Creación de métodos de clase

sintaxis

como los métodos de objeto.

Utilice la palabra clave class Cree la clase.

Siempre agregue constructor() métodos.

Luego agregue cualquier cantidad de métodos.

sintaxis

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

Cree un método de clase llamado "age" que devuelve la antigüedad del coche:

instancia

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "Mi coche es " + myCar.age() + " años viejo.";

Pruebe usted mismo

Puede enviar parámetros a los métodos de la clase:

instancia

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "Mi coche tiene " + myCar.age(year) + " años.";

Pruebe usted mismo

Compatibilidad del navegador

La siguiente tabla indica la versión del navegador que es el primero en soportar completamente las clases de JavaScript:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Marzo de 2016 Julio de 2015 Marzo de 2016 Octubre de 2015 Marzo de 2016

En la parte posterior de este tutorial, aprenderá más sobre las clases de JavaScript.