Introducció
La programació orientada a objectes (POO) és un paradigma de programació que utilitza "objectes" per representar dades i mètodes. JavaScript, tot i ser un llenguatge basat en prototips, permet la creació de classes i la implementació de POO a partir de l'ES6.
Conceptes Clau
- Classes
Una classe és una plantilla per crear objectes amb propietats i mètodes comuns.
- Objectes
Un objecte és una instància d'una classe. Conté dades (propietats) i funcions (mètodes).
- Constructors
El constructor és un mètode especial d'una classe que s'executa quan es crea una nova instància de la classe.
- Herència
La herència permet crear una nova classe basada en una classe existent, heretant-ne les propietats i mètodes.
- Encapsulació
L'encapsulació és la pràctica de mantenir les dades i els mètodes dins d'una classe, protegint-los de l'accés extern no autoritzat.
Creació de Classes en JavaScript
Definició d'una Classe
class Persona { constructor(nom, edat) { this.nom = nom; this.edat = edat; } saludar() { console.log(`Hola, em dic ${this.nom} i tinc ${this.edat} anys.`); } } // Crear una instància de la classe Persona const persona1 = new Persona('Joan', 30); persona1.saludar(); // Hola, em dic Joan i tinc 30 anys.
Herència
class Empleat extends Persona { constructor(nom, edat, feina) { super(nom, edat); // Crida al constructor de la classe pare this.feina = feina; } treballar() { console.log(`${this.nom} està treballant com a ${this.feina}.`); } } // Crear una instància de la classe Empleat const empleat1 = new Empleat('Anna', 28, 'Enginyera'); empleat1.saludar(); // Hola, em dic Anna i tinc 28 anys. empleat1.treballar(); // Anna està treballant com a Enginyera.
Encapsulació
class Banc { constructor(saldo) { this._saldo = saldo; // Propietat privada } // Mètode públic per obtenir el saldo obtenirSaldo() { return this._saldo; } // Mètode públic per dipositar diners dipositar(diners) { if (diners > 0) { this._saldo += diners; } } // Mètode públic per retirar diners retirar(diners) { if (diners > 0 && diners <= this._saldo) { this._saldo -= diners; } } } // Crear una instància de la classe Banc const compte = new Banc(1000); compte.dipositar(500); console.log(compte.obtenirSaldo()); // 1500 compte.retirar(200); console.log(compte.obtenirSaldo()); // 1300
Exercicis Pràctics
Exercici 1: Crear una Classe
Crea una classe Cotxe
amb les següents propietats: marca
, model
i any
. Afegeix un mètode detalls
que imprimeixi les propietats del cotxe.
class Cotxe { constructor(marca, model, any) { this.marca = marca; this.model = model; this.any = any; } detalls() { console.log(`Marca: ${this.marca}, Model: ${this.model}, Any: ${this.any}`); } } // Solució const cotxe1 = new Cotxe('Toyota', 'Corolla', 2020); cotxe1.detalls(); // Marca: Toyota, Model: Corolla, Any: 2020
Exercici 2: Herència
Crea una classe CotxeElectric
que hereti de Cotxe
i afegeix una propietat autonomia
. Afegeix un mètode detallsComplets
que imprimeixi totes les propietats, incloent l'autonomia.
class CotxeElectric extends Cotxe { constructor(marca, model, any, autonomia) { super(marca, model, any); this.autonomia = autonomia; } detallsComplets() { console.log(`Marca: ${this.marca}, Model: ${this.model}, Any: ${this.any}, Autonomia: ${this.autonomia} km`); } } // Solució const cotxeElectric1 = new CotxeElectric('Tesla', 'Model S', 2021, 600); cotxeElectric1.detallsComplets(); // Marca: Tesla, Model: Model S, Any: 2021, Autonomia: 600 km
Errors Comuns i Consells
-
Oblidar el
super
en el constructor de la classe derivada: Quan es crea una classe que hereta d'una altra, és necessari cridarsuper
al constructor de la classe derivada per inicialitzar les propietats de la classe pare.class Empleat extends Persona { constructor(nom, edat, feina) { // Oblidar super() resultarà en un error super(nom, edat); this.feina = feina; } }
-
Accedir a propietats privades directament: Utilitza mètodes públics per accedir i modificar propietats privades.
class Banc { constructor(saldo) { this._saldo = saldo; } obtenirSaldo() { return this._saldo; } } const compte = new Banc(1000); console.log(compte._saldo); // No és recomanable console.log(compte.obtenirSaldo()); // Recomanat
Conclusió
En aquesta secció, hem après els conceptes bàsics de la programació orientada a objectes en JavaScript, incloent la creació de classes, herència i encapsulació. Aquests conceptes són fonamentals per escriure codi més organitzat, reutilitzable i mantenible. A la propera secció, explorarem els mòduls i la importació/exportació de codi en JavaScript.
JavaScript: De Principiant a Avançat
Mòdul 1: Introducció a JavaScript
- Què és JavaScript?
- Configuració del Teu Entorn de Desenvolupament
- El Teu Primer Programa en JavaScript
- Sintaxi i Conceptes Bàsics de JavaScript
- Variables i Tipus de Dades
- Operadors Bàsics
Mòdul 2: Estructures de Control
- Declaracions Condicionals
- Bucles: for, while, do-while
- Declaracions Switch
- Gestió d'Errors amb try-catch
Mòdul 3: Funcions
- Definició i Crida de Funcions
- Expressions de Funció i Funcions Fletxa
- Paràmetres i Valors de Retorn
- Àmbit i Tancaments
- Funcions d'Ordre Superior
Mòdul 4: Objectes i Arrays
- Introducció als Objectes
- Mètodes d'Objecte i Paraula Clau 'this'
- Arrays: Conceptes Bàsics i Mètodes
- Iteració sobre Arrays
- Desestructuració d'Arrays
Mòdul 5: Objectes i Funcions Avançades
- Prototips i Herència
- Classes i Programació Orientada a Objectes
- Mòduls i Importació/Exportació
- JavaScript Asíncron: Callbacks
- Promeses i Async/Await
Mòdul 6: El Model d'Objectes del Document (DOM)
- Introducció al DOM
- Selecció i Manipulació d'Elements del DOM
- Gestió d'Esdeveniments
- Creació i Eliminació d'Elements del DOM
- Gestió i Validació de Formularis
Mòdul 7: APIs del Navegador i Temes Avançats
- Emmagatzematge Local i de Sessió
- Fetch API i AJAX
- WebSockets
- Service Workers i Aplicacions Web Progressives (PWAs)
- Introducció a WebAssembly
Mòdul 8: Proves i Depuració
- Depuració de JavaScript
- Proves Unitàries amb Jest
- Proves d'Integració
- Proves de Cap a Cap amb Cypress
Mòdul 9: Rendiment i Optimització
- Optimització del Rendiment de JavaScript
- Gestió de Memòria
- Manipulació Eficient del DOM
- Càrrega Per Mandat i Divisió de Codi
Mòdul 10: Frameworks i Llibreries de JavaScript
- Introducció a React
- Gestió d'Estat amb Redux
- Conceptes Bàsics de Vue.js
- Conceptes Bàsics d'Angular
- Triar el Framework Adequat