Clases de JavaScript
ECMAScript 2015, también conocido como ES6, introdujo clases de JavaScript.
Las clases de JavaScript son plantillas para objetos de JavaScript.
Sintaxis de clase de JavaScript
Utilice la palabra clave classpara 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: "nombre" y "año".
Una clase JavaScript no es un objeto.
Es una plantilla para objetos de JavaScript.
usando una clase
Cuando tienes una clase, puedes usar la clase para crear objetos:
Ejemplo
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
El ejemplo anterior usa 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 del 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 define 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 classpara crear una clase.
Añade siempre un constructor()método.
Luego agregue cualquier cantidad de métodos.
Sintaxis
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Cree un método de clase llamado "edad", que devuelva la edad del automóvil:
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 =
"My car is " + myCar.age() + " years old.";
Puede enviar parámetros a los métodos de 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=
"My car is
" + myCar.age(year) + " years old.";
Compatibilidad con navegador
La siguiente tabla define la primera versión del navegador con soporte completo para Clases en JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
Aprenderá mucho más sobre las clases de JavaScript más adelante en este tutorial.