POO en Javascript (ES5)

Hola a todos, hoy os voy a explicar como se realiza la programación orientada a objetos en javascript en la versión es5.

En la versión ES5 de javascript, tenemos que crear los objetos con funciones.

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

function Vehiculo(modelo, marca, precio, km){ 

} 

Las clases en esta versión se crea usando funciones y le pasamos los parametros que seran el valor de nuestros atributos.

function Vehiculo(modelo, marca, precio, km){ 

    this._modelo = modelo;
    this._marca = marca;
    this._precio = precio;
    this._km = km;

}

Como consejo, os recomiendo llamar a los atributos con un guion bajo para indicar que son atributos.

Los get y set, son métodos especiales que nos permiten obtener y modificar los atributos. Veamos la forma de usarlo, en nuestro caso, lo podemos hacer a la vez.

// Get/set
Object.defineProperty(this, 'propiedad', {
    get:function(){
        return valor_atributo;
    },
    set:function(value){
        valor_atributo = value;
    }		
});

Veamos un ejemplo aplicado a nuestro Vehiculo.

function Vehiculo(modelo, marca, precio, km){ 

    this._modelo = modelo;
    this._marca = marca;
    this._precio = precio;
    this._km = km;

    // Get/set modelo
    Object.defineProperty(this, 'modelo', {
        get:function(){
            return this._modelo;
        },
        set:function(value){
            this._modelo = value;
        }		
    });

    // Get/set marca
	Object.defineProperty(this, 'marca', {
		get:function(){
			return this._marca;
		},
		set:function(value){
			this._marca = value;
		}		
	});
       
    // Get/set precio
	Object.defineProperty(this, 'precio', {
		get:function(){
			return this._precio;
		},
		set:function(value){
			this._precio = value;
		}		
	});
    
    // Get/set km
	Object.defineProperty(this, 'km', {
		get:function(){
			return this._km;
		},
		set:function(value){
			this._km = value;
		}		
	});
} 

También podemos crear nuestros propios métodos o funciones. lo haremos con this y asignandole un function, ahora después veremos como se ejecuta.

function Vehiculo(modelo, marca, precio, km){ 

    this._modelo = modelo;
    this._marca = marca;
    this._precio = precio;
    this._km = km;

   
   
    // Get/set modelo
    Object.defineProperty(this, 'modelo', {
        get:function(){
            return this._modelo;
        },
        set:function(value){
            this._modelo = value;
        }		
    });

    // Get/set marca
	Object.defineProperty(this, 'marca', {
		get:function(){
			return this._marca;
		},
		set:function(value){
			this._marca = value;
		}		
	});
       
    // Get/set precio
	Object.defineProperty(this, 'precio', {
		get:function(){
			return this._precio;
		},
		set:function(value){
			this._precio = value;
		}		
	});
    
    // Get/set km
	Object.defineProperty(this, 'km', {
		get:function(){
			return this._km;
		},
		set:function(value){
			this._km = value;
		}		
	});

    this.mostrarMarcaModelo = function() {
        console.log(this.marca + ' ' + this.modelo);
    }

    this.sumaKm = function(km) {
        if (km > 0) {
            this.km += km;
        }
    }
} 

Vamos a crear un objeto de Vehiculo. Lo crearemos en otro fichero.

function init(){
    let v = new Vehiculo("Ibiza", "Seat", 12000, 30000);

    // Mostramos los atributos
    console.log("Modelo: ",v.modelo);
    console.log("Marca: ",v.marca);
    console.log("Precio: ",v.precio);
    console.log("KM: ",v.km);

    // llamamos a mostrarMarcaModelo
    v.mostrarMarcaModelo();

    // llamamos a sumaKm
    v.sumaKm(10000);

    console.log("KM actualizados:",v.km);

}

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="Vehiculo.js"></script>
    <script src="main.js"></script>
</head>
<body>
    
</body>
</html>

Este es el resultado:

Aquí lo puedes ver en vivo.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.