Hola a todos, hoy os voy a explicar como se realiza la programación orientada a objetos en javascript en la versión es6.
En la versión ES5 de javascript, tenemos una forma diferente de crear clases respecto a ES6.
La programación orientada a objetos es un paradigma de la programación que descompone el código de una clase en unidades llamados objetos.
Un objeto es una entidad existente en la memoria del ordenador que tiene unas propiedades, llamados atributos, y unas operaciones disponibles específicas, llamados métodos.
Vamos a crear una clase llamada Vehiculo que va a tener los siguientes atributos: marca, modelo, precio y km.
Empezaremos definiendo la clase en sí.
class Vehiculo {
}
Los constructores son unos métodos especiales que nos permiten inicializar los atributos de la clase.
Como consejo, os recomiendo llamar a los atributos con un guion bajo para indicar que son atributos.
class Vehiculo {
constructor(modelo, marca, precio, km) {
this._modelo = modelo;
this._marca = marca;
this._precio = precio;
this._km = km;
}
}
Los get y set, son métodos especiales que nos permiten obtener y modificar los atributos.
class Vehiculo {
constructor(modelo, marca, precio, km) {
this._modelo = modelo;
this._marca = marca;
this._precio = precio;
this._km = km;
}
get modelo() {
return this._modelo;
}
set modelo(value) {
this._modelo = value;
}
get marca() {
return this._marca;
}
set marca(value) {
this._marca = value;
}
get precio() {
return this._precio;
}
set precio(value) {
this._precio = value;
}
get km() {
return this._km;
}
set km(value) {
this._km = value;
}
}
También podemos crear nuestros propios métodos o funciones.
class Vehiculo {
constructor(modelo, marca, precio, km) {
this._modelo = modelo;
this._marca = marca;
this._precio = precio;
this._km = km;
}
get modelo() {
return this._modelo;
}
set modelo(value) {
this._modelo = value;
}
get marca() {
return this._marca;
}
set marca(value) {
this._marca = value;
}
get precio() {
return this._precio;
}
set precio(value) {
this._precio = value;
}
get km() {
return this._km;
}
set km(value) {
this._km = value;
}
mostrarMarcaModelo() {
console.log(this.marca + ' ' + this.modelo);
}
sumaKm(km) {
if (km > 0) {
this._km += km;
}
}
}
Vamos a crear un objeto de Vehiculo.
class Vehiculo {
constructor(modelo, marca, precio, km) {
this._modelo = modelo;
this._marca = marca;
this._precio = precio;
this._km = km;
}
get modelo() {
return this._modelo;
}
set modelo(value) {
this._modelo = value;
}
get marca() {
return this._marca;
}
set marca(value) {
this._marca = value;
}
get precio() {
return this._precio;
}
set precio(value) {
this._precio = value;
}
get km() {
return this._km;
}
set km(value) {
this._km = value;
}
mostrarMarcaModelo() {
console.log(this.marca + ' ' + this.modelo);
}
sumaKm(km) {
if (km >= 0) {
this._km += km;
}
}
}
function init() {
let vehiculo = new Vehiculo("SEAT", "IBIZA", 12000, 30000);
vehiculo.mostrarMarcaModelo();
vehiculo.sumaKm(100);
console.log(vehiculo);
}
window.onload = init;
Recuerda de poner el archivo js en el html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
</head>
<body>
</body>
</html>
Este es el resultado:
Aquí lo puedes ver en acción.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta