Fonctions et porte des fonctions

Description

Toute fonction JavaScript est en fait un objet Function. Voir la page Function pour des informations sur les proprits et les mthodes de ces objets.

Afin de renvoyer une valeur, la fonction doit comporter une instruction return qui dfinit la valeur renvoyer (sauf dans le cas d'un constructeur qui a t appel avec le mot-cl Operators/new). Une fonction qui ne renvoie pas de valeur retourne undefined.

Les paramtres donns lors de l'appel d'une fonction sont appels les arguments de la fonction. Les arguments sont passs par valeur (by value en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se rpercute pas en dehors de la fonction. Il existe cependant les rfrences d'objets qui sont aussi des valeurs mais qui possdent la particularit suivante : si la fonction modifie les proprit de l'objet de la rfrence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :

/* Dclaration de la fonction 'maFonction' */
function maFonction(monObjet) {
  monObjet.marque = "Toyota";
}

/*
 * Dclaration de la variable 'mavoiture';
 * cration et initialisation d'un nouvel objet;
 * assigner une rfrence  'mavoiture'
 */
var mavoiture = {
  marque: "Honda",
  modele: "Accord",
  annee: 1998,
};

/* Affiche 'Honda' */
console.log(mavoiture.marque);

/* Passer la rfrence de l'objet  la fonction */
maFonction(mavoiture);

/*
 * Affiche 'Toyota' pour valeur de la proprit 'marque'
 * de l'objet. C'est ce que la fonction a chang.
 */
console.log(mavoiture.marque);

Le mot-cl this ne fait pas rfrence la fonction en cours d'excution. Il faut donc faire rfrence aux objets Function par leurs noms, et ce mme au sein du corps de la fonction.

Dfinir des fonctions

Il y a plusieurs faons de dfinir des fonctions

Dclarer une fonction (l'instruction function)

Il existe une syntaxe spcifique pour la dclaration des fonctions (vous pouvez consulter la page de l'instruction function pour plus de dtails) :

function nom([param[, param[, ... param]]]) {
  instructions
}

nom

Le nom de la fonction.

param

Le nom d'un argument passer la fonction (une fonction pouvant avoir jusqu' 255 arguments).

instructions

Les instructions qui forment le corps de la fonction.

Utiliser une expression de fonction (l'expression function)

L'expression d'une fonction se fait d'une faon similaire la dclaration (veuillez consulter la page de l'expression function pour plus d'informations) :

function [nom]([param] [, param] [..., param]) {
  instructions
}

nom

Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.

param

Le nom d'un argument passer la fonction.

instructions

Les instructions qui forment le corps de la fonction.

Voici un exemple d'expression de fonction anonyme (il n'y a pas de nom utilis) :

var maFonction = function () {
  /* instructions */
};

Il est galement possible de fournir un nom lors de la dfinition afin de crer une expression de fonction nomme :

var maFonction = function fonctionNomme() {
  /* instructions */
};

L'un des bnfices d'utiliser une expression de fonction nomme est que son nom sera utilis dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de reprer l'origine de l'erreur.

Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-cl function. Les instructions qui dclarent des fonctions mais qui ne commencent pas avec function sont des expressions de fonction.

Lorsque les fonctions sont utilises une unique fois, on peut utiliser une expression de fonction immdiatement invoque (ou plus gnralement appele IIFE pour Immediately Invokable Function Expression en anglais).

(function () {
  /* instruction */
})();

Les IIFE sont des expressions de fonction appeles ds que la fonction est dclare.

Utiliser une dclaration de fonction gnratrice (l'instruction function*)

Il existe une syntaxe spciale pour dclarer des gnrateurs (voir la page sur l'instruction function* pour plus de dtails) :

function* nom([param[, param[, ... param]]]) {
  instructions
}

nom

Le nom de la fonction.

param

Le nom d'un argument passer la fonction.

instructions

Les instructions qui forment le corps de la fonction.

Utiliser une expression de gnrateur (l'expression function*)

Une expression de gnrateur est similaire une dclaration de fonction gnratrice et possde presque la mme syntaxe (pour plus de dtails, consulter la page sur l'expression function*) :

function* [nom]([param[, param[, ... param]]]) {
  instructions
}

nom

Le nom de la fonction. Ce paramtre peut tre omis, auquel cas la fonction sera une fonction anonyme.

param

Le nom d'un argument passer la fonction.

instructions

Les instructions qui composent le corps de la fonction.

Utiliser une expression de fonction flche (=>)

Une expression de fonction flche possde une syntaxe plus courte et est lie, de faon lexicale, sa valeur (voir la page sur les fonctions flches pour plus de dtails) :

([param[, param]]) => {
  instructions
}

param => expression

param

Le nom d'un argument. S'il n'y a pas d'arguments, cela doit tre indiqu par (). S'il y a un seul argument, les parenthses ne sont pas obligatoires (par exemple : toto => 1).

instructions ou expression

S'il y a plusieurs instructions, elles doivent tre encadres par des accolades. Une expression unique ne doit pas obligatoirement tre entoure d'accolades. L'expression est galement la valeur de retour implicite de la fonction.

Le constructeur Function

Comme tous les autres objets, les objets Function peuvent tre crs grce l'oprateur new :

new Function(arg1, arg2, ...argN, corpsDeLaFonction);

arg1, arg2, ... argN

Plusieurs (zro ou plus) noms qui seront utiliss par la fonction comme noms d'arguments formels. Chaque nom doit tre une chane de caractres valide au sens d'un identifiant JavaScript ou alors tre une liste de telles chanes spares par des virgules. On aura les exemples suivants : "x", "laValeur", ou "a,b".

corpsDeLaFonction

Une chane de caractres contenant les instructions JavaScript dfinissant la fonction.

L'invocation du constructeur Function en tant que fonction (sans utiliser l'oprateur new) a le mme effet que son invocation en tant que constructeur.

Le constructeur GeneratorFunction

Comme pour tous les autres objets, les objets GeneratorFunction peuvent tre crs grce l'oprateur new :

new GeneratorFunction(arg1, arg2, ...argN, corpsFonction);

arg1, arg2, ... argN

Plusieurs (zro ou plus) noms qui seront utiliss par la fonction comme noms d'arguments formels. Chaque nom doit tre une chane de caractres valide au sens d'un identifiant JavaScript ou alors tre une liste de telles chanes spares par des virgules. On aura les exemples suivants : "x", "theValue", ou "a,b".

corpsFonction

Une chane de caractres contenant les instructions JavaScript dfinissant la fonction.

Les paramtres d'une fonction

Les paramtres par dfaut

Les paramtres par dfaut permettent aux paramtres dclars d'une fonction de pouvoir tre initialiss avec des valeurs par dfaut s'ils ne sont pas fournis la fonction ou s'ils valent undefined. Pour plus de dtails, voir la page de la rfrence sur les paramtres par dfaut.

Les paramtres du reste

Cette syntaxe permet de reprsenter un nombre indfini d'arguments sous forme d'un tableau. Pour plus de dtails, voir la page sur les paramtres du reste.

L'objet arguments

Il est possible de faire rfrence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet arguments. Consulter la page arguments pour plus d'informations.

• arguments : Un objet semblable un tableau qui contient les arguments passs la fonction qui est excute.
• arguments.callee : La fonction en cours d'excution.
• arguments.caller : La fonction qui a appel la fonction courante.
• arguments.length : Le nombre d'arguments passs la fonction.

Rcursion

Une fonction peut faire rfrence elle-mme et s'appeler elle-mme. Il y a trois faons pour qu'une fonction fasse appel elle-mme :

1. le nom de la fonction
2. arguments.callee
3. une variable interne faisant rfrence la fonction

Avec l'exemple suivant :

var truc = function toto() {
  // instructions
};

Ce qui suit sera quivalent au sein de la fonction :

1. toto()
2. arguments.callee()
3. truc()

Une fonction qui s'appelle elle-mme est appele une fonction rcursive. D'une certaine manire, une rcursion est semblable une boucle. Une rcursion et une boucle excutent le mme code plusieurs fois et s'appuient sur une condition (afin d'viter une boucle infinie, ou plutt une rcursion infinie ici). Ainsi la boucle suivante :

var x = 0;
// "x < 10" est la condition de la boucle
while (x < 10) {
  // faire des choses
  x++;
}

peut tre convertie en une fonction rcursive et un appel cette fonction :

function boucle(x) {
  // "x >= 10" est la condition de sortie
  // (et quivaut  "!(x < 10)")
  if (x >= 10) return;
  // faire des choses
  boucle(x + 1); // l'appel rcursif
}
boucle(0);

Cependant, certains algorithmes ne peuvent pas tre traduits sous forme de boucles itratives. Ainsi, obtenir tous les nuds d'un arbre (par exemple le DOM), est beaucoup plus facile faire de manire rcursive.

function parcoursArbre(noeud) {
  if (noeud == null)
    //
    return;
  // faire quelque chose avec le noeud
  for (var i = 0; i < noeud.childNodes.length; i++) {
    parcoursArbre(noeud.childNodes[i]);
  }
}

Par rapport la fonction boucle, chaque appel rcursif enchane ici plusieurs appels rcursifs successifs.

Il est thoriquement possible de convertir tout algorithme rcursif en un algorithme non-rcursif. Cependant, la logique du problme est souvent beaucoup plus complexe et l'on doit faire recours une pile pour le rsoudre. Mais la rcursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.

La comportement de la rcursion en tant que pile peut tre observe avec cet exemple :

function truc(i) {
  if (i < 0) return;
  console.log("dbut :" + i);
  truc(i - 1);
  console.log("fin :" + i);
}
truc(3);

Elle produira le rsultat suivant :

dbut :3
dbut :2
dbut :1
dbut :0
fin :0
fin :1
fin :2
fin :3

Fonctions imbriques et fermetures

Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbrique (interne) est prive par rapport la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (closure en anglais).

Une fermeture est une expression (gnralement une fonction) possdant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui ferme l'expression).

tant donn qu'une fonction imbrique est une fermeture, cela signifie que la fonction imbrique peut hriter des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la porte de la fonction externe.

Pour rsumer :

• on ne peut accder la fonction interne seulement avec des instructions contenues dans la fonction externe,

• la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.

L'exemple suivant, montre le cas de fonctions imbriques :

function ajouteCarres(a, b) {
  function carre(x) {
    return x * x;
  }
  return carre(a) + carre(b);
}
var a = ajouteCarres(2, 3); // renvoie 13
var b = ajouteCarres(3, 4); // renvoie 25
var c = ajouteCarres(4, 5); // renvoie 41

tant donn que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de dfinir des arguments pour la fonction externe mais aussi pour la fonction interne :

function externe(x) {
  function interne(y) {
    return x + y;
  }
  return interne;
}
var fn_interne = externe(3);
var resultat = fn_interne(5); // renvoie 8

var resultat1 = externe(3)(5); // renvoie 8

Conservation des variables

On voit alors que x est conserv lorsqu'interne est renvoy. Une fermeture doit conserver les arguments et les variables au sein de toutes les portes auxquelles elle fait rfrence. tant donn qu'ventuellement, chaque appel fournira des arguments diffrents, une nouvelle fermeture est cre pour chaque appel externe. La mmoire peut donc tre libre seulement lorsque inside n'est plus accessible.

Cela n'est pas diffrent du stockage de rfrences avec d'autres objets, mais a reste plus dlicat observer puisqu'on ne peut inspecter ou dfinir soi-mme les rfrences en question.

Imbrication multiple de fonctions

On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accder A et C peut accder B. On peut donc en dduire, puisque C accde B qui accde A que C peut accder A. On voit donc que les fermetures peuvent contenir diffrentes portes. Elles peuvent, rcursivement, contenir la porte des fonctions qui la contiennent. Ce mcanisme est appel chanage de porte (scope chaining en anglais). (Cette dnomination sera explique par la suite.)

On peut l'observer avec l'exemple suivant :

function A(x) {
  function B(y) {
    function C(z) {
      console.log(x + y + z);
    }
    C(3);
  }
  B(2);
}
A(1); // cre un message d'alerte avec 6 (= 1 + 2 + 3)

Dans cet exemple, C accde la variable y de B et la variable x de A. Cela est possible parce que :

1. B est une fermeture qui contient A, autrement dit B peut accder aux arguments et aux variables de A
2. C est une fermeture qui contient B
3. tant donn que la fermeture de B contient A et que celle de C contient B, C peut accder la fois aux arguments et variables de B et A. Autrement dit, C enchane les portes de B et A dans cet ordre.

La rciproque n'est pas vraie. A ne peut avoir accs C, parce que A ne peut accder ni aux variables ni aux arguments de B, or C est une variable de B. C est donc priv et seulement pour B.

Conflits de noms

Lorsque deux arguments ou variables appartenant aux portes d'une fermeture ont le mme nom, il y a un conflit de noms. La porte la plus interne l'emportera par rapport la porte la plus externe. C'est ce qu'on appelle la chane de porte (scope chain en anglais). Le premier maillon de cette chane est la porte la plus interne tandis que le dernier maillon est reprsent par la porte la plus externe. Regardons l'exemple suivant :

function externe() {
  var x = 10;
  function interne(x) {
    return x;
  }
  return interne;
}
resultat = externe()(20); // renvoie 20 et non pas 10

Le conflit de nom apparat avec l'instruction return x et vient de la dnomination commune de l'argument x de la fonction interne et la variable x de la fonction externe. La chane de porte est, pour cet exemple : {interne, externe, objet globalt}. On voit alors que le x de la fonction interne l'emporte sur le x de la fonction externe. 20 (x de la fonction interne) est donc renvoy plutt que 10 (x de la fonction externe).

Dfinition des mthodes

Les accesseurs et mutateurs (getter et setter)

Il est possible de dfinir des mthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles proprits. La syntaxe utilise pour dfinir les getters et setters est celle utilise avec les littraux objets.

get

Permet de lier une proprit d'un objet une fonction qui sera appele lorsqu'on accdera la proprit.

set

Permet de lier une proprit d'un objet une fonction qui sera appele lorsqu'on tentera de modifier cette proprit.

Syntaxe des dfinitions de mthode ECMAScript 2015

Avec ECMAScript 2015, il est possible de dfinir des mthodes de faon plus concise ( la faon de ce qui est dj possible pour les getters et setters). Voir la page sur les dfinitions de mthodes pour plus d'informations.

var obj = {
  toto() {},
  truc() {},
};

Constructeur, dclaration, expression ?

Comparons les exemples suivants :

1. une fonction dfinie grce au constructeur Function assigne la variable multiplier

   js

   var multiplier = new Function("x", "y", "return x * y;");
   

2. une dclaration de fonction d'une fonction appele multiplier

   js

   function multiplier(x, y) {
     return x * y;
   }
   

3. une expression de fonction d'une fonction anonyme assigne la variable multiplier

   js

   var multiplier = function (x, y) {
     return x * y;
   };
   

4. une expression de fonction d'une fonction nomme fonction_nom assigne la variable multiplier

   js

   var multiplier = function function_nom(x, y) {
     return x * y;
   };
   

Tous ces exemples effectuent peu prs la mme chose, mais diffrent sur quelques points :

• Il y a une distinction entre le nom de la fonction et la variable laquelle elle est affecte :

  • le nom de la fonction ne peut tre chang alors que la variable laquelle la fonction a t assigne peut tre rassigne.

  • le nom de la fonction ne peut-tre utilis qu' l'intrieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entranera une erreur (ou undefined si le nom de la fonction a t dclar auparavant avec une instruction var). Ainsi :

    js

        var y = function x() {};
        console.log(x); // renvoie une erreur
        ```
    
    Le nom de la fonction apparat galement lorsque la fonction est srialise avec la [mthode toString de l'objet `Function`](/fr/docs/JavaScript/Reference/Rfrence_JavaScript/Objets_globaux/Function/toString).
    
    La variable  laquelle est assigne la fonction est seulement limite par rapport  la porte. La porte au sein de laquelle la fonction est dclare est donc garantie d'tre dans la porte de la variable.
    
    

  • Comme le montre le quatrime exemple, le nom de la fonction peut tre diffrent du nom de la variable laquelle a t assigne la fonction. Les deux noms n'ont aucune relation entre eux.

• Une dclaration de fonction peut aussi crer une variable avec le mme nom que la fonction. Ainsi, contrairement une expression de fonction, une dclaration de fonction permet d'accder la fonction grce son nom au sein de la porte dans laquelle elle a t dfinie :

  js

  function x() {}
  console.log(x); // affichera la fonction x srialise en une chane de caractres
  

  L'exemple qui suit montre que les noms de fonctions ne sont par lies aux variables auxquelles sont assignes les fonctions. Si une variable de fonction est assigne une autre valeur, elle aura toujours le mme nom de fonction :

  js

  function toto() {}
  console.log(toto); // message affichant la chaine de caractres "toto"
  var truc = toto;
  console.log(truc); // message affichant la chaine de caractres "toto"
  

• Une fonction dfinie grce new Function n'aura pas de nom de fonction. Cependant, le moteur JavaScript SpiderMonkey, la forme srialise de la fonction apparat comme si la fonction avait le nom anonymous . Le code console.log(new Function()) produira :

  js

  function anonymous() {}
  

  La fonction n'ayant pas de nom effectif, anonymous n'est pas une variable laquelle on pourra accder au sein de la fonction. Par exemple, le code qui suit produira une erreur :

  js

  var toto = new Function("console.log(anonymous);");
  toto();
  

• la diffrence des fonctions dfinies par les expressions de fonction ou par le constructeur Function, une fonction dfinie par une dclaration de fonction pourra tre utilise avant la dclaration. Ainsi :

  js

  toto(); // affichera TOTO !
  function toto() {
    console.log("TOTO !");
  }
  

• Une fonction dfinie par une expression de fonction hrite de la porte courante. La fonction forme donc une fermeture. En revanche, les fonctions dfinies par le constructeur Function n'hritent que de la porte globale (porte hrite par toutes les fonctions).

• Les fonctions dfinies par les expressions et les dclarations de fonctions ne sont analyses (parses) qu'une seule fois. Celles dfinies grce au constructeur Function ne le sont pas. Cela signifie que la chane de caractre reprsentant le corps de la fonction doit tre analyse chaque fois qu'elle est value. Bien qu'une expression de fonction cre obligatoirement une fermeture, le corps de la fonction n'est pas pars nouveau. Les expressions de fonctions sont donc plus rapides que new Function(...) . Il faut donc viter le constructeur Function autant que possible. Il faut cependant noter que les expressions et les dclarations imbriques au sein d'une chane de caractre pour un constructeur Function ne sont analyses qu'une seule fois. On aura l'exemple suivant :

  js

  var toto = new Function(
    "var truc = 'TOTO !';\nreturn(function() {\n\tconsole.log(truc);\n});",
  )();
  toto(); //La partie  function() {\n\tconsole.log(truc);\n}  de la chane de caractres n'est pas analyse  nouveau.
  

Une dclaration de fonction peut trs facilement (et souvent involontairement) tre transforme en une expression de fonction. Une dclaration de fonction cesse d'en tre une lorsque :

• elle fait partie d'une expression

• ou elle n'est plus un lment source de la fonction ou du script. Un lment source est une instruction non-imbrique du script ou d'un corps de fonction.

  js

  var x = 0; // lment source
  if (x === 0) {
    // lment source
    x = 10; // pas un lment source
    function titi() {} // pas un lment source
  }
  function toto() {
    // lment source
    var y = 20; // lment source
    function truc() {} // lment source
    while (y === 10) {
      // lment source
      function machin() {} // pas un lment source
      y++; // pas un lment source
    }
  }
  

Exemples

// dclaration de fonction
function toto() {}

// expression de fonction
(function truc() {});

// expression de fonction
var x = function bonjour() {};

if (x) {
  // expression de fonction
  function monde() {}
}

// dclaration de fonction
function a() {
  // dclaration de fonction
  function b() {}
  if (0) {
    // expression de fonction
    function c() {}
  }
}

Dfinir une fonction de faon conditionnelle

Il est possible de dfinir des fonctions de manire conditionnelle en utilisant soit : //function statements// (une extension autorise par le standard ECMA-262 Edition 3) soit le constructeur Function. Il faut noter que de telles instructions ne sont plus autorises dans le standard ES5 strict. Il faut galement savoir que cela ne fonctionne pas de manire homogne sur les diffrents navigateurs. Il est donc dconseill d'utiliser cette fonctionnalit.

Dans le script qui suit, la fonction zero n'est jamais dfinie et ne peut donc tre appele car le test if (0) est toujours faux :

if (0) {
  function zero() {
    console.log("C'est zero.");
  }
}

Si le script est chang et que la condition devient if (1) , la fonction zero sera alors dfinie.

Bien que cette fonction ressemble une dclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbrique au sein d'une autre instruction. (Consulter le paragraphe prcdent pour une explication ce sujet).

if (0) {
  var zero = function () {
    console.log("C'est zero");
  };
}

Les fonctions en tant que gestionnaires d'vnements

En JavaScript, les gestionnaires d'vnements DOM (event handlers en anglais) sont des fonctions (diffrentes des objets contenant une mthode handleEvent dans d'autres langages de liaison avec le DOM -binding languages en anglais). Les fontions ont l'objet event comme seul et unique paramtre. Comme tous les autres paramtres, si l'objet vnement, n'a pas besoin d'tre utilis, il peut tre absent de la liste des paramtres formels.

Les objets d'un document HTML susceptibles de recevoir des vnements peuvent tre par exemple : window (objets Window, y compris les objets frames), document (les objets HTMLDocument), et les lments (les objets Element). Au sein du DOM HTML, les objets recevant des vnements possde des proprits gestionnaires d'vnements. Ces proprits sont les noms des vnements en minuscules prfixs par on (par exemple onfocus). Une autre faon, plus fiable, d'ajouter des auditeurs d'vnements, est offert par les vnements DOM de niveau 2.

Note : Les vnements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)

L'exemple suivant assigne une fonction au gestionnaire de l'vnement focus .

window.onfocus = function () {
  document.body.style.backgroundColor = "white";
};

Si une fonction est assigne une variable, il est possible d'assigner la variable un gestionnaire d'vnement. Le fragment de code qui suit assigne une fonction la variable setBGColor.

var setBGColor = new Function("document.body.style.backgroundColor = 'white';");

Il est alors possible d'utiliser cette variable pour assigner une fonction un gestionnaire d'vnement. Cela peut se faire de plusieurs manires, en voici deux dcrites ici :

1. crire dans les proprits de l'vment DOM HTML

   js

   document.form1.colorButton.onclick = setBGColor;
   

2. l'attribut de l'vnement HTML

   html

   <input
     type="button"
     value="Changer la couleur de fond"
      />
   

   Un gestionnaire d'vnement dfini de cette manire sera une fonction, nomme selon l'attribut, encadr du code spcifique ncessaire. C'est pourquoi les parenthses sont ici ncessaires (setBGColor() et non pas setBGColor). Cela est quivalent :

   js

   document.form1.colorButton.onclick = function onclick(event) {
     setBGColor();
   };
   

   Il faut noter la faon dont l'objet vnement est pass la fonction en tant que paramtre event. Cela permet au code d'utiliser l'objet Event :

   html

   <input ...  />
   

Tout comme les autres proprits faisant rfrence une fonction, le gestionnaire d'vnement peut agir come une mthode et this ferait alors rfrence l'lment contenant le gestionnaire d'vnement. Dans l'exemple suivant, la fonction laquelle onfocus fait rfrence est appele avec this qui a la valeur window.

window.onfocus();

Une erreur faite souvent lorsque l'on commence utiliser JavaScript est d'ajouter des parenthses et/ou des paramtres la fin de la variable. Cela revient appeler le gestionnaire d'vnement lorsqu'on l'assigne. Le fait d'ajouter ces parenthses assignera la valeur de retour du gestionnaire d'vnement. Cette valeur sera souventundefineddans ces cas alors que l'on aurait souhait obtenir le gestionnaire d'vnement.

document.form1.button1.onclick = setBGColor();

Afin de passer des paramtres un gestionnaire d'vnements, le gestionnaire doit tre envelopp dans une autre fonction, comme dans l'exemple suivant :

document.form1.button1.onclick = function () {
  setBGColor("une valeur");
};

Les fonctions de bloc

En mode strict, partir d'ES2015 (ES6), la porte des fonctions dfinies dans un bloc est limite ce bloc. Avant ES2015, il tait interdit d'utiliser les fonctions de bloc en mode strict..

"use strict";

function f() {
  return 1;
}

{
  function f() {
    return 2;
  }
}

f() === 1; // true

// f() === 2 en mode non-strict

Les fonctions de bloc dans du code non-strict

Non.

Dans du code non-strict, les dclarations de fonctions places dans des blocs peuvent se comporter de faon trange :

if (onDevraitDfinirZro) {
  function zro() {
    // DANGER: risque de compatibilit
    console.log("Voici zro.");
  }
}

ES2015 indique que si onDevraitDfinirZro vaut false, zro ne devrait jamais tre dfini car le bloc n'est jamais excut. En revanche, c'est une nouveaut lie cette version du standard, non spcifie auparavant. Certains navigateurs dfinissent zro que le bloc soit excut ou non.

En mode strict, tous les navigateurs qui prennent en charge ES2015 gre cela de la mme faon : zro est uniquement dfini si onDevraitDfinirZro vaut true et uniquement dans la porte du bloc induit par if.

Une mthode plus sre est d'utiliser des expressions de fonction :

var zro;
if (0) {
  zro = function () {
    console.log("Voici zro.");
  };
}

Exemples

Renvoyer un nombre format

La fonction qui suit renvoie une chane de caractres contenant la reprsentation formate d'un nombre avec un certain nombre de zros prfixant le nombre.

// Cette fonction renvoie une chane de caractres complte par un prfixe compos de zros
function padZeros(num, totalLen) {
  var numStr = num.toString(); // On initialise la valeur  renvoyer en chane de caractres
  var numZeros = totalLen - numStr.length; // On calcule le nombre de zros
  for (var i = 1; i <= numZeros; i++) {
    numStr = "0" + numStr;
  }
  return numStr;
}

Les instructions qui suivent utilisent cette fonction

var resultat;
resultat = padZeros(42, 4); // renvoie "0042"
resultat = padZeros(42, 2); // renvoie "42"
resultat = padZeros(5, 4); // renvoie "0005"

Dterminer si une fonction existe

Il est possible de dterminer si oui ou non une fonction existe en utilisant l'oprateur typeof. Dans l'exemple qui suit, on teste pour savoir si l'objet window possde une proprit appel noFunc qui serait une fonction. Si c'est le cas, elle sera utilise, sinon on fera autre chose.

if ("function" === typeof window.noFunc) {
  // utilisation de noFunc()
} else {
  // faire autre chose
}

Il est noter que, dans le test if, on utilise une rfrence noFunc - il n'y a pas de parenthses aprs le nom de la fonction, la fonction n'est donc pas appele.

Spcifications

Compatibilit des navigateurs

Voir aussi

• L'instruction function
• L'expression function
• L'instruction function*
• L'expression function*
• Function
• GeneratorFunction
• Les fonctions flches
• Les paramtres par dfaut
• Les paramtres du reste
• L'objet arguments
• getter
• setter
• Les dfinitions de mthodes
• Fonctions et porte des fonctions