Appels de fonctions JavaScript
Il existe 4 façons d'appeler des fonctions 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 actuel lorsque la fonction est exécutée.
Remarque : ceci est un mot-clé réservé, vous ne pouvez pas modifier la valeur de celui-ci.
Appeler la fonction JavaScript
Dans le chapitre précédent, nous avons appris à créer des fonctions.
Le code de la fonction est exécuté après l'appel de la fonction.
Appeler en tant que fonction
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>Exécutez le programme pour l'essayer
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 fenêtre). Les fonctions ci-dessus deviendront automatiquement des fonctions de l'objet window.
myFunction() et window.myFunction() sont identiques :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>Exécutez le programme et essayez it
Conseils : Il s'agit d'une manière courante d'appeler 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
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 :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>Exécutez le programme et essayez it
Remarque : L'appel d'une fonction en tant qu'objet global fera de la valeur de this un objet global. L'utilisation de l'objet window comme variable peut facilement provoquer le crash du programme.
Fonction comme appel de méthode
En JavaScript, vous pouvez définir des fonctions comme méthodes d'objets.
L'exemple suivant crée un objet (myObject), qui possède deux propriétés (firstName et lastName) et une méthode (fullName) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>Exécutez le programme et essayez-le
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.
Test ci-dessous ! Modifiez la méthode fullName et renvoyez cette valeur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在一个对象方法中 ，<b>this</b> 的值是对象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>Exécutez le programme et essayez-le
Conseils : Lorsque la fonction est appelée en tant que méthode objet, la valeur de ceci deviendra l'objet lui-même.
Utilisez le constructeur pour appeler la fonction
Si le mot-clé new est utilisé avant l'appel de la fonction, le constructeur est appelé.
On dirait qu'une nouvelle fonction est créée, mais en fait les fonctions JavaScript sont des objets recréés :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>Exécutez le programme et essayez-le
L'appel au constructeur créera un nouvel objet. Le nouvel objet hérite des propriétés et méthodes du constructeur.
Astuce : 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.
function myFunction(a, b) {
return a * b;
>
myFunction.call(myObject, 10, 2); // Return 20
function maFonction(a, b) {
return a * b;
}
monArray = [10,2];
maFonction.apply(monObjet, monArray ); // Retour 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.
Astuce : Grâce à la méthode call() ou apply(), vous pouvez définir la valeur de this et l'appeler comme une nouvelle méthode d'un objet existant.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
