diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/javascript/reference/global_objects/function | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/web/javascript/reference/global_objects/function')
11 files changed, 1501 insertions, 0 deletions
diff --git a/files/fr/web/javascript/reference/global_objects/function/apply/index.html b/files/fr/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..6c1f23d146 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,211 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Objets_globaux/Function/apply +tags: + - Function + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>apply()</strong></code> appelle une fonction en lui passant une valeur <code>this</code> et des <code>arguments</code> sous forme d'un tableau (ou d'un objet <a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Manipuler_des_objets_semblables_aux_tableaux">semblable à un tableau</a>).</p> + +<div class="note"><strong>Note :</strong> Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.call", "call()")}}, elle est différente car <code>call()</code> accepte <strong>une liste d'arguments</strong>, tandis que <code>apply()</code> accepte un <strong>tableau d'arguments</strong>.</div> + +<div class="note"><strong>Note :</strong> Quand on utilise {{jsxref("undefined")}} ou {{jsxref("null")}} comme premier argument pour cette fonction, on peut obtenir un résultat similaire avec la <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">syntaxe de décomposition</a>.</div> + +<div>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>La valeur de <code>this</code> fournie pour l'appel à la fonction <em><code>fun</code></em>. On notera que, sous certaines conditions, <code>this</code> peut ne pas être la valeur exacte vue par la méthode : si la méthode est une fonction utilisée en mode {{jsxref("Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} et {{jsxref("undefined")}} seront remplacées par l'objet global, et les valeurs primitives seront encapsulées. Cet argument n'est pas optionnel.</dd> + <dt><code>argsArray</code></dt> + <dd>Un objet semblable à un tableau qui définit les arguments avec lesquel <em><code>fun</code></em> devrait être appelée, ou {{jsxref("null")}} ou {{jsxref("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 <a href="#compat">la compatibilité des navigateurs</a>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le résultat obtenu en appelant la fonction avec la valeur <code>this</code> indiquée et les arguments fournis.</p> + +<h2 id="Description">Description</h2> + +<p>Il est possible d'utiliser un objet <code>this</code> différent lors de l'appel à une fonction existante. <code>this</code> fait référence à l'objet courant, l'objet appelant. Avec <code>apply</code>, 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.</p> + +<p><code>apply</code> est similaire à {{jsxref("Function.call", "call()")}}, hormis pour le type d'arguments supporté. Il est possible d'utiliser un tableau à la place d'un ensemble de paramètres. Avec <code>apply</code>, il est également possible d'utiliser un littéral de tableau, par exemple, <code><em>fun</em>.apply(this, ['manger', 'bananes'])</code>, ou un objet {{jsxref("Array")}}, par exemple, <code><em>fun</em>.apply(this, new Array('manger', 'bananes'))</code>.</p> + +<p>On peut aussi passer {{jsxref("Fonctions/arguments", "arguments ")}} en tant que paramètre <code>argsArray</code>. <code>arguments</code> é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 <code>apply</code>. <code>arguments</code> peut être utilisé pour passer tous les arguments à l'objet appelé. L'objet appelé gèrera alors la manipulation des arguments.</p> + +<p>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é <code>length</code> et une propriété entière comprise entre <code>[0..length[</code> est un objet semblable à un tableau. On peut ainsi, par exemple, utiliser un objet {{domxref("NodeList")}} ou un objet quelconque comme <code>{'length': 2, '0': 'manger', '1': 'bananes'}</code>.</p> + +<div class="note"> +<p><strong>Note : </strong>Beaucoup de navigateurs, y compris Chrome 14 et Internet Explorer 9 n'acceptent pas encore un objet semblable à un tableau, ils déclencheront un exception.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_apply_pour_chaîner_des_constructeurs">Utiliser <code>apply</code> pour chaîner des constructeurs</h3> + +<p>Il est possible d'utiliser <code>apply</code> afin de chaîner les {{jsxref("Opérateurs/L_opérateur_new", "constructeurs","",1)}} d'un objet, de façon sembable au chaînage utilisé en java. Dans l'exemple suivant, on crée une {{jsxref("Function")}} globale appelée <code>construct</code>, qui permet d'utiliser un objet de type <code>Array</code> associé à un constructeur au lieu d'une liste d'arguments.</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var nouvelObjet = Object.create(this.prototype); + this.apply(nouvelObjet, aArgs); + return nouvelObjet; +}; +</pre> + +<div class="note"> +<p><strong>Note :</strong> La méthode {{jsxref("Object.create()")}} utilisée ci-avant est relativement nouvelle. Pour une autre méthode qui utilise les <code>closure</code>, on pourra utiliser :</p> + +<pre class="brush: js">Function.prototype.construct = function(aArgs) { + var fConstructeur = this, fNouveauConstructeur = function() { + fConstructeur.apply(this, aArgs); + }; + fNouveauConstructeur.prototype = fConstructeur.prototype; + return new fNouveauConstructeur(); +};</pre> +</div> + +<p>Exemple d'utilisation :</p> + +<pre class="brush: js">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.constructor(monTableau); + +console.log(monInstance.propriété1); // "Coucou monde !" +console.log(monInstance instanceof MonConstructeur); // "true" +console.log(monInstance.constructor); // "MonConstructeur" +</pre> + +<div class="note"> +<p><strong>Note :</strong> On pourrait également utiliser {{jsxref("Object/__proto__", "Object.__proto__")}}</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var oNew = {}; + oNew.__proto__ = this.prototype; + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<p>ou encore le constructeur {{jsxref("Function")}} :</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var fNewConstr = new Function(""); + fNewConstr.prototype = this.prototype; + var oNew = new fNewConstr(); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> +</div> + +<div class="note"><strong>Note :</strong> Attention, cette méthode non-native <code>Function.construct</code> ne fonctionnera pas avec certains contructeurs natifs (tels que {{jsxref("Date", "Date")}}). Dans ce cas précis, on peut utiliser la méthode {{jsxref("Function.bind")}} (pour exemple, si on prend le tableau suivant <code>[2012, 11, 4]</code> utilisé sur le constructeur de l'objet <code>Date</code> : on peut écrire ceci : <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> – cependant cela reste une pratique à éviter si possible et à ne pas utiliser en dans un environnement de production).</div> + +<h3 id="Utiliser_apply_et_des_fonctions_natives">Utiliser <code>apply</code> et des fonctions natives</h3> + +<p>Un usage singulier de <code>apply</code> 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 <code>Math.max</code>/<code>Math.min</code> qui permettent d'extraire la valeur maximum/minimale de notre tableau.</p> + +<pre class="brush: js">/* 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]; +}</pre> + +<p>Note : l'utilisation de <code>apply</code> 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 <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">65536</a>), 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 <code>5, 6, 2, 3</code> passés à la méthode <code>apply</code> 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:</p> + +<pre class="brush: js">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]); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.apply")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">La syntaxe de décomposition permettant d'exploser un tableau</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/arguments/index.html b/files/fr/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..13bfc16dd3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,91 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Objets_globaux/Function/arguments +tags: + - Déprécié + - Function + - JavaScript + - Propriété + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef}} {{Deprecated_header}}</div> + +<p>La propriété <code><strong><em>function</em>.arguments</strong></code> fait référence à un objet dont la structure est semblable à celle d'un tableau dont les éléments correspondent aux arguments passés à une fonction. En lieu et place, il faut désormais utiliser {{jsxref("Fonctions/arguments", "arguments")}}. Cette propriété est interdite en mode stricte à cause de <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">l'optimisation de la queue des appels (<em>tail call optimization</em>)</a>.</p> + +<h2 id="Description">Description</h2> + +<p>La syntaxe <code><em>function</em>.arguments</code> est obsolète. La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}.</p> + +<p>Si on utilise la récursivité (autrement dit si une fonction <code>f</code> apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction <code>f</code> s'appelle elle-même), la valeur de <code>f.arguments</code> représentera les arguments correspondant à l'appel le plus « récent » de la fonction.</p> + +<p>La valeur de la propriété <code>arguments</code> est normalement <code>null</code> si la fonction n'est pas « en cours » (au sens où elle aurait été appelée et qu'elle n'ait pas fini son exécution).</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush:js">function f(n) { g(n-1); } + +function g(n) { + console.log("avant : " + g.arguments[0]); + if(n>0) f(n); + console.log("après : " + g.arguments[0]); +} + +f(2); + +console.log("fonction terminée : " + g.arguments); + +// On aura l'affichage de : + +// avant : 1 +// avant : 0 +// après : 0 +// après : 1 +// fonction terminée : null +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0. Dépréciée pour être remplacée par {{jsxref("Fonctions/arguments", "arguments")}} décrit par ES3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.arguments")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li> + <li>{{jsxref("Fonctions", "Les fonctions et les portées de fonctions", "", 1)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/bind/index.html b/files/fr/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..dd214fe306 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,250 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Objets_globaux/Function/bind +tags: + - ECMAScript 2015 + - ECMAScript 5 + - Function + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>bind()</strong></code> crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contexte <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code> la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">let boundFunc = <var>fun</var>c.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>La valeur que l'on doit passer est le paramètre <code>this</code> de la fonction cible <em><code>func</code></em> quand la fonction est appelée. La valeur est ignorée si la fonction liée est construite en utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Lorsque vous utilisez <code>bind</code> pour créer une fonction (fournie comme un rappel) dans un <code>setTimeout</code>, toute valeur primitive passée comme <code>thisArg</code> est convertie en objet. Si aucun argument n'est fourni dans <code>bind</code>, le <code>this</code> de cette fonction est traité comme le <code>thisArg</code> de la nouvelle fonction.</dd> + <dt><code>arg1, arg2, ...</code> {{optional_inline}}</dt> + <dd>Arguments à faire précéder aux arguments fournis à la fonction liée lors de l'invocation de <em><code>func</code></em>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une copie de la fonction fournie avec la valeur <code>this</code> indiquée et les arguments initiaux fournis.</p> + +<h2 id="Description">Description</h2> + +<p>La fonction <code>bind()</code> crée une nouvelle <strong>fonction liée</strong>, qui est un <em>objet de fonction exotique</em> (un terme de l'ECMAScript 2015) qui enveloppe l'objet de fonction original. L'appel de la fonction liée entraîne généralement l'exécution de sa fonction enveloppée.</p> + +<p>Une fonction liée possède les propriétés internes suivantes :</p> + +<dl> + <dt><strong><code>[[BoundTargetFunction]]</code> </strong></dt> + <dd>L'objet de fonction enveloppé</dd> + <dt><code><strong>[[BoundThis]]</strong></code></dt> + <dd>La valeur qui est toujours transmise est la valeur <code>this</code> lors de l'appel de la fonction enveloppée.</dd> + <dt><code><strong>[[BoundArguments]]</strong></code></dt> + <dd>Une liste de valeurs dont les éléments sont utilisés comme premiers arguments pour tout appel à la fonction enveloppée.</dd> + <dt><code><strong>[[Call]]</strong></code></dt> + <dd>Exécute le code associé à cet objet. Invoqué par une expression d'appel de fonction. Les arguments de la méthode interne sont constitués d'une valeur <code>this</code> et d'une liste contenant les arguments passés à la fonction par une expression d'appel.</dd> +</dl> + +<p>Lorsqu'une fonction liée est appelée, elle appelle la méthode interne <code>[[Call]]</code> dans <code>[[BoundTargetFunction]]</code>, avec les arguments suivants <code>Call(<var>boundThis</var>, ...<var>args</var>)</code>. <var>Là où </var><code><var>boundThis</var></code> est <code>[[BoundThis]]</code>, <code><var>args</var></code> est <code>[[BoundArguments]]</code>, suivi des arguments passés par l'appel de fonction.</p> + +<p>Une fonction liée peut également être construite à l'aide de l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Ce faisant, on agit comme si la fonction cible avait été construite. La valeur fournie <code>this</code> est ignorée, tandis que des arguments préparés sont fournis à la fonction émulée.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Créer_une_fonction_liée">Créer une fonction liée</h3> + +<p>La façon la plus simple d'utiliser <code>bind()</code>est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur <code>this</code> donnée.</p> + +<p>Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de <code>this</code> (par exemple en utilisant cette méthode dans un <em>callback</em>). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème :</p> + +<pre class="brush: js">this.x = 9; // en dehors de tout contexte, + // pour un navigateur, this est + // l'objet window +var module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); // 81 + +var getX = module.getX; +getX(); // 9, car ici, this fait référence à l'objet global + +// On crée une nouvelle fonction à laquelle on lie module en +// tant que 'this' +var boundGetX = getX.bind(module); +boundGetX(); // 81 +</pre> + +<h3 id="Fonctions_partiellement_appliquées">Fonctions partiellement appliquées</h3> + +<p>Dans l'exemple suivant, on utilise <code>bind()</code> afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le <code>this</code> fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] + +// Créer une fonction avec un argument prédéfini +var leadingThirtysevenList = list.bind(null, 37); + +var list2 = leadingThirtysevenList(); // [37] +var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] + + +function sommeArguments(arg1, arg2){ + return arg1 + arg2; +} + +var ajouter37 = sommeArguments.bind(null, 37); + +var resultat = ajouter37(5); // 37 + 5 = 42 +</pre> + +<h3 id="Utiliser_bind_avec_setTimeout">Utiliser <code>bind</code> avec <code>setTimeout</code></h3> + +<p>Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé <code>this</code> sera attribué à l'objet {{domxref("window")}} (ou l'objet <code>global</code>). Lorsqu'on travaille avec des méthodes de classe utilisant <code>this</code> qui se réfère à l'instance, on peut lier <code>this</code> de façon explicite afin d'être certain de manipuler l'instance.</p> + +<pre class="brush: js">function Fleur() { + this.nbPétales = Math.floor( Math.random() * 12 ) + 1; +} + +// On déclare floraison après un délai d'une seconde +Fleur.prototype.floraison = function() { + window.setTimeout( this.declare.bind( this ), 1000 ); +}; + +Fleur.prototype.declare = function() { + console.log('Je suis une fleur avec ' + + this.nbPétales + ' pétales !'); +}; + +var fleur = new Fleur(); +fleur.floraison(); +// Après environ 1 seconde, on déclenche la méthode declare +</pre> + +<h3 id="Les_fonctions_liées_utilisées_en_tant_que_constructeurs">Les fonctions liées utilisées en tant que constructeurs</h3> + +<div class="warning"> +<p><strong>Attention :</strong> Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production.</p> +</div> + +<p>Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le <code>this</code> fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur :</p> + +<pre class="brush: js">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return this.x + "," + this.y; +}; + +var p = new Point(1, 2); +p.toString(); // "1,2" + + +var emptyObj = {}; +var YAxisPoint = Point.bind(emptyObj, 0 /* x */); +// non supporté dans le polyfill ci dessous, +// fonctionne avec le bind natif : +var YAxisPoint = Point.bind(null,0 /* x */); + +var axisPoint = new YAxisPoint(5); +axisPoint.toString(); // "0,5" + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new Point(17, 42) instanceof YAxisPoint; // false +</pre> + +<p>On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p> + +<pre class="brush: js">// Cet exemple fonctionne dans votre console JavaScript +// ...(sous réserve d'avoir utilisé le code précédent) + +// Peut toujours être appelé comme une fonction normale +// (même si ce n'est généralement pas l'effet ) +YAxisPoint(13); + +emptyObj.x + "," + emptyObj.y; // "0,13" +</pre> + +<p>Si on souhaite supporter le cas où la fonction liée d'une fonction liée en utilisant seulement <code>new</code>, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction.</p> + +<h3 id="Créer_des_raccourcis">Créer des raccourcis</h3> + +<div> +<p><code>bind()</code> est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un <code>this</code> ayant une certaine valeur.</p> + +<p>Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet <code>array</code>, on peut créer un raccourci de cette façon :</p> + +<pre class="brush: js">var slice = Array.prototype.slice; + +// ... un peu plus loin + +slice.apply(arguments);</pre> + +<p>Avec <code>bind()</code>, il est possible de simplifier cela. Dans l'exemple qui suit <code>slice</code> est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de <code>Function.prototype</code>, et <code>this</code> défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode <code>apply()</code> peuvent être éliminés :</p> + +<pre class="brush: js">// pareil que "slice" dans l'exemple précédent +var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.apply.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale.<br> + Implémentée avec JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function.prototype.apply', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.bind")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Fonctions", "Fonctions et portées de fonctions", "", 1)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/call/index.html b/files/fr/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..b419b7eca6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,177 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Objets_globaux/Function/call +tags: + - Function + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>call()</strong></code> réalise un appel à une fonction avec une valeur <code>this</code> donnée et des arguments fournis individuellement.</p> + +<div class="note"><strong>Note : </strong>Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.apply", "apply()")}}, la différence fondamentale réside dans le fait que <code>call()</code> accepte <strong>une liste d'arguments</strong>, tandis que la méthode <code>apply()</code> accepte <strong>un unique tableau d'arguments</strong>.</div> + +<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>fun</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>La valeur <code>this</code> fournie pour l'appel de la fonction <em><code>fun</code></em>. La valeur peut être différente de celle normalement perçue par la méthode : si la méthode est une fonction utilisée dans un code en {{jsxref("Fonctions/Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} and {{jsxref("undefined")}} seront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Les arguments pour la fonction.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le résultat de l'appel de la fonction invoquée avec la valeur <code>this</code> indiquée et les arguments fournis.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>call()</code> permet d'appeler une fonction rattachée à un objet donné sur un autre objet.</p> + +<p>Il est possible d'affecter un objet <code>this</code> différent lors de l'appel à une fonction existante. En général, <code>this</code> fait référence à l'objet courant, celui sur lequel est appelée la méthode. Avec <code>call</code>, on peut écrire une méthode une seule fois et ensuite en hériter dans un autre objet, sans avoir à réécrire cette méthode pour ce nouvel objet.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_call()_pour_chaîner_le_constructeur_d'un_objet.">Utiliser <code>call()</code> pour chaîner le constructeur d'un objet.</h3> + +<p>Il est possible d'utiliser <code>call</code> pour chaîner le constructeur d'un objet, de façon similaire à Java. Dans l'exemple suivant, le constructeur de l'objet <code>Product</code> est défini avec deux paramètres, <code>name</code> et <code>price</code>. Deux autres fonctions, <code>Food</code> et <code>Toy</code> invoquent <code>Product</code> en passant <code>this,</code> <code>name</code> et <code>price</code>. <code>Product</code> initialise les propriétés <code>name</code> et <code>price</code>, tandis que les fonctions spécialisées définissent la propriété <code>category</code>.</p> + +<pre class="brush: js">function Product(name, price) { + this.name = name; + this.price = price; +} + +function Food(name, price) { + Product.call(this, name, price); + this.category = 'food'; +} + +function Toy(name, price) { + Product.call(this, name, price); + this.category = 'toy'; +} + +var cheese = new Food('feta', 5); +var fun = new Toy('robot', 40); +</pre> + +<h3 id="Utiliser_call()_pour_invoquer_une_fonction_anonyme">Utiliser <code>call()</code> pour invoquer une fonction anonyme</h3> + +<p>Dans cet exemple (purement inventé), on crée une fonction anonyme et on utilise <code>call</code> pour l'invoquer sur chaque objet d'un tableau. Le principal but de cette fonction anonyme est d'ajouter une fonction <code>print</code> sur chaque élément qui permet d'afficher l'index de l'objet. Le passage de l'objet en tant que valeur <code>this</code> n'était pas nécessaire, mais il permet d'expliquer le sujet.</p> + +<pre class="brush: js">var animaux = [ + {espece: 'Lion', nom: 'Roi'}, + {espece: 'Éléphant', nom: 'Dumbo'} +]; + +for (var i = 0; i < animaux.length; i++) { + (function (i) { + this.print = function () { + console.log('#' + i + ' ' + this.espece + ' : ' + this.nom); + } + this.print(); + }).call(animaux[i], i); +} +</pre> + +<h3 id="Utiliser_call()_pour_appeler_une_fonction_avec_un_objet_pour_this">Utiliser <code>call()</code> pour appeler une fonction avec un objet pour <code>this</code></h3> + +<p>Dans l'exemple qui suit, on utilise la méthode <code>call()</code> sur la fonction <code>saluer()</code> afin de l'appliquer à l'objet <code>personne1</code> :</p> + +<pre class="brush: js">function saluer() { + var reponse = [this.nom, "est un", this.role, "."].join(" "); + console.log(reponse); +} + +var personne1 = { + nom: "Sénèque", + role: "philosophe" +}; + +saluer.call(personne1); // Sénèque est un philosophe. +</pre> + +<h3 id="Utiliser_call()_pour_appeler_une_fonction_sans_indiquer_de_premier_argument">Utiliser <code>call()</code> pour appeler une fonction sans indiquer de premier argument</h3> + +<p>Dans l'exemple qui suit, on appelle la fonction <code>afficher()</code> sans lui passer d'argument. C'est donc l'objet global qui est utilisé comme contexte :</p> + +<pre class="brush: js">var prenom = 'Archibald'; + +function afficher() { + console.log('prenom vaut ' + this.prenom); +} + +afficher.call(); // prenom est Archibald</pre> + +<div class="note"> +<p><strong>Note :</strong> La valeur de <code>this</code> sera {{jsxref("undefined")}} en mode strict.</p> + +<pre class="brush: js">'use strict'; + +var prenom = 'Archibald'; + +function afficher() { + console.log('prenom vaut ' + this.prenom); +} + +afficher.call(); // Cannot read the property prenom' of undefined</pre> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.call")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/caller/index.html b/files/fr/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..9956ad14ee --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,83 @@ +--- +title: Function.caller +slug: Web/JavaScript/Reference/Objets_globaux/Function/caller +tags: + - Function + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>La propriété <code><strong><em>function</em>.caller</strong></code> renvoie la fonction qui a appelé la fonction donnée. Cette propriété est interdite en mode strict.</p> + +<h2 id="Description">Description</h2> + +<p>Si la fonction <code>f</code> a été invoquée par du code situé au plus haut niveau, la valeur de <code>f.caller</code> sera {{jsxref("null")}}, sinon, ce sera la fonction qui a appelé <code>f</code>.</p> + +<p>Cette propriété remplace la propriété obsolète {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} de l'objet {{jsxref("Fonctions/arguments", "arguments")}}.</p> + +<p>La propriété spéciale <code>__caller__</code> qui renvoyait l'objet qui dans lequel était fait l'appel a été supprimée pour des raisons de sécurités.</p> + +<h3 id="Notes">Notes</h3> + +<p>Dans une fonction récursive, cette propriété ne peut pas être utilisée pour reconstituer la pile d'appels (<em>call stack</em>). Par exemple, si on a :</p> + +<pre class="brush: js">function f(n) { g(n - 1); } +function g(n) { if (n > 0) { f(n); } else { stop(); } } +f(2); +</pre> + +<p>Au moment où <code>stop()</code> est appelé, la pile sera :</p> + +<pre class="eval">f(2) -> g(1) -> f(1) -> g(0) -> stop() +</pre> + +<p>Et ceci est vrai :</p> + +<pre class="eval">stop.caller === g && f.caller === g && g.caller === f +</pre> + +<p>Donc si on essaie d'obtenir la pile de cette façon :</p> + +<pre class="brush: js">var f = stop; +var stack = 'Stack trace:'; +while (f) { + stack += '\n' + f.name; + f = f.caller; +} +</pre> + +<p>la boucle ne s'arrêterait jamais.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Vérifier_la_valeur_de_la_propriété_caller">Vérifier la valeur de la propriété <code>caller</code></h3> + +<p>Dans l'exemple suivant, on verifie la propriété <code>caller</code> de la fonction.</p> + +<pre class="brush: js">function maFonction() { + if (maFonction.caller == null) { + return 'Fonction appelée au plus haut niveau !'; + } else { + return 'Fonction appelée par ' + maFonction.caller; + } +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.5.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.caller")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Le bug d'implémentation pour SpiderMonkey {{bug(65683)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/displayname/index.html b/files/fr/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..dc9f7fc870 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,81 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Objets_globaux/Function/displayName +tags: + - Function + - JavaScript + - Non-standard + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{Non-standard_header}}</div> + +<p>La propriété <code><strong><em>function</em>.displayName</strong></code> renvoie le nom affiché de la fonction.</p> + +<h2 id="Description">Description</h2> + +<p>Lorsque la propriété <code>displayName</code> est définie, elle renvoie le nom affiché de la fonction :</p> + +<pre class="brush:js">function faireTruc() { } + +console.log(faireTruc.displayName); // "undefined" + +var logMessage = function(contenu) { console.log(contenu) }; + +logMessage.displayName = 'Afficher les messages dans le journal'; + +console.log(logMessage.displayName); // "Afficher les messages dans le journal" +</pre> + +<p>Il est possible de définir une fonction avec un nom d'affichage grâce à une {{jsxref("Fonctions", "expression de fonctions","",1)}}:</p> + +<pre class="brush:js">var objet = { + uneMéthode: function () {} +}; + +objet.uneMéthode.displayName = 'uneMéthode'; + +console.log(objet.uneMéthode.displayName); +// "uneMéthode" + +try { uneMéthode } catch(e) { console.log(e); } +// ReferenceError: uneMéthode is not defined +</pre> + +<p>La propriété <code>displayName</code> peut être changée dynamiquement :</p> + +<pre class="brush:js">var objet = { + // anonyme + uneMéthode: function(valeur) { + this.displayName = "uneMéthode (" + valeur + ")"; + } +}; + +console.log(objet.uneMéthode.displayName); // "undefined" + +objet.uneMéthode("123") +console.log(objet.uneMéthode.displayName); // "uneMéthode (123)" +</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>On souhaite généralement utiliser cette propriété dans les consoles et profileurs plutôt que {{jsxref("Function.name", "func.name")}}</p> + +<p>Le code suivant devrait afficher quelque chose comme "function Ma Fonction()":</p> + +<pre class="brush:js">var a = function () { }; +a.displayName = 'Ma Fonction'; + +a; +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>N'appartient à aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.displayName")}}</p> diff --git a/files/fr/web/javascript/reference/global_objects/function/index.html b/files/fr/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..01c2a34869 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,153 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Objets_globaux/Function +tags: + - Constructor + - Function + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Le constructeur <code><strong>Function</strong></code> crée un nouvel <em>objet</em> <code>Function</code>. En JavaScript, chaque fonction est un objet <code>Function</code>.</p> + +<p>Appeler ce constructeur permet de créer des fonctions dynamiquement mais cette méthode souffre de défauts équivalents à {{jsxref("eval")}} en termes de sécurité et de performance. Toutefois, à la différence d'<code>eval</code>, le constructeur <code>Function</code> permet d'exécuter du code dans la portée globale.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] corpsFonction)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Les noms utilisés par la fonction pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide (ou une liste de telles chaînes séparées par des virgules). Par exemple : "<code>x</code>", "<code>uneValeur</code>", ou "<code>a,b</code>".</dd> + <dt><code>corpsFonction</code></dt> + <dd>Une chaîne de caractères qui contient les instructions JavaScript définissant la fonction.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Les objets <code>Function</code> créés avec le constructeur <code>Function</code> sont analysés quand la fonction est créée. Ceci est moins efficace que de déclarer une fonction grâce à une {{jsxref("Opérateurs/L_opérateur_function","expression de fonction","",1)}} ou à une instruction {{jsxref("Instructions/function","function")}} car celles crées de cette façon sont analysées avec le reste du code.</p> + +<p>Tous les arguments passés à la fonction seront traités avec les noms des identifiants des paramètres de la fonction à créer, dans le même ordre dans lequel ils ont été passés. Si un argument n'est pas passé, la valeur du paramètre dans la fonction sera {{jsxref("undefined")}}.</p> + +<p>Appeler le constructeur <code>Function</code> comme une fonction (c'est-à-dire sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}}) a le même effet que quand il est appelé comme constructeur.</p> + +<h2 id="Propriétés_et_méthodes_de_Function">Propriétés et méthodes de <code>Function</code></h2> + +<p>L'objet global <code>Function</code> ne possède pas de méthodes ou de propriétés propres. Cependant, il est lui-même une fonction et hérite de certaines méthodes et propriétés depuis {{jsxref("Function.prototype")}} grâce à la chaîne de prototype.</p> + +<h2 id="Le_prototype_de_Function">Le prototype de <code>Function</code></h2> + +<h3 id="Propriétés">Propriétés</h3> + +<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'Propri.C3.A9t.C3.A9s')}}</div> + +<h3 id="Méthodes">Méthodes</h3> + +<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'M.C3.A9thodes')}}</div> + +<h2 id="Les_instances_de_Function">Les instances de <code>Function</code></h2> + +<p>Les instances de <code>Function</code> héritent des méthodes et propriétés de {{jsxref("Function.prototype")}}. Comme pour les autres constructeurs, il est possible de modifier le prototype du constructeur afin d'apporter des modifications à toutes les instances de <code>Function</code>.</p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="Définir_des_arguments_avec_le_constructeur_Function">Définir des arguments avec le constructeur <code>Function</code></h3> + +<p>Le code suivant permet de créer un objet <code>Function</code> qui utilise deux arguments :</p> + +<pre class="brush: js">// Cet exemple peut être lancé dans votre console JavaScript + +// On crée un fonction qui prend deux arguments +// et qui en renvoie la somme +var ajoute = new Function('a', 'b', 'return a + b'); + +// On appelle la fonction +ajoute(2, 6); +// > 8 +</pre> + +<p>Les arguments "<code>a</code>" et "<code>b</code>" sont les noms des arguments formellement déclarés utilisés dans le corps de la fonction : "<code>return a + b</code>".</p> + +<h3 id="Différence_entre_le_constructeur_Function_et_les_déclarations_de_fonction">Différence entre le constructeur <code>Function</code> et les déclarations de fonction</h3> + +<p>Les fonctions créées avec le constructeur {{jsxref("Function()")}} ne créent pas de fermetures liées au contexte de leur création. Ainsi, lorsqu'elles sont exécutées, elles ne peuvent accéder qu'aux variables globales et à leurs propres valeurs locales. Elles ne peuvent pas accéder aux variables de la portée dans laquelle le constructeur <code>Function</code> a été invoqué. Le comportement est différent de celui qu'on obtient avec {{jsxref("eval")}} avec du code contenant une expression de fonction.</p> + +<pre class="brush: js">var x = 10; + +function créerFonction1() { + var x = 20; + return new Function("return x;"); // ici |x| fait référence au |x| global +} + +function créerFonction2() { + var x = 20; + function f() { + return x; // ici |x| fait référence au |x| local juste avant + } + return f; +} + +var f1 = créerFonction1(); +console.log(f1()); // 10 +var f2 = créerFonction2(); +console.log(f2()); // 20</pre> + +<p>Bien que ce code fonctionne dans un navigateur web, l'appel à <code>f1()</code> provoquera une {{jsxref("ReferenceError")}} dans Node.js car <code>x</code> ne sera pas trouvé. En effet, pour Node, la portée de plus haut niveau n'est pas la portée globale et <code>x</code> est ici local à la fonction.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li> + <li>L'instruction {{jsxref("Instructions/function", "function")}}</li> + <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li> + <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li> + <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/length/index.html b/files/fr/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..023b40a5f8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,89 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Objets_globaux/Function/length +tags: + - Function + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>length</strong></code> définit le nombre de paramètres attendus par la fonction.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description">Description</h2> + +<p><code>length</code> est une propriété des fonctions qui indique le nombre d'arguments attendus par la fonction (ce qui correspond au nombre d'arguments formellement déclarés). Cette quantité n'inclue pas les {{jsxref("Fonctions/paramètres_du_reste", "paramètres du reste", "", 1)}} et ne compte que les paramètres situés avant le premier paramètre avec une valeur par défaut. Cette propriété est différente de {{jsxref("Fonctions/arguments/length", "arguments.length")}} qui est locale à la fonction et qui décrit le nombre d'arguments réellement passés à la fonction.</p> + +<h3 id="Propriété_du_constructeur_Function">Propriété du constructeur <code>Function</code></h3> + +<p>Le constructeur {{jsxref("Function")}} est lui-même un objet {{jsxref("Function")}}. Sa propriété<code> length</code> vaut 1. Les attributs de cette propriété sont : Écrivable : <code>false</code>, Énumérable : <code>false</code>, Configurable : <code>true</code>.</p> + +<h3 id="Propriété_du_prototype_de_Function">Propriété du prototype de <code>Function</code></h3> + +<p>La propriété <code>length</code> du prototype de {{jsxref("Function")}} vaut 0.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ +console.log((function(...args) {}).length); +// 0, le paramètre du reste n'est pas compté +console.log((function(a, b = 1, c) {}).length); +// 1, seuls les paramètres avant les valeurs par +// défaut sont comptés +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>L'attribut <code>configurable</code> de cette propriété vaut <code>true</code> désormais.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.length")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Function", "Function")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/name/index.html b/files/fr/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..b9b6f8300e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,201 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Objets_globaux/Function/name +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong><em>function</em>.name</strong></code> est une propriété en lecture seule qui renvoie le nom de la fonction courante ou <code>"anonymous"</code> si celle-ci a été créée de façon anonyme.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-name.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<div class="note"> +<p><strong>Note :</strong> Dans les implémentations non-standards antérieures à ES2015, l'attribut <code>configurable</code> valait <code>false</code>.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Instruction_de_fonction">Instruction de fonction</h3> + +<p>La propriété <code>name</code> renvoie le nom de la fonction lorsque celle-ci est utilisée dans une instruction de fonction.</p> + +<pre class="brush: js">function faireUnTruc() {} +faireUnTruc.name; // "faireUnTruc" +</pre> + +<h3 id="Fonctions_créées_avec_un_constructeur">Fonctions créées avec un constructeur</h3> + +<p>Lorsqu'on crée une fonction avec <code>new Function(...)</code> ou simplement <code>Function(...)</code>, on crée uniquement des objets dont le nom est "anonymous".</p> + +<pre class="brush: js">(new Function).name; // "anonymous"</pre> + +<h3 id="Inférence_des_noms_de_fonction">Inférence des noms de fonction</h3> + +<p>Les variables et les méthodes permettent d'inférer (c'est-à-dire de « deviner ») le nom des fonctions anonymes en fonction de leur position syntaxique (cette fonctionnalité est apparue avec ECMAScript 2015).</p> + +<pre class="brush: js">var f = function() {}; +var objet = { + uneMéthode: function() {} +}; + +console.log(f.name); // "f" +console.log(objet.uneMéthode.name); // "uneMéthode" +</pre> + +<p>On peut définir une fonction avec un nom grâce à une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction", "", 1)}}:</p> + +<pre class="brush: js">var objet = { + uneMéthode: function objet_maMéthode() {} +}; +console.log(objet.uneMéthode.name); // logs "objet_maMéthode" + +try { objet_maMéthode } catch(e) { console.log(e); } +// ReferenceError: objet_maMéthode is not defined +</pre> + +<p>On ne peut pas changer le nom d'une fonction, cette propriété est uniquement en lecture :</p> + +<pre class="brush: js">var objet = { + // anonyme + uneMéthode: function() {} +}; + +objet.uneMéthode.name = 'uneMéthode'; +console.log(object.uneMéthode.name); // une chaîne vide, uneMéthode est anonyme +</pre> + +<p>Pour modifier le nom, on pourrait cependant utiliser la méthode {{jsxref("Object.defineProperty()")}}.</p> + +<h3 id="Notation_raccourcie_pour_les_méthodes">Notation raccourcie pour les méthodes</h3> + +<pre class="brush: js">var o = { + toto(){} +}; +o.toto.name; // "toto";</pre> + +<h3 id="Noms_des_fonctions_liées">Noms des fonctions liées</h3> + +<p>{{jsxref("Function.bind()")}} produit une fonction dont le nom sera la chaîne "bound " suivi du nom de la fonction.</p> + +<pre class="brush: js">function toto() {}; +toto.bind({}).name; // "bound toto" +</pre> + +<h3 id="Noms_de_fonction_pour_les_accesseurs_et_les_mutateurs">Noms de fonction pour les accesseurs et les mutateurs</h3> + +<p>Lorsqu'on utilise les propriétés d'accesseur <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></code>, "get" ou "set" apparaîtra avant le nom de la fonction.</p> + +<pre class="brush: js">var o = { + get toto(){}, + set toto(x){} +}; + +var descripteur = Object.getOwnPropertyDescriptor(o, "toto"); +descripteur.get.name; // "get toto" +descripteur.set.name; // "set toto";</pre> + +<h3 id="Noms_des_fonctions_utilisées_dans_les_classes">Noms des fonctions utilisées dans les classes</h3> + +<p>On peut utiliser la notation <code>obj.constructor.name</code> pour vérifier la « classe » d'un objet (attention aux avertissements ci-après) :</p> + +<pre class="brush: js">function Toto() {} // Syntaxe ES2015 : class Toto {} + +var instanceDeToto = new Toto(); +console.log(instanceDeToto.constructor.name); // affiche "Toto" dans la console +</pre> + +<p><strong>Attention :</strong> l'interpréteur utilisera la propriété native <code>Function.name</code> uniquement si la fonction ne possède pas une propriété en propre intitulée <em>name</em> (cf section <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 de la spécification ECMAScript2015</a>). Cependant, ES2015 indique que les propriétés définies avec mot-clé <em>static</em> seront des propriétés propres de la fonction constructrice (cf. ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>). Ainsi, il n'est plus possible d'obtenir le nom de la classe si celle-ci possède une méthode statique intitulée <code>name()</code> :</p> + +<pre class="brush: js">class Toto { + constructor() {} + static name() {} +} +</pre> + +<p>Avec <code>static name()</code>, <code>Toto.name</code> ne contient plus le nom de la classe mais une référence à l'objet <code>name()</code>. La définition utilisée ci-avant se comporte de façon semblable à ce fragment de code ES5 :</p> + +<pre class="brush: js">function Toto() {} +Object.defineProperty(Toto, 'name', { writable: true }); +Toto.name = function() {}; +</pre> + +<p>Il est donc parfois erroné de penser que <code>Function.name</code> pointe toujours vers le nom de la classe.</p> + +<h3 id="Noms_de_fonction_sous_la_forme_de_symboles">Noms de fonction sous la forme de symboles</h3> + +<p>Si un symbole ({{jsxref("Symbol")}}) est utilisé comme nom d'une fonction et que celui-ci dispose d'une description, c'est cette dernière qui sera utilisée comme nom de la méthode, entre crochets :</p> + +<pre class="brush: js">var sym1 = Symbol("Toto"); +var sym2 = Symbol(); +var o = { + [sym1]: function(){}, + [sym2]: function(){} +}; + +o[sym1].name; // "[Toto]" +o[sym2].name; // ""</pre> + +<h2 id="Compresseurs_et_outils_de_minification_JavaScript">Compresseurs et outils de minification JavaScript</h2> + +<p>Attention à l'utilisation de <code>Function.name</code> lorsque le code source est transformé par certains outils. En effet, ceux-ci réduisent généralement la taille d'un programme en compressant les espaces et en modifiant parfois les noms de variables. Ainsi, un fragment de code comme :</p> + +<pre class="brush: js">function Toto() {}; +var toto = new Toto(); + +if (Toto.constructor.name === 'Toto') { + console.log("'toto' est une instance de 'Toto'"); +} else { + console.log('Oups !'); +} +</pre> + +<p>pourrait être compressé en :</p> + +<pre class="brush: js">function a() {}; +var b = new a(); +if (b.constructor.name === 'Toto') { + console.log("'toto' est une instance de 'Toto'"); +} else { + console.log('Oups !'); +} +</pre> + +<p>Dans la version non-compressée, la condition du test est remplie et on affiche <em>'toto' est une instance de 'Toto'</em> dans la console. Mais dans la version compressée, la condition n'est pas vérifiée. Lorsqu'on utilise <code>name</code>, il faut s'assurer que les outils utilisés ne modifient pas le nom des fonctions.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.name")}}</p> diff --git a/files/fr/web/javascript/reference/global_objects/function/tosource/index.html b/files/fr/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..3eb4b0d6dc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,67 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Function/toSource +tags: + - Function + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +<div>{{JSRef}}{{non-standard_header}}</div> + +<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaîne de caractères représentant le code source de l'objet.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>function</var>.toSource(); +Function.toSource(); +</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères représentant le code source de l'objet.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p> + +<ul> + <li>Pour l'objet natif {{jsxref("Function")}}, <code>toSource()</code> renvoie la chaîne suivante qui indique que le code source n'est pas disponible : + + <pre class="brush: js">function Function() { + [native code] +} +</pre> + </li> + <li>Pour les fonctions définies dans les scripts, <code>toSource()</code> renverra la chaîne correspondant au code source JavaScript de l'objet. + <pre class="brush: js">function coucou() { + console.log("Coucou le monde"); +} + +coucou.toSource(); +// produira la chaîne de caractères +// "function coucou() { +// console.log(\"Coucou le monde\"); +// }" +</pre> + </li> +</ul> + +<p>De façon générale, cette méthode est utilisée en interne par le moteur JavaScript et n'est pas utilisée dans les scripts tiers. Il est possible d'utiliser cette méthode pour une aide au débogage et pouvoir examiner le contenu d'un objet.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.3.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.toSource")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/global_objects/function/tostring/index.html b/files/fr/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..db667ff0f6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,98 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Function/toString +tags: + - Function + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant le code source de la fonction.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>function</var>.toString(indentation)</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères qui représente le code source de la fonction.</p> + +<h2 id="Description">Description</h2> + +<p>L'objet {{jsxref("Function")}} redéfinit la méthode {{jsxref("Object.prototype.toString", "toString")}} de l'objet {{jsxref("Object")}} ; il n'hérite donc pas de {{jsxref("Object.prototype.toString")}}. Pour les objets {{jsxref("Function")}}, la méthode <code>toString</code> renvoie une chaîne de caractères représentant l'objet sous la forme d'une déclaration de fonction. Pour ce faire, <code>toString</code> décompile la fonction pour renvoyer une chaîne qui contient le mot-clé <code>function</code>, la liste des arguments, les accolades et la source correspondant au corps de la fonction.</p> + +<p>Le moteur JavaScript appelle la méthode <code>toString</code> automatiquement lorsqu'un objet {{jsxref("Function")}} doit être représenté textuellement (par exemple lorsqu'une fonction doit être concaténée avec une chaîne de caractères).</p> + +<p>La méthode <code>toString()</code> lèvera une exception {{jsxref("TypeError")}} (« Function.prototype.toString called on incompatible object ») si la valeur this n'est pas un objet <code>Function</code>.</p> + +<pre class="example-bad brush: js">Function.prototype.toString.call("toto"); // TypeError +</pre> + +<p>Si la méthode <code>toString()</code> est appelée sur des fonctions natives qui ne sont pas définies dans le script, <code>toString()</code> renvoie une chaîne de caractères indiquant le caractère natif :</p> + +<pre class="brush: js">Math.abs.toString(); + +"function abs() { + [native code] +}"</pre> + +<p>Si la méthode <code>toString()</code> est appelée sur une fonction créée avec le constructeur <code>Function</code>, <code>toString()</code> renverra le code source d'une fonction intitulée <code>anonymous</code> et utilisera les paramètres et le corps de la fonction fournis.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td><code><a href="https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction">Function.prototype.toString()</a></code></td> + <td>Brouillon</td> + <td>Standardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Critères supplémentaires ajoutés sur la représentation de la chaîne.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.toString")}}</p> + +<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2> + +<ul> + <li>À partir de Firefox 17.0, <code>Function.prototype.toString()</code> a été implémenté en sauvegardant le code source de la fonction. La méthode utilisant la décompilation a été retirée et le paramètre <code>indentation</code> n'est donc plus nécessaire. Pour plus d'informations, voir {{bug("761723")}}.</li> + <li>À partir de Firefox 38 et jusqu'à Firefox 63, <code>Function.prototype.toString()</code> levait une exception pour les {{jsxref("Proxy")}} (cf. {{bug(1100936)}} et {{bug(1440468)}}).</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> |