aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/javascript/reference/operators/new
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-08-03 08:03:23 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-09-03 08:08:25 +0200
commitbf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch)
treec101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/reference/operators/new
parent844f5103992238c0c23203286dad16a466e89c97 (diff)
downloadtranslated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip
convert content to md
Diffstat (limited to 'files/fr/web/javascript/reference/operators/new')
-rw-r--r--files/fr/web/javascript/reference/operators/new/index.md206
1 files changed, 88 insertions, 118 deletions
diff --git a/files/fr/web/javascript/reference/operators/new/index.md b/files/fr/web/javascript/reference/operators/new/index.md
index 1e4074256c..7a0424c8fa 100644
--- a/files/fr/web/javascript/reference/operators/new/index.md
+++ b/files/fr/web/javascript/reference/operators/new/index.md
@@ -8,58 +8,51 @@ tags:
translation_of: Web/JavaScript/Reference/Operators/new
original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new
---
-<div>{{jsSidebar("Operators")}}</div>
+{{jsSidebar("Operators")}}
-<p>L'<strong>opérateur <code>new</code></strong> permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).</p>
+L'**opérateur `new`** permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).
-<p>Le mot-clé <code>new</code>, utilisé avec une fonction, applique les 4 étapes suivantes :</p>
+Le mot-clé `new`, utilisé avec une fonction, applique les 4 étapes suivantes :
-<ol>
- <li>Il crée un nouvel objet à partir de zéro</li>
- <li>Il lie cet objet à un autre objet en le définissant comme son prototype.</li>
- <li>Le nouvel objet, créé à l'étape 1, est passé comme valeur <code>this</code> à la fonction</li>
- <li>Si la fonction ne renvoie pas d'objet, c'est la valeur <code>this</code> qui est renvoyée.</li>
-</ol>
+1. Il crée un nouvel objet à partir de zéro
+2. Il lie cet objet à un autre objet en le définissant comme son prototype.
+3. Le nouvel objet, créé à l'étape 1, est passé comme valeur `this` à la fonction
+4. Si la fonction ne renvoie pas d'objet, c'est la valeur `this` qui est renvoyée.
-<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div>
+{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">new <em>constructeur</em>[([<em>arguments</em>])]</pre>
+ new constructeur[([arguments])]
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
-<dl>
- <dt><code>constructeur</code></dt>
- <dd>Une fonction ou une classe qui définit le type de l'objet qui sera une instance.</dd>
- <dt><code>arguments</code></dt>
- <dd>Une liste de valeurs correspondant aux arguments avec lesquels appeler le <code>constructeur</code>.</dd>
-</dl>
+- `constructeur`
+ - : Une fonction ou une classe qui définit le type de l'objet qui sera une instance.
+- `arguments`
+ - : Une liste de valeurs correspondant aux arguments avec lesquels appeler le `constructeur`.
-<h2 id="Description">Description</h2>
+## Description
-<p>La création d'un objet personnalisé se fait en deux étapes :</p>
+La création d'un objet personnalisé se fait en deux étapes :
-<ol>
- <li>Définition du type d'objet en écrivant une fonction.</li>
- <li>Création d'une instance de l'objet avec <code>new</code>.</li>
-</ol>
+1. Définition du type d'objet en écrivant une fonction.
+2. Création d'une instance de l'objet avec `new`.
-<p>Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.</p>
+Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.
-<p>Lorsque le code <code>new <em>Toto</em>(...)</code> est exécuté, voici ce qui se passe :</p>
+Lorsque le code `new Toto(...)` est exécuté, voici ce qui se passe :
-<ol>
- <li>Un nouvel objet est créé qui hérite de <code><em>Toto</em>.prototype</code>.</li>
- <li>La fonction constructrice <code><em>Toto</em></code> est appelée avec les arguments fournis, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> étant lié au nouvel objet créé. <code>new <em>Toto</em></code> sera équivalent à <code>new <em>Toto</em>()</code> (i.e. un appel sans argument).</li>
- <li>L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient <code>new</code>. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).</li>
-</ol>
+1. Un nouvel objet est créé qui hérite de `Toto.prototype`.
+2. La fonction constructrice `Toto` est appelée avec les arguments fournis, [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) étant lié au nouvel objet créé. `new Toto` sera équivalent à `new Toto()` (i.e. un appel sans argument).
+3. L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient `new`. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).
-<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction <code>voiture1.couleur = "noir"</code> ajoute une propriété couleur à <code>voiture1</code>, et lui assigne une valeur : "<code>noir</code>". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet <code>Voiture</code>.</p>
+Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction `voiture1.couleur = "noir"` ajoute une propriété couleur à `voiture1`, et lui assigne une valeur : "`noir`". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet `Voiture`.
-<p>Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype">Function.prototype</a></code>. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur <code>"couleur standard"</code> à tous les objets de type <code>Voiture</code>, et redéfinit ensuite cette valeur avec la chaîne "<code>noir</code>" uniquement pour l'instance d'objet <code>voiture1</code>. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a>.</p>
+Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété [`Function.prototype`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype). Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur `"couleur standard"` à tous les objets de type `Voiture`, et redéfinit ensuite cette valeur avec la chaîne "`noir`" uniquement pour l'instance d'objet `voiture1`. Pour plus d'informations, voir la page sur [prototype](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain).
-<pre class="brush: js">function Voiture() {}
+```js
+function Voiture() {}
voiture1 = new Voiture();
voiture2 = new Voiture();
@@ -75,120 +68,97 @@ console.log(voiture1.__proto__.couleur); // couleur standard
console.log(voiture2.__proto__.couleur); // couleur standard
console.log(voiture1.couleur); // noir
console.log(voiture2.couleur); // couleur standard
-</pre>
+```
-<div class="note">
-<p><strong>Note :</strong> Si on n'écrit pas l'appel du constructeur avec l'opérateur <code>new</code>, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de <code>this</code> sera différente.</p>
-</div>
+> **Note :** Si on n'écrit pas l'appel du constructeur avec l'opérateur `new`, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de `this` sera différente.
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Exemple_type_d'objet_et_instance_d'objet">Exemple : type d'objet et instance d'objet</h3>
+### Exemple : type d'objet et instance d'objet
-<p>Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle <code>Voiture</code>, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :</p>
+Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle `Voiture`, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :
-<pre class="brush: js">function Voiture(marque, modèle, année) {
+```js
+function Voiture(marque, modèle, année) {
this.marque = marque;
this.modèle = modèle;
this.année = année;
}
-</pre>
+```
-<p>À présent, vous pouvez créer un objet appelé <code>ma_voiture</code> de la manière suivante :</p>
+À présent, vous pouvez créer un objet appelé `ma_voiture` de la manière suivante :
-<pre class="brush: js">ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
-</pre>
+```js
+ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
+```
-<p>Cette instruction crée l'objet <code>ma_voiture</code> et assigne les valeurs spécifiées à ses propriétés. La valeur de <code>ma_voiture.marque</code> est alors la chaîne <code>"Volkswagen"</code>, celle de <code>ma_voiture.année</code> est l'entier 1997, et ainsi de suite.</p>
+Cette instruction crée l'objet `ma_voiture` et assigne les valeurs spécifiées à ses propriétés. La valeur de `ma_voiture.marque` est alors la chaîne `"Volkswagen"`, celle de `ma_voiture.année` est l'entier 1997, et ainsi de suite.
-<p>Il est possible de créer un nombre illimité d'objets <code>Voiture</code> en appelant <code>new</code>. Par exemple :</p>
+Il est possible de créer un nombre illimité d'objets `Voiture` en appelant `new`. Par exemple :
-<pre class="brush: js">voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
-</pre>
+```js
+voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
+```
-<h3 id="Exemple_propriété_d'objet_qui_est_elle-même_un_autre_objet">Exemple : propriété d'objet qui est elle-même un autre objet</h3>
+### Exemple : propriété d'objet qui est elle-même un autre objet
-<p>Supposons que vous ayez défini un objet appelé <code>Personne</code> de la manière suivante :</p>
+Supposons que vous ayez défini un objet appelé `Personne` de la manière suivante :
-<pre class="brush: js">function Personne(nom, age, surnom) {
+```js
+function Personne(nom, age, surnom) {
this.nom = nom;
this.age = age;
this.surnom = surnom;
}
-</pre>
+```
-<p>Et que vous avez ensuite instancié deux nouveaux objets <code>Personne</code> de la manière suivante :</p>
+Et que vous avez ensuite instancié deux nouveaux objets `Personne` de la manière suivante :
-<pre class="brush: js">rand = new Personne("Rand McNally", 33, "Randy");
+```js
+rand = new Personne("Rand McNally", 33, "Randy");
ken = new Personne("Ken Jones", 39, "Kenny");
-</pre>
+```
-<p>Vous pouvez alors réécrire la définition de <code>Voiture</code> pour contenir une propriété <code>propriétaire</code> qui reçoit un objet <code>Personne</code>, comme ceci :</p>
+Vous pouvez alors réécrire la définition de `Voiture` pour contenir une propriété `propriétaire` qui reçoit un objet `Personne`, comme ceci :
-<pre class="brush: js">function Voiture(marque, modèle, année, propriétaire) {
+```js
+function Voiture(marque, modèle, année, propriétaire) {
this.marque = marque;
this.modèle = modèle;
this.année = année;
this.propriétaire = propriétaire;
}
-</pre>
+```
-<p>Pour instancier les nouveaux objets, vous utiliserez ensuite :</p>
+Pour instancier les nouveaux objets, vous utiliserez ensuite :
-<pre class="brush: js">voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
+```js
+voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
voiture2 = new Voiture("Nissan", "300ZX", 1992, ken);
-</pre>
-
-<p>Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets <code>rand</code> et <code>ken</code> comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de <code>voiture2</code>, on peut alors accéder à la propriété suivante :</p>
-
-<pre class="brush: js">voiture2.propriétaire.nom
-</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('ESDraft', '#sec-new-operator', 'Opérateur new')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}</td>
- <td>{{Spec2('ES3')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}</td>
- <td>{{Spec2('ES1')}}</td>
- <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.new")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("Reflect.construct()")}}</li>
- <li>{{jsxref("Object.prototype")}}</li>
-</ul>
+```
+
+Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets `rand` et `ken` comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de `voiture2`, on peut alors accéder à la propriété suivante :
+
+```js
+voiture2.propriétaire.nom
+```
+
+## Spécifications
+
+| Spécification | Statut | Commentaires |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ESDraft')}} |   |
+| {{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ES6')}} |   |
+| {{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES5.1')}} |   |
+| {{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES3')}} |   |
+| {{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.new")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
+- {{jsxref("Reflect.construct()")}}
+- {{jsxref("Object.prototype")}}