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í.
|
1 2 3 |
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.
|
1 2 3 4 5 6 7 8 |
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.
|
1 2 3 4 5 6 7 8 9 |
// Get/set Object.defineProperty(this, 'propiedad', { get:function(){ return valor_atributo; }, set:function(value){ valor_atributo = value; } }); |
Veamos un ejemplo aplicado a nuestro Vehiculo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1.0"> |
Este es el resultado:
Aquí lo puedes ver en vivo.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta