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 avez appris la syntaxe de déclaration de fonction :

fonction nomdefonction( paramètres) {
Code exécuté
}

La fonction ne sera pas exécutée immédiatement après sa déclaration, mais sera appelée lorsque nous j'en ai 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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

NoteLes points-virgules sont utilisés pour séparer les instructions JavaScript exécutables.
Note分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句，所以不以分号结束。
Puisque 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 :

Instance

<!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>

Instance en cours d'exécution»

Cliquez le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne

Une fois l'expression de fonction stockée dans la variable, la variable peut également être utilisée comme fonction :

Instance 

<!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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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.

Note上述函数以分号结尾，因为它是一个执行语句。

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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

En fait, vous n'êtes pas obligé d'utiliser un constructeur. L'exemple ci-dessus peut s'écrire :

Instance

<!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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour voir l'exemple en ligne

NoteEn JavaScript, plusieurs fois , vous devez éviter d'utiliser le mot-clé
Note在 JavaScript 中，很多时候，你需要避免使用 new 关键字。
new<🎜>.

Fonction Hoisting (Hoisting)

Dans le tutoriel précédent, nous avons déjà 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.

Fonctions auto-appelantes

Les expressions de fonction peuvent "s'appeler elles-mêmes".

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 :

Instance

<!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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

La fonction ci-dessus est en fait une fonction d'auto-appel anonyme (sans nom de fonction).

La fonction peut être utilisée comme valeur

La fonction JavaScript peut être utilisée comme valeur :

Instance

<!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écuter l'exemple»

Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne

Les fonctions JavaScript peuvent être utilisées comme expressions :

Exemple

<!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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Les fonctions sont des objets

L'utilisation de l'opérateur typeof en JavaScript pour déterminer le type de fonction 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>

Instance en cours d'exécution »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

La méthode toString() renvoie la fonction sous forme de chaîne :

Instance 

<!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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Note函数定义作为对象的属性，称之为对象方法。
函数如果用于创建新的对象，称之为对象的构造函数。