7.1 Creazione di metodi dell'oggetto
I metodi dell'oggetto in JavaScript sono funzioni che sono associate agli oggetti e possono eseguire azioni su di essi. I metodi permettono agli oggetti di avere il proprio comportamento, il che li rende una parte importante della programmazione orientata agli oggetti. Di seguito esamineremo la creazione e l'uso dei metodi degli oggetti.
I metodi dell'oggetto possono essere creati in diversi modi. Esaminiamo i principali.
1. Literal dell'oggetto
I metodi possono essere creati direttamente nel literal dell'oggetto, usando funzioni.
In questo esempio, l'oggetto person ha un metodo greet() che restituisce una stringa usando la proprietà name dell'oggetto:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Mostrerà: Hello, my name is John
2. Sintassi abbreviata dei metodi
Con ES6 è stata introdotta una sintassi abbreviata per la creazione di metodi dell'oggetto.
Questa sintassi rende il codice più conciso e leggibile:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Mostrerà: Hello, my name is John
3. Aggiungere metodi dopo la creazione dell'oggetto
I metodi possono essere aggiunti a un oggetto dopo la sua creazione.
In questo esempio, il metodo greet() viene aggiunto all'oggetto person dopo la sua creazione:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Mostrerà: Hello, my name is John
4. Uso di una funzione costruttrice
Una funzione costruttrice permette di creare metodi per tutte le istanze di un oggetto.
In questo esempio, il metodo greet() viene creato per ogni istanza dell'oggetto creata con la funzione costruttrice Person():
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Mostrerà: Hello, my name is John
console.log(jane.greet()); // Mostrerà: Hello, my name is Jane
7.2 Uso dei metodi dell'oggetto
1. Accesso ai metodi tramite punto
I metodi dell'oggetto possono essere chiamati usando la sintassi del punto:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Mostrerà: Hello, my name is John
2. Accesso ai metodi tramite parentesi quadre
I metodi dell'oggetto possono anche essere chiamati usando le parentesi quadre:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Mostrerà: Hello, my name is John
3. Chiamare un metodo all'interno di un altro metodo
I metodi dell'oggetto possono chiamare altri metodi dello stesso oggetto.
In questo esempio, i metodi sum() e mul() usano i valori impostati dal metodo setValues():
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // Mostrerà: 5
console.log(calculator.mul()); // Mostrerà: 6
4. Uso di this nei metodi
La parola chiave this nei metodi dell'oggetto si riferisce all'oggetto stesso, permettendo di accedere alle sue proprietà e agli altri metodi:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Mostrerà: Brand: Toyota, Model: Camry
5. Passaggio dei metodi come callback
Quando i metodi dell'oggetto vengono passati come callback, è importante considerare il valore di this:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Mostrerà: Hello, my name is undefined
In questo esempio, il valore di this viene perso quando il metodo greet() viene passato come callback in setTimeout(). Di conseguenza, this all'interno di greet() si riferisce all'oggetto globale window. Nei browser, l'oggetto window ha una proprietà name, che per impostazione predefinita è una stringa vuota "". Pertanto viene mostrato "Hello, my name is". Per preservare il corretto valore di this, si può usare il metodo bind(), che lega la funzione a un determinato contesto:
setTimeout(person.greet.bind(person), 1000); // Mostrerà: Hello, my name is John
Oppure usare una funzione freccia:
setTimeout(() => person.greet(), 1000); // Mostrerà: Hello, my name is John
7.3 Uso condiviso dei metodi
1. Ereditarietà dei metodi tramite prototipi
I metodi possono essere aggiunti ai prototipi degli oggetti, in modo che siano disponibili a tutte le istanze:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Mostrerà: Hello, my name is John
console.log(jane.greet()); // Mostrerà: Hello, my name is Jane
2. Uso di metodi da altri oggetti
I metodi di un oggetto possono essere chiamati per un altro oggetto usando il metodo call() o apply():
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // Mostrerà: Hello, my name is Jane
GO TO FULL VERSION