fonctions JavaScript peuvent être invoquées de 4 manières différentes.
Chaque méthode diffère dans la façon dont this initialisation.
Le this mots - clés
En JavaScript, la chose appelé this , est l'objet qui «possède» le code actuel.
La valeur de this , lorsqu'il est utilisé dans une fonction, est l'objet qui «possède» la fonction.
A noter que this ne sont pas une variable. Il est un mot clé. Vous ne pouvez pas modifier la valeur de this .
Invoquer une fonction JavaScript
Vous avez déjà appris que le code dans une fonction JavaScript exécutera lorsque "quelque chose" l'invoque.
Le code dans une fonction est pas exécutée lorsque la fonction est définie. Elle est exécutée lorsque la fonction est appelée.
Certaines personnes utilisent le terme «appeler une fonction" au lieu de "invoquer une fonction".
Il est également tout à fait courant de dire "appel à une fonction", "démarrer une fonction", ou "exécuter une fonction".
Dans ce tutoriel, nous allons utiliser invoke, car une fonction JavaScript peut être invoquée sans être appelé.
Invoquer une fonction en tant que fonction
Exemple
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) will return 20
Essayez - le vous - même » La fonction ci-dessus ne fait pas partie de tout objet. Mais en JavaScript, il y a toujours un objet global par défaut.
Dans HTML l'objet global par défaut est la page HTML lui-même, de sorte que la fonction ci-dessus «appartient» à la page HTML.
Dans un navigateur l'objet de la 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); // window.myFunction(10, 2) will also return 20
Essayez - le vous - même » Ceci est une voie commune pour appeler une fonction JavaScript, mais pas une très bonne pratique.
Les variables globales, méthodes ou fonctions peuvent facilement créer des conflits de noms et des bogues dans l'objet global.
L'objet global
Quand 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 de la fenêtre que la valeur de this :
Exemple
function myFunction() {
return this;
}
myFunction(); // Will return the window object
Essayez - le vous - même » Invoquer une fonction comme une fonction globale, provoque la valeur de this d'être l'objet global.
Utilisation de l'objet fenêtre comme une variable peut facilement planter votre programme.
Invoquer une fonction comme méthode
Dans JavaScript, vous pouvez définir la fonction 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
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
Essayez - le vous - même » La fullName méthode 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 c'est this myObject .
Essaye-le! Changer la fullName méthode pour retourner la valeur de this :
Exemple
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // Will return [object Object] (the owner object)
Essayez - le vous - même » Invoquer une fonction comme une méthode d'objet, provoque la valeur de this d'être l'objet lui - même.
Invoquer une fonction avec une fonction Constructor
Si un appel de fonction est précédée du new mot - clé, il est une invocation de constructeur.
Il semble que vous créez une nouvelle fonction, mais puisque les fonctions JavaScript sont des objets que 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
var x = new myFunction("John","Doe");
x.firstName;
// Will return "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 méthodes de son constructeur.
Le this mot - clé dans le constructeur n'a pas de valeur.
La valeur de this sera le nouvel objet créé lorsque la fonction est appelée.
Invoquer une fonction avec une méthode de fonction
En JavaScript, les fonctions sont des objets. fonctions JavaScript ont des propriétés et des méthodes.
call() et apply() sont des méthodes de fonction JavaScript prédéfinis. Les deux méthodes peuvent être utilisées pour appeler une fonction, et les deux méthodes doivent avoir l'objet propriétaire en tant que premier paramètre.
Exemple
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // Will return 20
Essayez - le vous - même » Exemple
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject =
myFunction.apply(myObject, myArray); // Will also return 20
Essayez - le vous - même » Les deux méthodes prennent un objet propriétaire comme premier argument. La seule différence est que l' call() prend les arguments de la fonction séparément, et apply() prend les arguments de la fonction dans un tableau.
Dans JavaScript mode strict, le premier argument devient la valeur de this dans la fonction invoquée, même si l'argument est pas un objet.
En mode «non-stricte", si la valeur du premier argument est nul ou non défini, il est remplacé par l'objet global.
Avec call() ou apply() , vous pouvez définir la valeur de this , et invoquer une fonction comme une nouvelle méthode d'un objet existant.