El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem dos conceptes fonamentals en JavaScript: els prototips i la herència. Aquests conceptes són essencials per entendre com funciona la programació orientada a objectes (OOP) en JavaScript.

Què és un Prototip?

En JavaScript, cada objecte té una propietat interna anomenada [[Prototype]]. Aquesta propietat és una referència a un altre objecte, conegut com a prototip. Quan es busca una propietat o mètode en un objecte, JavaScript primer busca en l'objecte mateix. Si no troba la propietat o mètode, busca en el prototip de l'objecte, i així successivament fins arribar al final de la cadena de prototips.

Exemple de Prototip

let animal = {
    eats: true
};

let rabbit = {
    jumps: true
};

rabbit.__proto__ = animal; // Estableix animal com a prototip de rabbit

console.log(rabbit.eats); // true (heretat de animal)
console.log(rabbit.jumps); // true (propi de rabbit)

Explicació

Creació d'Objectes: Hem creat dos objectes, animal i rabbit.
Establiment del Prototip: Hem establert animal com a prototip de rabbit utilitzant la propietat __proto__.
Herència de Propietats: Quan accedim a rabbit.eats, JavaScript no troba aquesta propietat en rabbit i la busca en el seu prototip, animal.

Herència en JavaScript

La herència permet crear nous objectes basats en objectes existents, heretant les seves propietats i mètodes. Això es fa mitjançant la cadena de prototips.

Exemple d'Herència

function Animal(name) {
    this.name = name;
    this.canWalk = true;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating.`);
};

function Rabbit(name) {
    Animal.call(this, name); // Hereta les propietats de Animal
    this.canJump = true;
}

Rabbit.prototype = Object.create(Animal.prototype); // Hereta els mètodes de Animal
Rabbit.prototype.constructor = Rabbit;

Rabbit.prototype.jump = function() {
    console.log(`${this.name} is jumping.`);
};

let rabbit = new Rabbit('Bunny');

rabbit.eat(); // Bunny is eating.
rabbit.jump(); // Bunny is jumping.
console.log(rabbit.canWalk); // true
console.log(rabbit.canJump); // true

Explicació

Funció Constructora: Hem creat una funció constructora Animal que defineix les propietats name i canWalk.
Mètodes del Prototip: Hem afegit un mètode eat al prototip de Animal.
Herència de Propietats: La funció constructora Rabbit crida a Animal.call(this, name) per heretar les propietats de Animal.
Herència de Mètodes: Hem establert Rabbit.prototype com a objecte creat a partir de Animal.prototype per heretar els mètodes.
Mètodes Propis: Hem afegit un mètode jump al prototip de Rabbit.

Exercicis Pràctics

Exercici 1: Crear una Cadena de Prototips

Crea una cadena de prototips on dog hereti de animal i animal hereti de livingBeing.

let livingBeing = {
    isAlive: true
};

let animal = {
    __proto__: livingBeing,
    canBreathe: true
};

let dog = {
    __proto__: animal,
    barks: true
};

console.log(dog.isAlive); // true
console.log(dog.canBreathe); // true
console.log(dog.barks); // true

Exercici 2: Funcions Constructores i Herència

Crea una funció constructora Vehicle amb les propietats make i model. Crea una funció constructora Car que hereti de Vehicle i afegeixi la propietat numDoors.

function Vehicle(make, model) {
    this.make = make;
    this.model = model;
}

Vehicle.prototype.start = function() {
    console.log(`${this.make} ${this.model} is starting.`);
};

function Car(make, model, numDoors) {
    Vehicle.call(this, make, model);
    this.numDoors = numDoors;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.honk = function() {
    console.log(`${this.make} ${this.model} is honking.`);
};

let myCar = new Car('Toyota', 'Corolla', 4);

myCar.start(); // Toyota Corolla is starting.
myCar.honk(); // Toyota Corolla is honking.
console.log(myCar.numDoors); // 4

Errors Comuns i Consells

Oblidar Establir el Constructor: Després de crear un nou prototip amb Object.create, assegura't de restablir la propietat constructor.
No Utilitzar call per Heretar Propietats: Quan crides a la funció constructora del pare, utilitza call per assegurar-te que les propietats es copien correctament.
Confusió amb __proto__: És millor utilitzar Object.create per establir prototips en lloc de __proto__ per evitar problemes de compatibilitat.

Resum

En aquest tema, hem après sobre els prototips i la herència en JavaScript. Hem vist com els objectes poden heretar propietats i mètodes a través de la cadena de prototips i com utilitzar funcions constructores per implementar herència. Aquests conceptes són fonamentals per a la programació orientada a objectes en JavaScript i ens permeten crear estructures de codi més reutilitzables i organitzades.

Prototips i Herència

Què és un Prototip?

Exemple de Prototip

Explicació

Herència en JavaScript

Exemple d'Herència

Explicació

Exercicis Pràctics

Exercici 1: Crear una Cadena de Prototips

Exercici 2: Funcions Constructores i Herència

Errors Comuns i Consells

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final