Appel de fonction JavaScript


Réutilisation de méthode

Avec la méthode call() , vous pouvez écrire une méthode qui peut être utilisée sur différents objets.


Toutes les fonctions sont des méthodes

En JavaScript, toutes les fonctions sont des méthodes d'objet.

Si une fonction n'est pas une méthode d'un objet JavaScript, elle appartient à l'objet global (voir le chapitre précédent).

L'exemple ci-dessous crée un objet avec trois propriétés : firstName, lastName et fullName.

Exemple

const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}

// Cela retournera "John Doe" :
person.fullName();
Essayez-le vous-même »

Dans l'exemple ci-dessus, this fait référence à l' objet person .

this.firstName signifie la propriété firstName de this .

Cela équivaut à :

this.firstName signifie la propriété firstName de person .


Qu'est-ce que this ?

En JavaScript, le mot-clé this fait référence à un objet .

Le mot-clé this fait référence à différents objets selon la façon dont il est utilisé :

Seul, this fait référence à l' objet global .
Dans une fonction, this fait référence à l' objet global .
Dans une fonction, en mode strict, this est undefined .
Dans une méthode d'objet, this fait référence à l' objet .
Dans un événement, this fait référence à l' élément qui a reçu l'événement.
Des méthodes comme call() , apply() et bind() peuvent référencer this à n'importe quel objet .

Remarque

this n'est pas une variable.

this est un mot-clé.

Vous ne pouvez pas changer la valeur de this .



La méthode call() de JavaScript

La méthode call() est une méthode prédéfinie en JavaScript.

Elle peut être utilisée pour invoquer (appeler) une méthode avec un objet comme argument (paramètre).

Remarque

Avec call() , un objet peut utiliser une méthode appartenant à un autre objet.

Cet exemple appelle la méthode fullName de person, en l'utilisant sur person1 :

Exemple

const person = {
fullName : function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
const person2 = {
firstName:"Mary",
lastName: "Doe"
}

// Cela retournera "John Doe" :
person.fullName.call( person1 );

Essayez-le vous-même »

Cet exemple appelle la méthode fullName de person, en l'utilisant sur person2 :

Exemple

const person = {
fullName : function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
const person2 = {
firstName:"Mary",
lastName: "Doe"
}

// Cela retournera "Mary Doe"
person.fullName.call( person2 );

Essayez-le vous-même »

La méthode call() avec des arguments

La méthode call() peut accepter des arguments :

Exemple

const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}

const person1 = {
firstName:"John",
lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norvège");

Essayez-le vous-même »