Le code à l'intérieur d'une fonction JavaScript s'exécutera lorsque "quelque chose" l'invoquera.
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 "invoquer une fonction".
Il est également courant de dire « faire appel à une fonction », « démarrer une fonction » ou "exécuter une fonction".
Dans ce tutoriel, nous utiliserons invoke, car un La fonction JavaScript peut être invoquée sans être appelée.
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); //
Will return 20Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>
La fonction ci-dessus n'appartient à aucun objet. Mais en JavaScript là est 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" au 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.
Il s'agit d'une manière courante d'appeler 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.
myFunction() et window.myFunction() sont la même fonction :
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Global functions automatically become window methods. Invoking myFunction() is the same as invoking window.myFunction().</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2);
</script>
</body>
</html>
En JavaScript, le mot clé this fait référence à un objet.
Quel objet dépend de la façon dont ce est invoqué (utilisé ou appelé).
Le mot-clé this fait référence à différents objets selon la façon dont il est utilisé :
Dans une méthode objet, this fait référence à l'objet.
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, ce est non défini.
Dans un événement, this fait référence à l'élément qui a reçu l'événement.
Des méthodes telles que call(), apply() et bind() peut faire référence à ce à n'importe quel objet.
ce n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this.
Le didacticiel JavaScript ce
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 :
let x = myFunction();
// x will be the window object
function myFunction() {
return this;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>
<p id="demo"></p>
<script>
let x = myFunction();
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
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 faire planter votre programme.
En JavaScript, vous pouvez définir des fonctions en tant que méthodes objet.
L'exemple suivant crée un objet (myObject), avec deux propriétés (firstName et lastName), et un méthode (fullName) :
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>myObject.fullName() will return John Doe:</p>
<p id="demo"></p>
<script>
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
La méthode fullName est une fonction. La fonction appartient à L'object. 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 monObjet.
Essaye-le! Modifiez la méthode fullName pour renvoyer la valeur de this :
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
// This will return [object Object] (the owner object)
myObject.fullName();
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The value of <b>this</b>, in an object method, is the owner object.</p>
<p id="demo"></p>
<script>
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
L'appel d'une fonction en tant que méthode objet entraîne la valeur de this être l'objet lui-même.
Si un appel de fonction est précédé du mot-clé new, c'est une invocation de constructeur.
Il semble que vous créiez une nouvelle fonction, mais comme les fonctions JavaScript sont objets, vous créez réellement un nouvel objet :
// 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;Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example, myFunction is a function constructor:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
const myObj = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = myObj.firstName;
</script>
</body>
</html>
Un appel de constructeur crée un nouvel objet. Le nouvel objet hérite du propriétés et méthodes de son constructeur.
Le mot-clé this dans le constructeur n'a pas de valeur.
La valeur de this sera le nouvel objet créé lorsque la fonction est invoquée.