├── index.html ├── oop.js └── youdevs.png /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | OOP Js - YouDevs 9 | 10 | 11 |
12 |
13 |
14 | YouDevs - Aprendamos juntos 15 |

POO con Javascript

16 |

Pilares de la POO (Programación Orientada a Objetos)

17 |
18 |
19 |

Abstracción

20 | Abstraer, es eliminar los detalles inncesarios para solo nos enfocamos 21 | en los aspectos que son necesarios para el contexto o sistema que estamos desarrollando. 22 |

23 | Por ejemplo, supongamos que eres un estudiante y además empleado. 24 | Para el sistema de la escuela tu solo les interesas como estudiante, no le importan tus propiedades como empleado, 25 | así que el sistema de la escuela solamente abstrae las propiedades que le interesan de ti 26 | como podrían ser: nombre, grado y calificaciones 27 | Pero al sistema de tu trabajo, les interesan tus propiedades como empleado, las cuales podrían ser: 28 | numero_empleado, puesto y sueldo 29 |
30 |
31 |

Encapsulación

32 |

33 | Se centra en ocultar los detalles que no son relevantes para el exterior 34 | Es la agrupación de datos (propiedades) y los métodos que actúan sobre esas propiedades 35 | de manera que el acceso a esos datos está restringido desde fuera del paquete (clase). 36 | En POO, esto significa que un objeto almacena su estado de forma privada, 37 | y solo los métodos del objeto tienen acceso para cambiarlo. 38 |

39 | Por ejemplo si usuario de motocicleta quiere encender la moto; entonces hay un interfaz para hacer eso; 40 | y el usuario no tiene acceso directo para encenderla 41 | desde el propio cableado interno (sabiendo que eso puede resultar mal), 42 | incluso, podríamos concluir que al usuario de la moticicleta 43 | no le importa cómo funciona el sistema de encendido, 44 | solamente le interesa utilizarlo para comenzar a moverse. 45 | Entonces, los detalles del funcionamiento permanecen ocultos al usuario, 46 | pero en cambio se le ortogar una interfaz de fácil uso (si así se requiere). 47 |

48 |
49 |
50 |

Herencia

51 |

Es la forma en la que una clase (hija) hereda de otra clase (padre) sus métodos y atributos. 52 | La herencia permite la reutilización de código de una clase en otra y es ideal implementarla 53 | cuando los objetos tienen similitudes entre sí. 54 |

55 | Por ejemplo, Un libro tiene título y autor, y por otro lado un Comic también tiene título y autor, 56 | En POO podríamos utilizar la herencia para hacer que Comic herede de Libro y evitar repetir código inncesario. 57 |

58 |
59 |
60 |

Polimorfismo

61 |

62 | Se refiere a la capacidad de realizar una misma acción en diferentes formas. 63 |

64 | Por ejemplo si tenemos una clase A con método M y la clase B que hereda de A, la clase B 65 | puede utilizar el mismo método M de la clase A, 66 | pero con una realización (algo) diferente. 67 |

68 | Polimorfismo es una palabra griega que significa "con muchas formas" 69 |

70 |
71 |
72 |
73 | 74 |
75 |
76 |
77 |

Terminología POO

78 |

Objetos

79 |

80 | Son la pieza central de la POO. 81 | Los objetos se componen de datos (propiedades) y métodos (funciones) que operan sobre esos datos 82 |

83 |

Propiedad

84 |

85 | Es un dato que representa una característica de un objeto. 86 | Una propiedad es una variable. 87 | Un objeto puede tener muchas propiedades 88 |

89 |

Método

90 |

91 | Es una función que puede ejecutar nuestro objeto. Un objeto puede tener muchos métodos 92 |

93 |

Clase

94 |

95 | Funcionan son las plantillas y son utilizadas para instanciar (crear) objetos. 96 | Una clase encapsula (contiene) todas las propiedades y métodos que después almacenarán los objetos 97 | instanciados. Una clase Representa a un tipo de objeto; ejemplo: Libro, Automóvil, Perro. 98 |

99 |

Constructor

100 |

101 | Es un método que se llama en el momento de la creación de instancias (objetos). 102 | Los constructores son útiles para (valga la redundancia) "construir" o inicializar las propiedades 103 | de los objetos. 104 |

105 |

Getter

106 |

Un getter es un método que permite acceder a una propiedad privada de un objeto en lugar de usar la propiedad directamente

107 |

Setter

108 |

Un setter es un método que permite acceder y modificar una propiedad privada de un objeto en lugar de modificar la propiedad directamente

109 |
110 |
111 |
112 | 113 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /oop.js: -------------------------------------------------------------------------------- 1 | const _private = new WeakMap(); 2 | 3 | class Book { 4 | // ====== Método constructor ====== 5 | constructor(title, author, price) { 6 | // ====== Propiedades ====== 7 | const properties = { 8 | _title: title, 9 | _author: author, 10 | _price: price 11 | } 12 | // Colocar propiedades como privadas: 13 | _private.set(this, {properties}); 14 | } 15 | 16 | // ====== Métodos / Getters-Setters ====== 17 | 18 | // Obtiene el título de un libro: 19 | get title() { 20 | return _private.get(this).properties['_title']; 21 | } 22 | 23 | // Setea/modifica el título de un libro: 24 | set title(newTitle) { 25 | return _private.get(this).properties['_title'] = newTitle; 26 | } 27 | 28 | get author() { 29 | return _private.get(this).properties['_author']; 30 | } 31 | 32 | set author(newAuthor) { 33 | return _private.get(this).properties['_author'] = newAuthor; 34 | } 35 | 36 | get price() { 37 | return _private.get(this).properties['_price']; 38 | } 39 | 40 | // No coloques éste setter para prices sino quieres dar acceso. 41 | set price(newPrice) { 42 | return _private.get(this).properties['_price'] = newPrice; 43 | } 44 | 45 | // Muestra todos los datos de un libro. 46 | getAllData() { 47 | console.log( `Título: ${this.title}, Autor: ${this.author}, Precio: ${this.price}`); 48 | } 49 | 50 | } 51 | 52 | class Comic extends Book { 53 | constructor(name, author, price, illustrators) { 54 | super(name, author, price); 55 | this.illustrators = illustrators; 56 | } 57 | 58 | addIllustrator(newIllustrator) { 59 | this.illustrators.push(newIllustrator) 60 | } 61 | 62 | /* ====== Ejemplo de: Polimorfismo ====== 63 | Sobreescribe el método getAllData definido en la clase padre: Book 64 | */ 65 | getAllData() { 66 | // Ejecuta el código de getAllData de la clase Padre 67 | super.getAllData(); 68 | // Código extra para imprimir la propiedad illustrators 69 | console.log( `Illustradores: ${this.illustrators}` ); 70 | } 71 | } 72 | 73 | class ShoppingCart { 74 | constructor() { 75 | this.products = []; 76 | } 77 | 78 | // Agregar un producto al carrito: 79 | addProduct(amount, price) { 80 | this.products.push(...Array(amount).fill(price) ); 81 | } 82 | 83 | // Mostrar productos del carrito 84 | showProducts() { 85 | console.log( this.products ); 86 | } 87 | 88 | // Calcular total de los productos agregados al carrito: 89 | calcTotal() { 90 | return this.products 91 | .map( price => price ) 92 | .reduce( (ac, price) => ac + price, 0 ); 93 | } 94 | 95 | // Imprime el total: 96 | printTicket() { 97 | console.log( `Total a pagar ${ this.calcTotal() }` ) 98 | } 99 | } 100 | 101 | // Intancia de Book: 102 | const book1 = new Book('1984', 'G.O', 350); 103 | // Instancia de Comic: 104 | const comic1 = new Comic('The Killing Joke', 'A.M', 150, ['B.B'] ); 105 | 106 | comic1.addIllustrator('J.H'); 107 | console.log( comic1.illustrators ); 108 | 109 | const cart = new ShoppingCart(); 110 | 111 | 112 | cart.addProduct(2, comic1.price); 113 | cart.addProduct(3, book1.price); 114 | 115 | cart.showProducts(); 116 | 117 | cart.printTicket(); 118 | 119 | book1.getAllData(); 120 | comic1.getAllData(); 121 | 122 | -------------------------------------------------------------------------------- /youdevs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YouDevs/mc-js-POO/90ebaa1806589e798afec15da3559ccc63b83936/youdevs.png --------------------------------------------------------------------------------