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()); // 1300Exercicis 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: 2020Exercici 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 kmErrors Comuns i Consells
-
Oblidar el
superen el constructor de la classe derivada: Quan es crea una classe que hereta d'una altra, és necessari cridarsuperal 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
