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);
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.";
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.";
Soporte del navegador
La siguiente tabla define la primera versión del navegador con soporte completo para clases en JavaScript:
Chrome | Edge | Firefox | Safari | Opera |
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 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.