Clases de JavaScript

ECMAScript 2015, también conocido como ES6, introdujo la clase JavaScript.

La clase JavaScript es un patrón de plantilla para objetos JavaScript.

Sintaxis de la clase JavaScript

Use la palabra clave class Cree una clase.

Siempre agregue un nombre constructor() Métodos:

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".

Clases de JavaScriptNo esobjeto.

Es el objeto dePlantilla.

Uso de clase

Cuando tiene una clase, puede usarla para crear objetos:

Ejemplo

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

Pruebe usted mismo

El ejemplo anterior utiliza Clase Carpara crear dos Objeto Car.

Se llama automáticamente al crear un nuevo objeto (método constructor).

Constructor

El constructor es un método especial:

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

Métodos de clase

La sintaxis de los métodos de clase es igual que la de los métodos de objeto.

Use la palabra clave class para crear una clase.

Siempre agregue el método constructor().

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 el año del coche:

Ejemplo

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 tiene " + myCar.age() + " años.";

Pruebe usted mismo

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

Ejemplo

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 admite completamente el tipo 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

"use strict"

El gramático de la clase debe ser escrito en 'modo estricto'.

Si no sigue las reglas del 'modo estricto', recibirá un mensaje de error.

Ejemplo

Bajo el 'modo estricto', si utiliza una variable sin declararla, obtendrá un error:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Esto no funcionará
    let date = new Date(); // Esto funcionará
    return date.getFullYear() - this.year;
  }
}

Pruebe usted mismo

En Modo estricto de JS Aprenda más sobre el 'modo estricto' aquí.