Définition de la fonction JavaScript
JavaScript utilise le mot-clé function pour définir des fonctions.
La fonction peut être définie par déclaration ou elle peut être une expression.
Déclaration de fonction
Dans le tutoriel précédent, vous connaissiez déjà la syntaxe de déclaration de fonction :
function functionName(parameters) {
Code exécuté
}
La fonction ne sera pas exécutée immédiatement après sa déclaration, mais sera appelée lorsque nous en aurons besoin.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>Exécutez le programme et essayez-le
Astuce : Le Le point-virgule est utilisé pour séparer les instructions JavaScript exécutables. Étant donné que la déclaration de fonction n'est pas une instruction exécutable, elle ne se termine pas par un point-virgule.
Expression de fonction
Les fonctions JavaScript peuvent être définies par une expression.
Les expressions de fonction peuvent être stockées dans des variables :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以存储在变量中:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Exécutez le programme pour l'essayer
Une fois l'expression de fonction stockée dans une variable, celle-ci peut également être utilisé comme fonction Utiliser :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>Exécutez le programme pour l'essayer
La fonction ci-dessus est en fait une fonction anonyme (la fonction n'a pas de nom).
La fonction est stockée dans une variable et ne nécessite pas de nom de fonction. Elle est généralement appelée via le nom de la variable.
Astuce : La fonction ci-dessus se termine par un point-virgule car il s'agit d'une instruction d'exécution.
Constructeur Function()
Dans l'exemple ci-dessus, nous avons appris que les fonctions sont définies via le mot-clé function .
Les fonctions peuvent également être définies via le constructeur de fonctions JavaScript intégré (Function()).
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>JavaScrip 内置构造函数。</p>
<p id="demo"></p>
<script>
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>Exécutez le programme pour l'essayer
Astuce : En JavaScript, plusieurs fois, vous devez éviter d’utiliser le nouveau mot-clé.
En fait, vous n'êtes pas obligé d'utiliser un constructeur. L'exemple ci-dessus peut s'écrire :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>Exécutez le programme et essayez-le
Fonction Levage (Levage)
Dans le tutoriel précédent, nous avons appris le "levage".
Le levage est le comportement par défaut de JavaScript consistant à hisser la portée actuelle vers l'avant.
Le levage est appliqué aux déclarations de variables et aux déclarations de fonctions.
Par conséquent, la fonction peut être appelée avant la déclaration :
myFunction(5);
function myFunction(y) {
return y * y;
}
Ne peut pas être promu lors de la définition d'une fonction à l'aide d'une expression.
Fonction d'auto-appel
Les expressions de fonction peuvent "s'auto-appeler".
Les expressions auto-appelantes sont automatiquement appelées.
Appelé automatiquement si l'expression est suivie de () .
Impossible d'appeler automatiquement la fonction déclarée.
Indiquez qu'il s'agit d'une expression de fonction en ajoutant des parenthèses :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>
</body>
</html>Exécutez le programme pour l'essayer
La fonction ci-dessus est en fait une fonction d'auto-appel anonyme (pas de nom de fonction).
La fonction peut être utilisée comme valeur
La fonction JavaScript peut être utilisée comme valeur :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个值：</p>
<p>x = myFunction(4,3) 或 x = 12</p>
<p>两种情况下，x 的值都为 12。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Exécutez le programme pour l'essayer
Les fonctions JavaScript peuvent être utilisées comme expressions :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个表达式使用。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Exécutez le programme et essayez-le
La fonction est un objet
Utilisez l'opérateur typeof en JavaScript pour déterminer le type de fonction qui renverra « fonction ».
Mais il est plus précis de décrire une fonction JavaScript comme un objet.
Les fonctions JavaScript ont des propriétés et des méthodes.
La propriétéarguments.length renvoie le nombre de paramètres reçus lors de l'appel de la fonction :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>Exécutez le programme et essayez La méthode it
toString() renvoie la fonction sous forme de chaîne :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>Exécutez le programme pour essayez-le
Conseils : Les fonctions définies comme attributs d'objets sont appelées méthodes d'objet. Si la fonction est utilisée pour créer un nouvel objet, elle est appelée le constructeur de l'objet.
![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)
