Intermediojavascript
Clases y Herencia en ES6
Aprende la sintaxis de clases moderna de JavaScript: constructores, metodos, herencia y miembros estaticos.
Sintaxis de clases
Las clases en ES6 son "azucar sintactico" sobre el sistema de prototipos. Ofrecen una sintaxis limpia y familiar para la programacion orientada a objetos.
javascript
1class Animal {
2 constructor(nombre, sonido) {
3 this.nombre = nombre;
4 this.sonido = sonido;
5 }
6
7 hablar() {
8 return `${this.nombre} dice ${this.sonido}`;
9 }
10
11 static crearPerro() {
12 return new Animal("Rex", "Guau");
13 }
14}
15
16const gato = new Animal("Michi", "Miau");
17console.log(gato.hablar()); // "Michi dice Miau"Herencia con extends
La palabra clave
extends permite crear clases hijas que heredan las propiedades y metodos de una clase padre. super() llama al constructor padre.javascript
1class Vehiculo {
2 constructor(marca, velocidadMax) {
3 this.marca = marca;
4 this.velocidadMax = velocidadMax;
5 }
6
7 info() {
8 return `${this.marca} - ${this.velocidadMax}km/h`;
9 }
10}
11
12class Auto extends Vehiculo {
13 constructor(marca, velocidadMax, puertas) {
14 super(marca, velocidadMax);
15 this.puertas = puertas;
16 }
17
18 info() {
19 return `${super.info()} (${this.puertas} puertas)`;
20 }
21}
22
23const auto = new Auto("Toyota", 180, 4);
24console.log(auto.info());Campos y metodos privados
Con el prefijo
# se declaran campos y metodos privados que no son accesibles desde fuera de la clase.javascript
1class CuentaBancaria {
2 #saldo = 0;
3
4 constructor(titular, saldoInicial) {
5 this.titular = titular;
6 this.#saldo = saldoInicial;
7 }
8
9 depositar(monto) {
10 this.#saldo += monto;
11 }
12
13 get saldo() {
14 return this.#saldo;
15 }
16}
17
18const cuenta = new CuentaBancaria("Ana", 1000);
19cuenta.depositar(500);
20console.log(cuenta.saldo); // 1500
21// console.log(cuenta.#saldo); // SyntaxErrorPrueba lo aprendido
Escribe código JavaScript y ejecútalo directamente en el navegador.
Editor de Códigojavascript
1class Animal {
2 constructor(nombre, sonido) {
3 this.nombre = nombre;
4 this.sonido = sonido;
5 }
6
7 hablar() {
8 return `${this.nombre} dice ${this.sonido}`;
9 }
10
11 static crearPerro() {
12 return new Animal("Rex", "Guau");
13 }
14}
15
16const gato = new Animal("Michi", "Miau");
17console.log(gato.hablar()); // "Michi dice Miau"