Appel de fonction JavaScript
Le code à l'intérieur d'un JavaScript functions'exécutera lorsque "quelque chose" l'invoquera.
Invoquer une fonction JavaScript
Le code à l'intérieur d'une fonction n'est pas exécuté lorsque la fonction est définie .
Le code à l'intérieur d'une fonction est exécuté lorsque la fonction est invoquée .
Il est courant d'utiliser le terme « appeler une fonction » au lieu de « appeler une fonction ».
Il est également courant de dire "appeler une fonction", "démarrer une fonction" ou "exécuter une fonction".
Dans ce didacticiel, nous utiliserons invoquer , car une fonction JavaScript peut être invoquée sans être appelée.
Invoquer une fonction en tant que fonction
Exemple
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); //
Will return 20
La fonction ci-dessus n'appartient à aucun objet. Mais en JavaScript, il y a toujours un objet global par défaut.
En HTML, l'objet global par défaut est la page HTML elle-même, donc la fonction ci-dessus "appartient" à la page HTML.
Dans un navigateur, l'objet page est la fenêtre du navigateur. La fonction ci-dessus devient automatiquement une fonction de fenêtre.
myFunction() et window.myFunction() est la même fonction :
Exemple
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20
C'est une façon courante d'invoquer une fonction JavaScript, mais ce n'est pas une très bonne pratique.
Les variables, méthodes ou fonctions globales peuvent facilement créer des conflits de noms et des bogues dans l'objet global.
Le ce mot- clé
En JavaScript, la chose appelée this, est l'objet qui "possède" le code actuel.
La valeur de this, lorsqu'elle est utilisée dans une fonction, est l'objet qui « possède » la fonction.
Notez que ce thisn'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this.
Conseil : En savoir plus sur le mot- thisclé sur JS this Keyword .
L'objet global
Lorsqu'une fonction est appelée sans objet propriétaire, la valeur de this
devient l'objet global.
Dans un navigateur Web, l'objet global est la fenêtre du navigateur.
Cet exemple renvoie l'objet window comme valeur de this:
Exemple
let x = myFunction();
// x will be the window object
function myFunction() {
return this;
}
L'appel d'une fonction en tant que fonction globale fait que la valeur de this est l'objet global.
L'utilisation de l'objet window comme variable peut facilement planter votre programme.
Invoquer une fonction en tant que méthode
En JavaScript, vous pouvez définir des fonctions en tant que méthodes d'objet.
L'exemple suivant crée un objet ( myObject ), avec deux propriétés ( firstName et lastName ) et une méthode ( fullName ) :
Exemple
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
La méthode fullName est une fonction. La fonction appartient à l'objet. myObject est le propriétaire de la fonction.
La chose appelée this, est l'objet qui "possède" le code JavaScript. Dans ce cas, la valeur de this
est myObject .
Essaye-le! Modifiez la méthode fullName pour renvoyer la valeur dethis :
Exemple
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
// This will return [object Object] (the owner object)
myObject.fullName();
L'appel d'une fonction en tant que méthode d'objet fait que la valeur de this
est l'objet lui-même.
Invoquer une fonction avec un constructeur de fonction
Si un appel de fonction est précédé du mot- newclé, il s'agit d'un appel de constructeur.
On dirait que vous créez une nouvelle fonction, mais comme les fonctions JavaScript sont des objets, vous créez en fait un nouvel objet :
Exemple
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
const myObj = new myFunction("John", "Doe");
// This will return "John"
myObj.firstName;
Un appel de constructeur crée un nouvel objet. Le nouvel objet hérite des propriétés et des méthodes de son constructeur.
Le thismot clé dans le constructeur n'a pas de valeur.
La valeur de thissera le nouvel objet créé lorsque la fonction est invoquée.