Appels de fonctions JavaScript
Appel de fonction JavaScript
Il existe 4 façons d'appeler une fonction JavaScript.
La différence entre chaque méthode réside dans l'initialisation de celle-ci.
ce mot-clé
De manière générale, en Javascript, cela pointe vers l'objet courant lorsque la fonction est exécutée.
Notez qu'il s'agit d'un mot-clé réservé, vous ne pouvez pas en modifier la valeur.
Appel de fonctions JavaScript
Dans les chapitres précédents, nous avons appris à créer des fonctions.
Le code de la fonction est exécuté après l'appel de la fonction.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p> 全局函数 (myFunction) 返回参数参数相乘的结果: </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, c'est toujours l'objet global par défaut.
L'objet global par défaut en HTML est la page HTML elle-même, donc la fonction appartient à la page HTML.
L'objet page dans le navigateur est la fenêtre du navigateur (objet window). Les fonctions ci-dessus deviendront automatiquement des fonctions de l'objet window.
myFunction() et window.myFunction() sont identiques :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>全局函数 myFunction() 会自动成为 window 对象的方法。</p> <p>myFunction() 类似于 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>
C'est une façon courante d'appeler des fonctions JavaScript, mais ce n'est pas une bonne pratique de programmation
Variables globales, méthodes ou fonctions Bogues qui provoquent facilement des conflits de noms.
Objet global
Lorsque la fonction n'est pas appelée par son propre objet, la valeur de celui-ci deviendra l'objet global.
Dans un navigateur Web, l'objet global est la fenêtre du navigateur (objet window).
La valeur de this renvoyée par cette instance est l'objet window :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p> <p id="demo"></p> <script> function myFunction() { return this; } document.getElementById("demo").innerHTML = myFunction(); </script> </body> </html>
Lorsque la fonction est appelée en tant qu'objet global, la valeur de this devient l'objet global.
L'utilisation de l'objet window comme variable peut facilement provoquer le crash du programme.
Fonctions appelées comme méthodes
En JavaScript, vous pouvez définir des fonctions comme méthodes d'objets.
La méthode fullName est une fonction. Les fonctions appartiennent aux objets. myObject est le propriétaire de la fonction.
Cet objet contient du code JavaScript. La valeur de this dans l'instance est l'objet myObject.
Utilisez le constructeur pour appeler la fonction
Si le nouveau mot-clé est utilisé avant l'appel de la fonction, le constructeur est appelé.
Cela ressemble à une nouvelle fonction créée, mais en fait les fonctions JavaScript sont des objets recréés :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>该实例中, myFunction 是函数构造函数:</p> <p id="demo"></p> <script> function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } var x = new myFunction("John","Doe") document.getElementById("demo").innerHTML = x.firstName; </script> </body> </html>
Un appel au constructeur crée un nouvel objet. Le nouvel objet hérite des propriétés et méthodes du constructeur.
Le mot clé this dans le constructeur n'a aucune valeur.
La valeur de this est créée lorsque l'objet (nouvel objet) est instancié lorsque la fonction est appelée.
Appeler une fonction en tant que méthode de fonction
En JavaScript, les fonctions sont des objets. Une fonction JavaScript a ses propriétés et ses méthodes.
call() et apply() sont des méthodes de fonction prédéfinies. Deux méthodes peuvent être utilisées pour appeler des fonctions, et le premier paramètre des deux méthodes doit être l'objet lui-même.
Instance
function myFunction(a, b) { return a * b; } myFunction.call(myObject, 10, 2); // 返回 20
Instance
function myFunction(a, b) { return a * b; } myArray = [10,2]; myFunction.apply(myObject, myArray); // 返回 20
Les deux méthodes utilisent l'objet lui-même comme premier paramètre. La différence entre les deux réside dans le deuxième paramètre : appliquer les passes dans un tableau de paramètres, c'est-à-dire que plusieurs paramètres sont combinés dans un tableau et transmis, tandis que call est transmis en tant que paramètre d'appel (à partir du deuxième paramètre).
En mode strict JavaScript (mode strict), le premier paramètre deviendra la valeur de ceci lors de l'appel de la fonction, même si le paramètre n'est pas un objet.
En mode JavaScript non strict, si la valeur du premier paramètre est nulle ou indéfinie, il utilisera à la place l'objet global.
Avec la méthode call() ou apply(), vous pouvez définir la valeur de this et l'appeler comme une nouvelle méthode sur un objet existant.