JavaScript Définitions de fonctions

JavaScript utilise le mot-cléfunctionpour définir des fonctions.

Les fonctions peuvent être définies par des déclarations, ou peuvent aussi être des expressions.

Déclarations de fonctions

Dans les tutoriels précédents, vous avez appris la syntaxe des déclarations de fonctions :

function functionName(parameters) {
  执行的代码
}

Une déclaration de fonction n'est pas exécutée immédiatement. Elle est appelée lorsque nous en avons besoin.

Exemples

function myFunction(a, b) {
    return a * b;
}

Essayez-le vous-même »

Note Les points-virgules sont utilisés pour séparer les instructions JavaScript exécutables.
Comme une déclaration de fonction n'est pas une instruction exécutable, elle ne se termine pas par un point-virgule.

Expressions de fonctions

Les fonctions JavaScript peuvent être définies par une expression.

Une expression de fonction peut être stockée dans une variable :

Exemples

var x = function (a, b) {return a * b};

Essayez-le vous-même »

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

Exemples

var x = function (a, b) {return a * b};
var z = x(4, 3);

Essayez-le vous-même »

La fonction ci-dessus est en fait unefonction anonyme(une fonction sans nom).

Les fonctions stockées dans des variables n'ont pas besoin de noms de fonction. Elles sont généralement appelées par le nom de la variable.

Note La fonction ci-dessus se termine par un point-virgule car c'est une instruction exécutable.

Le constructeur Function()

Dans les exemples ci-dessus, nous avons appris que les fonctions sont définies par le mot-cléfunctiondéfini.

Les fonctions peuvent également être définies à l'aide du constructeur de fonction JavaScript intégré (Function()).

Exemples

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

Essayez-le vous-même »

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

Exemples

var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

Essayez-le vous-même »

Note En JavaScript, bien souvent, vous devez éviter d'utiliser le mot-clénew.

Hissage des fonctions

Dans les tutoriels précédents, nous avons déjà appris ce qu'est le « hissage ».

Le hissage est le comportement par défaut de JavaScript qui consiste à déplacer la portée actuelle vers le haut.

Le hissage s'applique aux déclarations de variables et aux déclarations de fonctions.

Par conséquent, les fonctions peuvent être appelées avant leur déclaration :

myFunction(5);

function myFunction(y) {
    return y * y;
}

Les fonctions définies à l'aide d'expressions ne peuvent pas être hissées.

Fonctions auto-invoquées

Les expressions de fonction peuvent être « auto-invoquées ».

Une expression auto-invoquée est automatiquement invoquée.

Si l'expression est suivie de (), elle sera automatiquement invoquée.

Les fonctions déclarées ne peuvent pas être auto-invoquées.

En ajoutant des parenthèses, vous indiquez qu'il s'agit d'une expression de fonction :

Exemples

(function () {
var x = "Hello!!"; // Je vais m'invoquer moi-même
})();

Essayez-le vous-même »

La fonction ci-dessus est en fait unefonction anonyme auto-invoquée(sans nom de fonction).

Les fonctions peuvent être utilisées comme valeurs

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

Exemples

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3);

Essayez-le vous-même »

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

Exemples

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;

Essayez-le vous-même »

Les fonctions sont des objets

En JavaScript, utiliser l'opérateurtypeofpour vérifier le type d'une fonction renverra "function".

Mais il est plus précis de décrire les fonctions JavaScript comme des objets.

Les fonctions JavaScript ontdes propriétésetet des méthodes。

La propriété arguments.length renvoie le nombre d'arguments reçus lors de l'appel de la fonction :

Exemples

function myFunction(a, b) {
    return arguments.length;
}

Essayez-le vous-même »

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

Exemples

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

Essayez-le vous-même »

Fonctions fléchées

ES6 a introduit les fonctions fléchées.

La syntaxe des expressions de fonctions fléchées est plus concise que celle des expressions de fonctions classiques.

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

Lorsqu'il n'y a qu'un seul paramètre, les parenthèses sont facultatives :

(single parameter) => { function declaration }
single parameter => { function declaration }

Les fonctions sans paramètre doivent être écrites avec une paire de parenthèses :

() => { function declaration }

Exemples

// ES5 var x = function(x, y) { return x * y; } // ES6 const x = (x, y) => x * y;

Essayez-le vous-même »

Certaines fonctions fléchées n'ont pas leur proprethis.Ne convient pas pour définir une。

méthode d'objet.

Lorsque nous utilisons des fonctions fléchées, la fonction fléchée lie automatiquement la valeur du this externe pour nous, donc dans une fonction fléchée, la valeur de this est la même que le this externe.

Utiliserconstplutôt que d'utiliservarest plus sûr, car les expressions de fonction sont toujours une constante.

Si le corps de la fonction ne contient qu'une seule instruction, vous pouvez omettre le mot-clé return et les accolades {}, ce qui est une bonne habitude :

Exemples

const x = (x, y) => { return x * y };

Essayez-le vous-même »

Remarque :IE11 et les versions antérieures d'IE ne prennent pas en charge les fonctions fléchées.

Autres extensions