JavaScript Invocation de fonction

Les fonctions JavaScript ont 4 méthodes d'invocation.

La différence entre chaque méthode réside dansthisl'initialisation de

thisMots-clés

D'une manière générale, en JavaScript, this fait référence à l'objet courant lorsque la fonction est exécutée.

Note Notethisest un mot-clé réservé, vous ne pouvez pas modifierthisla valeur de celui-ci.

Appel des fonctions JavaScript

Dans les chapitres précédents, nous avons appris à créer des fonctions.

Le code à l'intérieur d'une fonction est exécuté après que la fonction est appelée.

Appel en tant que fonction

Exemple

function myFunction(a, b) { return a * b; } myFunction(10, 2); //myFunction(10, 2) renvoie 20

Essayez-le vous-même »

La fonction ci-dessus n'appartient à aucun objet. Mais en JavaScript, elle est toujours l'objet global par défaut.

En HTML, l'objet global par défaut est la page HTML elle-même, donc la fonction appartient à la page HTML.

L'objet page dans un navigateur est la fenêtre du navigateur (l'objet window). La fonction ci-dessus devient automatiquement une fonction de l'objet window.

myFunction() et window.myFunction() sont identiques :

Exemple

function myFunction(a, b) { return a * b; } window.myFunction(10, 2); //window.myFunction(10, 2) renvoie 20

Essayez-le vous-même »

Note C'est une méthode courante pour invoquer des fonctions JavaScript, mais ce n'est pas une bonne pratique de programmation.
Les variables, méthodes ou fonctions globales peuvent facilement provoquer des bogues de conflit de noms.

Objet global

Lorsqu'une fonction n'est pas invoquée par son propre objet,this, la valeur de this devient l'objet global.

Dans un navigateur web, l'objet global est la fenêtre du navigateur (l'objet window).

Cet exemple renvoiethis. La valeur de this est l'objet window :

Exemple

function myFunction() { return this; } myFunction(); //Renvoie l'objet window

Essayez-le vous-même »

Note Invoquer une fonction en tant qu'objet global fait dethis, la valeur de this, l'objet global.
Utiliser l'objet window comme variable peut facilement faire planter le programme.

Invoquer une fonction en tant que méthode

En JavaScript, vous pouvez définir une fonction comme méthode d'un objet.

L'exemple suivant crée un objet (myObject), l'objet possède deux propriétés (firstNameetlastName), et une méthode (fullName):

Exemple

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); //Renvoie "John Doe"

Essayez-le vous-même »

fullNameUne méthode est une fonction. Une fonction appartient à un objet.myObjectest le propriétaire de la fonction.

thisUn objet, qui possède du code JavaScript. Dans l'exemple,thisla valeur de this estmyObjectl'objet.

Testez-le ! ModifiezfullNamela méthode et renvoyezthisla valeur :

Exemple

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this; } } myObject.fullName(); //Renvoie [object Object] (l'objet propriétaire)

Essayez-le vous-même »

Note Invoquer une fonction en tant que méthode d'objet fait dethisla valeur de this l'objet lui-même.

Invoquer une fonction avec un constructeur

Si l'appel de fonction est précédé dunewmot-clé, alors il invoque un constructeur.

Cela ressemble à la création d'une nouvelle fonction, mais en fait les fonctions JavaScript sont des objets recréés :

Exemple

//Constructeur : function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // Cela crée un nouvel objet var x = new myFunction("John","Doe"); x.firstName; //Renvoie "John"

Essayez-le vous-même »

Une invocation de constructeur crée un nouvel objet. Le nouvel objet hérite des propriétés et des méthodes du constructeur.

Note Dans le constructeur,thisle mot-clé n'a pas de valeur.
thisLa valeur de this est créée lorsque l'appel de fonction instancie l'objet (nouvel objet).

Appeler une fonction en tant que méthode de fonction

En JavaScript, les fonctions sont des objets. Les fonctions JavaScript ont leurs propres propriétés et méthodes.

call()etapply()sont des méthodes de fonction prédéfinies.

Exemple

function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); //Renvoie 20

Essayez-le vous-même »

Exemple

function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); //Renvoie 20

Essayez-le vous-même »

Les deux méthodes utilisent l'objet lui-même comme premier paramètre. La différence entre les deux réside dans le second paramètre : apply prend un tableau d'arguments, c'est-à-dire que plusieurs arguments sont combinés dans un tableau et transmis, tandis que call les transmet comme arguments de call (à partir du second paramètre).

En mode strict JavaScript, lors de l'appel d'une fonction, le premier paramètre devientthisla valeur de this, même si le paramètre n'est pas un objet.

En mode non strict de JavaScript, si le premier paramètre est null ou undefined, il utilisera à la place l'objet global.

Note Grâce aux méthodes call() ou apply(), vous pouvez définirthisla valeur de this, et l'appeler comme une nouvelle méthode d'un objet existant.
Autres extensions