Appels de fonctions JavaScript
Il existe 4 façons d'appeler des fonctions JavaScript.
La façon dont chacun diffère réside dans l'initialisation de ceci.
this Mots clés
De manière générale, en Javascript, this pointe vers l'objet actuel lorsque la fonction est exécutée.
 | Notez que
est un mot clé réservé, vous ne pouvez pas modifier la valeur de this. |
|---|
Le code de la fonction est exécuté après l'appel de la fonction. Bouton "Exécuter l'instance" pour afficher l'instance en ligne
La fonction ci-dessus n'appartient à aucun objet. Mais en JavaScript, c'est toujours l'objet global par défaut.
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 :
<!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>Instance en cours d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
 | Il s'agit d'une méthode courante pour appeler des fonctions JavaScript. Mais ce n'est pas une bonne pratique de programmationLes variables, méthodes ou fonctions globales peuvent facilement provoquer des bogues de conflit de noms. |
|---|
Lorsque la fonction n'est pas appelée par son propre objet, la valeur de this deviendra un objet global. Dans les navigateurs Web, l'objet global est la fenêtre du navigateur (objet window).
| 这是调用 JavaScript 函数常用的方法， 但不是良好的编程习惯 全局变量，方法或函数容易造成命名冲突的bug。 |
|---|
this
est l'objet fenêtre :
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>Instance en cours d'exécution »Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
| Le La fonction est appelée en tant qu'objet global, fera de la valeur de thisun objet global.L'utilisation de l'objet window comme variable peut facilement provoquer le crash du programme. |
|---|
Fonctions comme méthodes
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) :
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écuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour La méthode view Online instance
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 la this valeur :
Instance
<!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écuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
| < img src="https://img.php.cn/upload/course/000/000/009/580430d9613d6751.jpg" alt="Note"/> | La fonction est appelée comme méthode objet, ce qui fera que la valeur de
deviendra l'objet lui-même. |
|---|
Si le mot-clé new
est utilisé avant la fonction call, puis Le constructeur est appelé. On dirait qu'une nouvelle fonction est créée, mais en fait les fonctions JavaScript sont des objets recréés :<!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écuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
| 构造函数中 this 关键字没有任何的值。 this 的值在函数调用时实例化对象(new object)时创建。 |
|---|
| 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. |
|---|
Appel d'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
return a * b;
>
myFunction.call(myObject, 10, 2); // Retourne 20
instance
return a * b;
>
myArray = [10,2];
myFunction.apply(myObject, myArray); // Return 20
Utiliser les deux méthodes L'objet lui-même est passé comme premier paramètre. La différence entre les deux réside dans le deuxième paramètre : Ce que apply transmet est 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 JavaScript strict, le premier paramètre deviendra la valeur de this 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.
| Vous pouvez définir la valeur de
via la méthode call() ou apply(), et comme déjà Un nouvel appel de méthode existe pour l'objet. |
|---|
<🎜>
