7.1 Création de méthodes d'objet
Les méthodes d'objet en JavaScript sont des fonctions qui sont associées à des objets et peuvent effectuer des actions sur ces objets. Les méthodes permettent aux objets d'avoir leur propre comportement, ce qui en fait une partie importante de la programmation orientée objet. Ci-dessous, nous allons examiner la création et l'utilisation des méthodes d'objet.
Les méthodes d'objet peuvent être créées de plusieurs manières. Examinons les principales d'entre elles.
1. Littéral d'objet
Les méthodes peuvent être créées directement dans un littéral d'objet en utilisant des fonctions.
Dans cet exemple, l'objet person a une méthode greet(), qui renvoie une chaîne en utilisant la propriété name de l'objet :
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Affichera : Hello, my name is John
2. Syntaxe simplifiée des méthodes
Avec ES6, une syntaxe simplifiée pour créer des méthodes d'objet est apparue.
Cette syntaxe rend le code plus concis et plus facile à lire :
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Affichera : Hello, my name is John
3. Ajout de méthodes après la création de l'objet
Les méthodes peuvent être ajoutées à un objet après sa création.
Dans cet exemple, la méthode greet() est ajoutée à l'objet person après sa création :
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Affichera : Hello, my name is John
4. Utilisation d'une fonction de constructeur
Une fonction de constructeur permet de créer des méthodes pour toutes les instances d'un objet.
Dans cet exemple, la méthode greet() est créée pour chaque instance d'objet créée avec la fonction constructeur 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()); // Affichera : Hello, my name is John
console.log(jane.greet()); // Affichera : Hello, my name is Jane
7.2 Utilisation des méthodes d'objet
1. Accès aux méthodes via le point
Les méthodes d'objet peuvent être appelées en utilisant la syntaxe du point :
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Affichera : Hello, my name is John
2. Accès aux méthodes via des crochets
Les méthodes d'objet peuvent également être appelées en utilisant des crochets :
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Affichera : Hello, my name is John
3. Appel de méthode à l'intérieur d'une autre méthode
Les méthodes d'objet peuvent appeler d'autres méthodes de ce même objet.
Dans cet exemple, les méthodes sum() et mul() utilisent les valeurs définies par la méthode 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()); // Affichera : 5
console.log(calculator.mul()); // Affichera : 6
4. Utilisation de this dans les méthodes
Le mot-clé this dans les méthodes d'objet se réfère à l'objet lui-même, ce qui permet d'accéder à ses propriétés et à d'autres méthodes :
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Affichera : Brand: Toyota, Model: Camry
5. Passage de méthodes comme callbacks
Lorsque les méthodes d'objet sont passées en tant que callbacks, il est important de prendre en compte la valeur de this :
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Affichera : Hello, my name is undefined
Dans cet exemple, la valeur de this est perdue lorsque la méthode greet() est passée comme callback dans setTimeout().
En conséquence, this à l'intérieur de greet() se réfère à l'objet global window.
Dans les navigateurs, l'objet window a une propriété name, qui par défaut est une chaîne vide
"". Par conséquent, cela affiche "Hello, my name is".
Pour conserver la bonne valeur de this, on peut utiliser la méthode bind(), qui lie la fonction à un contexte particulier :
setTimeout(person.greet.bind(person), 1000); // Affichera : Hello, my first name is John
Ou utiliser une fonction fléchée :
setTimeout(() => person.greet(), 1000); // Affichera : Hello, my first name is John
7.3 Partage des méthodes
1. Héritage des méthodes via des prototypes
Les méthodes peuvent être ajoutées aux prototypes des objets pour qu'elles soient accessibles à toutes les instances :
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()); // Affichera : Hello, my name is John
console.log(jane.greet()); // Affichera : Hello, my name is Jane
2. Utilisation de méthodes depuis d'autres objets
Les méthodes d'un objet peuvent être appelées pour un autre objet en utilisant la méthode call() ou 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)); // Affichera : Hello, my name is Jane
GO TO FULL VERSION