Apply your JS skills to key Mozilla projects as an MDN Fellow! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    Function.prototype.apply()

    Résumé

    La méthode apply() appelle une fonction en lui passant une valeur this et des arguments sous forme d'un tableau (ou d'un objet semblable à un tableau).

    Note : Bien que la syntaxe de cette fonction ressemble à celle de call(), elle est différente car call() accepte une liste d'arguments, tandis que apply() accepte un tableau d'arguments.

    Syntaxe

    fun.apply(thisArg, [argsArray])

    Paramètres

    thisArg
    La valeur de this fournie pour l'appel à la fonction fun. On notera que la valeur de this actuellement vue par la méthode : si la méthode est une fonction utilisée en mode mode non-strict, null and undefined seront remplacées par l'objet global, et les valeurs primitives seront encapsulées.
    argsArray
    Un objet semblable à un tableau qui définit les arguments avec lesquel fun devrait être appelée, ou null ou undefined si aucun argument n'est passé à la fonction. Avec ECMAScript 5, ces arguments peuvent être représentés par un objet semblable un tableau. Voir ci-après pour plus d'informations sur la compatibilité des navigateurs.

    Description

    Il est possible d'utiliser un objet this différent lors de l'appel à une fonction existante. this fait référence à l'objet courant, l'objet appelant. Avec apply, on peut écrire une méthode une seule fois et en hériter dans un autre objet, sans avoir à la réécrire dans le nouvel objet.

    apply est similaire à call(), hormis pour le type d'arguments supporté. Il est possible d'utiliser un tableau à la place d'un ensemble de paramètres nommés. Avec apply, il est possible d'utiliser un littéral de tableau, par exemple, fun.apply(this, ['manger', 'bananes']), ou un objet Array, par exemple, fun.apply(this, new Array('manger', 'bananes')).

    On peut aussi arguments pour le paramètre argsArray. arguments étant une variable locale à la fonction. Celle-ci peut également être utilisée pour tous les arguments non spécifiés de l'objet appelé. Ainsi, il n'est pas nécessaire de connaître les arguments de l'objet appelé lors d'un appel à la méthode apply. arguments peut être utilisé pour passer tous les arguments à l'objet appelé. L'objet appelé gèrera alors la manipulation des arguments.

    Depuis la cinquième édition d'ECMAScript, il est possible d'utiliser des objet semblables à des tableaux à la place. En pratique tout objet possédant une propriété  length et une propriété entière comprise entre [0...length) est un objet semblable à un tableau. On peut ainsi, par exemple, utiliser un objet NodeList ou un objet quelconque comme {'length': 2, '0': 'manger', '1': 'bananes'}.

    Note : Beaucoup de navigateurs, y compris Chrome 14 et Internet Explorer 9, n'acceptent pas encore un objet sembable à un tableau et léveront une exception.

    Exemples

    Utiliser apply pour chaîner des constructeurs

    Il est possible d'utiliser apply afin de chaîner les constructeurs d'un objet, de façon sembable au chaînage utilisé en java. Dans l'exemple suivant, on crée une Function globale appelée construct, qui permet d'utiliser un objet de type Array associé à un constructeur au lieu d'une liste d'arguments.

    Function.prototype.construct = function (aArgs) {
      var nouvelObjet = Object.create(this.prototype);
      this.apply(nouvelObjet, aArgs);
      return nouvelObjet;
    };
    

    Note : La méthode Object.create() utilisée ci-avant est relativement nouvelle. Pour une autre méthode qui utilise les fermetures, on pourra utiliser :

    Function.prototype.construct = function(aArgs) {
      var fConstructeur = this, fNouveauConstructeur = function() { fConstructeur.apply(this, aArgs); };
      fNouveauConstructeur.prototype = fConstructeur.prototype;
      return new fNouveauConstructeur();
    };

    Exemple d'utilisation :

    function MonConstructeur () {
        for (var nProp = 0; nProp < arguments.length; nProp++) {
            this["propriété" + nProp] = arguments[nProp];
        }
    }
    
    var monTableau = [4, "Coucou monde !", false];
    var monInstance = MonConstructeur.constructeur(myArray);
    
    console.log(monInstance.propriété1); // "Coucou monde !"
    console.log(monInstance instanceof MonConstructeur); // "true"
    console.log(monInstance.constructor); // "MonConstructeur"
    
    Note : Attention, cette méthode non-native Function.construct ne fonctionnera pas avec certains contructeurs natifs (tels que Date). Dans ce cas précis, on peut utiliser la méthode Function.bind (pour exemple, si on prend le tableau suivant [2012, 11, 4] utilisé sur le constructeur de l'objet Date : on peut écrire ceci : new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))() – cependant cela reste une pratique à éviter si possible et à ne pas utiliser en dans un environnement de production).

    Utiliser apply et des fonctions natives

    Un usage singulier de apply permet d'appeler des fonctions natives pour réaliser par exemple des tâches qui autrement auraient nécessité une boucle sur toutes les valeurs d'un tableau. Pour illustrer ce concept, on prend l'exemple de Math.max/Math.min qui permettent d'extraire la valeur maximum/minimale de notre tableau.

    /* min/max tableau de nombres */
    var nombres = [5, 6, 2, 3, 7];
    
    /* usage de Math.min/Math.max et de la méthode apply */
    var max = Math.max.apply(null, nombres); /* Equivalent à Math.max(nombres[0], ...) 
                                                ou Math.max(5, 6, ..) */
    var min = Math.min.apply(null, nombres);
    
    /* vs. algorithme trivial avec une boucle */
    max = -Infinity, min = +Infinity;
    
    for (var i = 0; i < nombres.length; i++) {
      if (nombres[i] > max)
        max = nombres[i];
      if (nombres[i] < min) 
        min = nombres[i];
    }

    Note : l'utilisation de apply peut provoquer l'atteinte du seuil limite du nombres d'arguments supporté par le moteur Javascript. Les conséquences de cette utilisation abusive (on évoque plus de 10000 arguments) peuvent varier selon les moteurs Javascript (JavaScript contient une limite en dur de 65536), car une liberté subsiste quant à l'implémentation du moteur. Des moteurs lèveront une exception si le seuil est atteint. Il est donc préférable d'apporter une attention toute particulière au nombre d'arguments passés. (Illustrerons ce cas dans l'exemple suivant avec un moteur factice capable de ne gérer que 4 arguments au maximum (les limites natives sont, bien sûr, plus élevées), et reprenons les arguments de l'exemple précédent 5, 6, 2, 3 passés à la méthode apply plutôt que notre tableau entier.) Imaginons que notre tableau soit progressivement peuplé de milliers d'éléments, une stratégie spécifique devra être appliquée, par exemple en appliquant la méthode apply sur des portions du tableau:

    function minimumDuTableau(tab) {
      var min = Infinity;
      var QUANTUM = 32768;
    
      for (var i = 0, longueur = tab.length; i < len; i += QUANTUM) {
        var submin = Math.min.apply(null, tab.slice(i, Math.min(i + QUANTUM, longueur)));
        min = Math.min(submin, min);
      }
    
      return min;
    }
    
    var min = minimumDuTableau([5, 6, 2, 3, 7]);
    

    Utiliser apply pour du monkey-patching

    apply permet d'appliquer aisément un patch sur une fonction native de Firefox ou sur toute autre bibliothèque JS. Par exemple, avec une méthode monObjet.toto, il est possible de modifier son comportement grâce à un hack de cette manière :

    var totoOriginal = monObjet.toto;
    monObjet.toto = function() {
      // Instructions avant appel à la méthode originale, exemple ici avec un simple console.log()
      console.log(arguments);
      // Appel à notre méthode originale
      totoOriginal.apply(this,arguments);
      // Instructions possibles par la suite
    }
    

    Cette méthode est particulièrement utile pour déboguer des événements ou des interfaces sans API comme les méthodes .on([event].. telles que celles exposées dans l'Inspecteur des outils de développement.

    Spécifications

    Spécification Statut Commentaires
    Troisième édition d'ECMAScript. Standard Définition initiale. Implémentée avec JavaScript 1.3.
    ECMAScript 5.1 (ECMA-262)
    La définition de 'Function.prototype.apply' dans cette spécification.
    Standard  
    ECMAScript 6 (ECMA-262)
    La définition de 'Function.prototype.apply' dans cette spécification.
    Draft  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui)
    ES 5.1 : Utilisation des objets semblables aux tableaux comme arguments ? 4.0 (2.0) ? ? ?
    Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
    ES 5.1 : Utilisation des objets semblables aux tableaux comme arguments ? ? 4.0 (2.0) ? ? ?

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: SphinxKnight, jmpp, dirakkk, peb85, adriens, teoli, darul75
    Dernière mise à jour par : SphinxKnight,