El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Mètodes d'Objecte i Paraula Clau 'this'

Següent ►
►

Introducció

En aquest tema, explorarem els mètodes d'objecte i la paraula clau this en JavaScript. Els mètodes són funcions que es defineixen dins d'un objecte i poden accedir a les propietats de l'objecte mitjançant la paraula clau this.

Objectius

  • Entendre què són els mètodes d'objecte.
  • Aprendre a definir i utilitzar mètodes dins d'un objecte.
  • Comprendre el comportament de la paraula clau this dins dels mètodes.

Conceptes Clau

Què són els Mètodes d'Objecte?

Els mètodes d'objecte són funcions que es defineixen com a propietats d'un objecte. Aquests mètodes poden accedir i manipular altres propietats de l'objecte.

La Paraula Clau this

La paraula clau this fa referència a l'objecte des del qual es crida el mètode. És una manera de referir-se a l'objecte actual dins del mètode.

Exemples Pràctics

Definició d'un Mètode d'Objecte

let persona = {
    nom: "Joan",
    edat: 30,
    saluda: function() {
        console.log("Hola, em dic " + this.nom + " i tinc " + this.edat + " anys.");
    }
};

persona.saluda(); // Sortida: Hola, em dic Joan i tinc 30 anys.

Explicació

  • Objecte persona: Té propietats nom i edat.
  • Mètode saluda: És una funció que utilitza this per accedir a les propietats nom i edat de l'objecte persona.

La Paraula Clau this en Funcions Fletxa

Les funcions fletxa (arrow functions) no tenen el seu propi valor de this. En canvi, hereten el valor de this del seu context de definició.

let persona = {
    nom: "Joan",
    edat: 30,
    saluda: () => {
        console.log("Hola, em dic " + this.nom + " i tinc " + this.edat + " anys.");
    }
};

persona.saluda(); // Sortida: Hola, em dic undefined i tinc undefined anys.

Explicació

  • Funció Fletxa saluda: No té el seu propi this, per tant, this.nom i this.edat són undefined.

Solució amb Funció Normal

Per evitar aquest problema, utilitzem funcions normals per als mètodes d'objecte.

let persona = {
    nom: "Joan",
    edat: 30,
    saluda: function() {
        console.log("Hola, em dic " + this.nom + " i tinc " + this.edat + " anys.");
    }
};

persona.saluda(); // Sortida: Hola, em dic Joan i tinc 30 anys.

Exercicis Pràctics

Exercici 1: Crear un Objecte amb Mètodes

Crea un objecte cotxe amb les propietats marca, model i any. Afegeix un mètode descripcio que imprimeixi una descripció del cotxe utilitzant this.

let cotxe = {
    // Completa aquí
};

// Crida al mètode
cotxe.descripcio();

Solució

let cotxe = {
    marca: "Toyota",
    model: "Corolla",
    any: 2020,
    descripcio: function() {
        console.log("Aquest cotxe és un " + this.marca + " " + this.model + " de l'any " + this.any + ".");
    }
};

cotxe.descripcio(); // Sortida: Aquest cotxe és un Toyota Corolla de l'any 2020.

Exercici 2: Utilitzar Funcions Fletxa i this

Modifica el mètode descripcio de l'objecte cotxe per utilitzar una funció fletxa. Observa què passa amb el valor de this.

let cotxe = {
    marca: "Toyota",
    model: "Corolla",
    any: 2020,
    descripcio: () => {
        console.log("Aquest cotxe és un " + this.marca + " " + this.model + " de l'any " + this.any + ".");
    }
};

cotxe.descripcio(); // Quina és la sortida?

Solució

let cotxe = {
    marca: "Toyota",
    model: "Corolla",
    any: 2020,
    descripcio: () => {
        console.log("Aquest cotxe és un " + this.marca + " " + this.model + " de l'any " + this.any + ".");
    }
};

cotxe.descripcio(); // Sortida: Aquest cotxe és un undefined undefined de l'any undefined.

Retroalimentació sobre Errors Comuns

  • Error Comú 1: Utilitzar funcions fletxa per a mètodes d'objecte, el que resulta en this indefinit.
  • Error Comú 2: Oblidar-se de fer servir this per accedir a les propietats de l'objecte dins d'un mètode.

Resum

En aquesta secció, hem après sobre els mètodes d'objecte i la paraula clau this en JavaScript. Hem vist com definir mètodes dins d'un objecte i com utilitzar this per accedir a les propietats de l'objecte. També hem explorat el comportament de this en funcions fletxa i hem practicat amb exercicis per reforçar aquests conceptes.

En el següent tema, explorarem els arrays: conceptes bàsics i mètodes.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats