diff options
author | julieng <julien.gattelier@gmail.com> | 2021-08-03 08:03:23 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-03 08:08:25 +0200 |
commit | bf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch) | |
tree | c101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/guide/details_of_the_object_model | |
parent | 844f5103992238c0c23203286dad16a466e89c97 (diff) | |
download | translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2 translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip |
convert content to md
Diffstat (limited to 'files/fr/web/javascript/guide/details_of_the_object_model')
-rw-r--r-- | files/fr/web/javascript/guide/details_of_the_object_model/index.md | 586 |
1 files changed, 340 insertions, 246 deletions
diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.md b/files/fr/web/javascript/guide/details_of_the_object_model/index.md index 8cf9bf50ff..0176da2600 100644 --- a/files/fr/web/javascript/guide/details_of_the_object_model/index.md +++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.md @@ -9,53 +9,50 @@ tags: translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}} -<p>JavaScript est un langage orienté objet basé sur des prototypes, plutôt que sur des classes. En raison de cette base différente, il peut être moins évident de comprendre comment JavaScript vous permet de créer des hiérarchies d'objets et d'avoir un héritage des propriétés et de leurs valeurs. Ce chapitre tente de clarifier la situation.</p> +JavaScript est un langage orienté objet basé sur des prototypes, plutôt que sur des classes. En raison de cette base différente, il peut être moins évident de comprendre comment JavaScript vous permet de créer des hiérarchies d'objets et d'avoir un héritage des propriétés et de leurs valeurs. Ce chapitre tente de clarifier la situation. -<p>Ce chapitre part du principe que vous avez déjà une certaine connaissance de JavaScript et que vous avez utilisé des fonctions JavaScript pour créer des objets simples.</p> +Ce chapitre part du principe que vous avez déjà une certaine connaissance de JavaScript et que vous avez utilisé des fonctions JavaScript pour créer des objets simples. -<h2 id="class-based_vs._prototype-based_languages">Langages basés sur des classes ou des prototypes</h2> +## Langages basés sur des classes ou des prototypes -<p>Les langages orientés objets, basés sur des classes, tels que Java et C++, sont fondés sur le concept de deux entités distinctes : les classes et les instances.</p> +Les langages orientés objets, basés sur des classes, tels que Java et C++, sont fondés sur le concept de deux entités distinctes : les classes et les instances. -<ul> - <li>Une <em>classe</em> définit toutes les propriétés qui caractérisent un certain ensemble d'objets (en considérant les méthodes et les champs en Java, ou les membres en C++, comme des propriétés). Une classe est abstraite par opposition à un membre particulier d'un ensemble d'objets qu'elle décrit. Par exemple, la classe <code>Employee</code> pourrait représenter l'ensemble de tous les employés.</li> - <li>Une <em>instance</em>, par contre, est l'instanciation d'une classe. Par exemple, <code>Victoria</code> pourrait être une instance de la classe <code>Employee</code>, représentant un individu particulier en tant qu'employé. Une instance possède exactement les mêmes propriétés que sa classe parente (ni plus, ni moins).</li> -</ul> +- Une _classe_ définit toutes les propriétés qui caractérisent un certain ensemble d'objets (en considérant les méthodes et les champs en Java, ou les membres en C++, comme des propriétés). Une classe est abstraite par opposition à un membre particulier d'un ensemble d'objets qu'elle décrit. Par exemple, la classe `Employee` pourrait représenter l'ensemble de tous les employés. +- Une _instance_, par contre, est l'instanciation d'une classe. Par exemple, `Victoria` pourrait être une instance de la classe `Employee`, représentant un individu particulier en tant qu'employé. Une instance possède exactement les mêmes propriétés que sa classe parente (ni plus, ni moins). -<p>Un langage basé sur des prototypes, tel que JavaScript, ne fait pas cette distinction : il a des objets. Un langage basé sur des prototypes possède la notion d'un <em>objet prototypique</em>, un objet utilisé comme modèle à partir duquel on peut obtenir les propriétés initiales d'un nouvel objet. Tout objet peut spécifier ses propres propriétés, soit lors de sa création, soit au moment de l'exécution. En outre, tout objet peut être associé en tant que <em>prototype</em> d'un autre objet, permettant au second objet de partager les propriétés du premier.</p> +Un langage basé sur des prototypes, tel que JavaScript, ne fait pas cette distinction : il a des objets. Un langage basé sur des prototypes possède la notion d'un _objet prototypique_, un objet utilisé comme modèle à partir duquel on peut obtenir les propriétés initiales d'un nouvel objet. Tout objet peut spécifier ses propres propriétés, soit lors de sa création, soit au moment de l'exécution. En outre, tout objet peut être associé en tant que _prototype_ d'un autre objet, permettant au second objet de partager les propriétés du premier. -<h3 id="defining_a_class">La définition d'une classe</h3> +### La définition d'une classe -<p>Dans les langages basés sur les classes, vous définissez une classe en utilisant une <em>définition de classe</em> distincte. Dans cette définition, vous pouvez spécifier des méthodes spéciales, appelées <em>constructeur</em> (et écrites « constructor »), pour créer des instances de la classe. Une méthode constructrice peut spécifier des valeurs initiales pour les propriétés de l'instance et effectuer d'autres traitements appropriés au moment de la création. Vous utilisez l'opérateur <code>new</code> en association avec la méthode constructrice pour créer des instances de la classe.</p> +Dans les langages basés sur les classes, vous définissez une classe en utilisant une _définition de classe_ distincte. Dans cette définition, vous pouvez spécifier des méthodes spéciales, appelées _constructeur_ (et écrites « constructor »), pour créer des instances de la classe. Une méthode constructrice peut spécifier des valeurs initiales pour les propriétés de l'instance et effectuer d'autres traitements appropriés au moment de la création. Vous utilisez l'opérateur `new` en association avec la méthode constructrice pour créer des instances de la classe. -<p>JavaScript suit un modèle similaire, mais ne dispose pas d'une définition de classe distincte de celle du constructeur. Au lieu de cela, vous définissez une fonction de construction pour créer des objets avec un ensemble initial particulier de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. Vous utilisez l'opérateur <code>new</code> avec une fonction « constructor » pour créer un nouvel objet.</p> +JavaScript suit un modèle similaire, mais ne dispose pas d'une définition de classe distincte de celle du constructeur. Au lieu de cela, vous définissez une fonction de construction pour créer des objets avec un ensemble initial particulier de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. Vous utilisez l'opérateur `new` avec une fonction « constructor » pour créer un nouvel objet. -<div class="note"> - <p><strong>Note :</strong> ECMAScript 2015 introduit une <a href="/fr/docs/Web/JavaScript/Reference/Classes">déclaration de classe</a> :</p> - - <blockquote> - <p>Les classes JavaScript, introduites dans ECMAScript 2015, sont principalement un enrichissement syntaxique de l'héritage basé sur les prototypes existant dans JavaScript. La syntaxe des classes n'introduit pas un nouveau modèle d'héritage orienté objet dans JavaScript.</p> - </blockquote> -</div> +> **Note :** ECMAScript 2015 introduit une [déclaration de classe](/fr/docs/Web/JavaScript/Reference/Classes) : +> +> > Les classes JavaScript, introduites dans ECMAScript 2015, sont principalement un enrichissement syntaxique de l'héritage basé sur les prototypes existant dans JavaScript. La syntaxe des classes n'introduit pas un nouveau modèle d'héritage orienté objet dans JavaScript. -<h3 id="subclasses_and_inheritance">Classes enfants et héritage</h3> +### Classes enfants et héritage -<p>Dans un langage basé sur les classes, vous créez une hiérarchie de classes par le biais des définitions de classes. Dans une définition de classe, vous pouvez spécifier que la nouvelle classe est une <em>classe enfant</em> d'une classe déjà existante. La classe enfant hérite de toutes les propriétés de la classe parente et peut en plus ajouter de nouvelles propriétés ou modifier celles héritées. Par exemple, supposons que la classe <code>Employee</code> ne comprend que les propriétés <code>name</code> (« nom ») et <code>dept</code> (« département »), et que <code>Manager</code> est une classe enfant de <code>Employee</code> qui ajoute la propriété <code>reports</code> (« rapports »). Dans ce cas, une instance de la classe <code>Manager</code> aurait les trois propriétés : <code>name</code>, <code>dept</code>, et <code>reports</code>.</p> +Dans un langage basé sur les classes, vous créez une hiérarchie de classes par le biais des définitions de classes. Dans une définition de classe, vous pouvez spécifier que la nouvelle classe est une _classe enfant_ d'une classe déjà existante. La classe enfant hérite de toutes les propriétés de la classe parente et peut en plus ajouter de nouvelles propriétés ou modifier celles héritées. Par exemple, supposons que la classe `Employee` ne comprend que les propriétés `name` (« nom ») et `dept` (« département »), et que `Manager` est une classe enfant de `Employee` qui ajoute la propriété `reports` (« rapports »). Dans ce cas, une instance de la classe `Manager` aurait les trois propriétés : `name`, `dept`, et `reports`. -<p>JavaScript met en œuvre l'héritage en vous permettant d'associer un objet prototypique à n'importe quelle fonction de construction. Ainsi, vous pouvez créer exactement l'exemple <code>Employee</code> — <code>Manager</code>, mais vous utilisez une terminologie légèrement différente. D'abord, vous définissez la fonction du constructeur <code>Employee</code>, en spécifiant les propriétés <code>name</code> et <code>dept</code>. Ensuite, vous définissez la fonction du constructeur <code>Manager</code>, en appelant le constructeur <code>Employee</code> et en spécifiant la propriété <code>reports</code>. Enfin, vous attribuez un nouvel objet dérivé de <code>Employee.prototype</code> comme <code>prototype</code> pour la fonction du constructeur <code>Manager</code>. Ensuite, lorsque vous créez un nouveau <code>Manager</code>, il hérite des propriétés <code>name</code> et <code>dept</code> de l'objet <code>Employee</code>.</p> +JavaScript met en œuvre l'héritage en vous permettant d'associer un objet prototypique à n'importe quelle fonction de construction. Ainsi, vous pouvez créer exactement l'exemple `Employee` — `Manager`, mais vous utilisez une terminologie légèrement différente. D'abord, vous définissez la fonction du constructeur `Employee`, en spécifiant les propriétés `name` et `dept`. Ensuite, vous définissez la fonction du constructeur `Manager`, en appelant le constructeur `Employee` et en spécifiant la propriété `reports`. Enfin, vous attribuez un nouvel objet dérivé de `Employee.prototype` comme `prototype` pour la fonction du constructeur `Manager`. Ensuite, lorsque vous créez un nouveau `Manager`, il hérite des propriétés `name` et `dept` de l'objet `Employee`. -<h3 id="adding_and_removing_properties">Ajouter ou retirer des propriétés</h3> +### Ajouter ou retirer des propriétés -<p>Dans les langages basés sur les classes, vous créez généralement une classe au moment de la compilation, puis vous instanciez, des instances de la classe, soit au moment de la compilation, soit au moment de l'exécution. Vous ne pouvez pas modifier le nombre ou le type de propriétés d'une classe après avoir défini cette dernière. En JavaScript, cependant, au moment de l'exécution, vous pouvez ajouter ou supprimer des propriétés de tout objet. Si vous ajoutez une propriété à un objet qui est utilisé comme prototype pour un ensemble d'objets, les objets dont il est le prototype obtiennent également la nouvelle propriété.</p> +Dans les langages basés sur les classes, vous créez généralement une classe au moment de la compilation, puis vous instanciez, des instances de la classe, soit au moment de la compilation, soit au moment de l'exécution. Vous ne pouvez pas modifier le nombre ou le type de propriétés d'une classe après avoir défini cette dernière. En JavaScript, cependant, au moment de l'exécution, vous pouvez ajouter ou supprimer des propriétés de tout objet. Si vous ajoutez une propriété à un objet qui est utilisé comme prototype pour un ensemble d'objets, les objets dont il est le prototype obtiennent également la nouvelle propriété. -<h3 id="summary_of_differences">Résumé des différences</h3> +### Résumé des différences -<p>Le tableau suivant donne un bref résumé de certaines de ces différences. Le reste de ce chapitre décrit les détails de l'utilisation des constructeurs et prototypes JavaScript pour créer une hiérarchie d'objets et les compare à la façon dont vous le feriez en Java.</p> +Le tableau suivant donne un bref résumé de certaines de ces différences. Le reste de ce chapitre décrit les détails de l'utilisation des constructeurs et prototypes JavaScript pour créer une hiérarchie d'objets et les compare à la façon dont vous le feriez en Java. <table class="standard-table"> - <caption>Comparaison des systèmes d'objets basés sur des classes (Java) et des prototypes (JavaScript)</caption> + <caption> + Comparaison des systèmes d'objets basés sur des classes (Java) et des + prototypes (JavaScript) + </caption> <thead> <tr> <th scope="row">Catégorie</th> @@ -71,8 +68,14 @@ original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails </tr> <tr> <th scope="row">Définition</th> - <td>Définir une classe avec une définition de classe ; instancier une classe avec des méthodes de construction.</td> - <td>Définir et créer un ensemble d'objets avec des fonctions de construction.</td> + <td> + Définir une classe avec une définition de classe ; instancier une classe + avec des méthodes de construction. + </td> + <td> + Définir et créer un ensemble d'objets avec des fonctions de + construction. + </td> </tr> <tr> <th scope="row">Création d'un nouvel objet</th> @@ -81,8 +84,14 @@ original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails </tr> <tr> <th scope="row">Construction de la hiérarchie des objets</th> - <td>Construire une hiérarchie d'objets en utilisant des définitions de classes pour définir des classes enfants à partir de classes existantes.</td> - <td>Construire une hiérarchie d'objets en assignant un objet comme prototype associé à une fonction de construction.</td> + <td> + Construire une hiérarchie d'objets en utilisant des définitions de + classes pour définir des classes enfants à partir de classes existantes. + </td> + <td> + Construire une hiérarchie d'objets en assignant un objet comme prototype + associé à une fonction de construction. + </td> </tr> <tr> <th scope="row">Modèle d'héritage</th> @@ -91,66 +100,80 @@ original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails </tr> <tr> <th scope="row">Extension des propriétés</th> - <td>La définition de la classe spécifie <em>toutes</em> les propriétés de toutes les instances d'une classe. Impossible d'ajouter des propriétés dynamiquement au moment de l'exécution.</td> - <td>La fonction ou le prototype du constructeur spécifie un <em>ensemble initial</em> de propriétés. On peut ajouter ou supprimer dynamiquement des propriétés à des objets individuels ou à l'ensemble des objets.</td> + <td> + La définition de la classe spécifie <em>toutes</em> les propriétés de + toutes les instances d'une classe. Impossible d'ajouter des propriétés + dynamiquement au moment de l'exécution. + </td> + <td> + La fonction ou le prototype du constructeur spécifie un + <em>ensemble initial</em> de propriétés. On peut ajouter ou supprimer + dynamiquement des propriétés à des objets individuels ou à l'ensemble + des objets. + </td> </tr> </tbody> </table> -<h2 id="the_employee_example">L'exemple de l'employé</h2> +## L'exemple de l'employé -<p>Le reste de ce chapitre utilise la hiérarchie des employés présentée dans la figure suivante.</p> +Le reste de ce chapitre utilise la hiérarchie des employés présentée dans la figure suivante. -<p><img alt="" src="figure8.1.png"></p> +![](figure8.1.png) -<p>Cela montre une hiérarchie d'objets avec les objets suivants :</p> +Cela montre une hiérarchie d'objets avec les objets suivants : -<ul> - <li><code>Employee</code> possède les propriétés <code>name</code> (« le nom » dont la valeur par défaut est la chaîne de caractères vide) et <code>dept</code> (« le département » dont la valeur par défaut est « général »).</li> - <li><code>Manager</code> est basé sur <code>Employee</code>. Il ajoute la propriété <code>reports</code> (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets <code>Employee</code>).</li> - <li><code>WorkerBee</code> est également basé sur <code>Employee</code>. Il ajoute la propriété <code>projects</code> (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères).</li> - <li><code>SalesPerson</code> est basé sur <code>WorkerBee</code>. Il ajoute la propriété <code>quota</code> (dont la valeur par défaut est 100). Il surcharge la propriété <code>dept</code> avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département.</li> - <li><code>Engineer</code> est basé sur <code>WorkerBee</code>. Il ajoute la propriété <code>machine</code> (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété <code>dept</code> avec la valeur « ingénierie ».</li> -</ul> +- `Employee` possède les propriétés `name` (« le nom » dont la valeur par défaut est la chaîne de caractères vide) et `dept` (« le département » dont la valeur par défaut est « général »). +- `Manager` est basé sur `Employee`. Il ajoute la propriété `reports` (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets `Employee`). +- `WorkerBee` est également basé sur `Employee`. Il ajoute la propriété `projects` (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères). +- `SalesPerson` est basé sur `WorkerBee`. Il ajoute la propriété `quota` (dont la valeur par défaut est 100). Il surcharge la propriété `dept` avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département. +- `Engineer` est basé sur `WorkerBee`. Il ajoute la propriété `machine` (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété `dept` avec la valeur « ingénierie ». -<h2 id="creating_the_hierarchy">La création de la hiérarchie</h2> +## La création de la hiérarchie -<p>Il existe plusieurs façons de définir des fonctions constructrices appropriées pour mettre en œuvre la hiérarchie des employés. La façon dont vous choisissez de les définir dépend en grande partie de ce que vous voulez être en mesure de faire dans votre application.</p> +Il existe plusieurs façons de définir des fonctions constructrices appropriées pour mettre en œuvre la hiérarchie des employés. La façon dont vous choisissez de les définir dépend en grande partie de ce que vous voulez être en mesure de faire dans votre application. -<p>Cette section montre comment utiliser des définitions très simples (et comparativement peu flexibles) pour démontrer comment faire fonctionner l'héritage. Dans ces définitions, vous ne pouvez spécifier aucune valeur de propriété lorsque vous créez un objet. L'objet nouvellement créé reçoit les valeurs par défaut, que vous pouvez modifier ultérieurement.</p> +Cette section montre comment utiliser des définitions très simples (et comparativement peu flexibles) pour démontrer comment faire fonctionner l'héritage. Dans ces définitions, vous ne pouvez spécifier aucune valeur de propriété lorsque vous créez un objet. L'objet nouvellement créé reçoit les valeurs par défaut, que vous pouvez modifier ultérieurement. -<p>Dans une application réelle, vous définiriez probablement des constructeurs qui vous permettent de fournir des valeurs de propriété au moment de la création de l'objet (voir <a href="#more_flexible_constructors">Des constructeurs plus flexibles</a> pour plus d'informations). Pour l'instant, ces définitions simples démontrent comment l'héritage se produit.</p> +Dans une application réelle, vous définiriez probablement des constructeurs qui vous permettent de fournir des valeurs de propriété au moment de la création de l'objet (voir [Des constructeurs plus flexibles](#more_flexible_constructors) pour plus d'informations). Pour l'instant, ces définitions simples démontrent comment l'héritage se produit. -<p>Les définitions suivantes en Java et en JavaScript de <code>Employee</code> sont similaires. La seule différence est que vous devez spécifier le type de chaque propriété en Java mais pas en JavaScript (ceci est dû au fait que Java est un <a href="https://en.wikipedia.org/wiki/Strong_and_weak_typing">langage fortement typé</a> <small>(en anglais)</small> alors que JavaScript est un langage faiblement typé).</p> +Les définitions suivantes en Java et en JavaScript de `Employee` sont similaires. La seule différence est que vous devez spécifier le type de chaque propriété en Java mais pas en JavaScript (ceci est dû au fait que Java est un [langage fortement typé](https://en.wikipedia.org/wiki/Strong_and_weak_typing) (en anglais) alors que JavaScript est un langage faiblement typé). -<h4 id="javascript_using_this_may_cause_an_error_for_the_following_examples">JavaScript (l'utilisation de cette option peut provoquer une erreur pour les exemples suivants)</h4> +#### JavaScript (l'utilisation de cette option peut provoquer une erreur pour les exemples suivants) -<pre class="brush: js">class Employee { +```js +class Employee { constructor() { this.name = ''; this.dept = 'général'; } -}</pre> +} +``` -<h4 id="javascript_**_use_this_instead">JavaScript ** (utilisez plutôt ceci)</h4> +#### JavaScript \*\* (utilisez plutôt ceci) -<pre class="brush: js">function Employee() { +```js +function Employee() { this.name = ''; this.dept = 'général'; -}</pre> +} +``` -<h4 id="java">Java</h4> +#### Java -<pre class="brush: java">public class Employee { +```java +public class Employee { public String name = ""; public String dept = "général"; -}</pre> +} +``` -<p>Les définitions de <code>Manager</code> et de <code>WorkerBee</code> montrent la différence dans la façon de spécifier l'objet immédiatement supérieur dans la chaîne d'héritage. En JavaScript, vous ajoutez une instance prototypique comme valeur de la propriété <code>prototype</code> de la fonction du constructeur, puis vous surchargez le <code>prototype.constructor</code> de la fonction du constructeur. Vous pouvez le faire à tout moment après avoir défini le constructeur. En Java, vous spécifiez la superclasse dans la définition de la classe. Vous ne pouvez pas modifier la superclasse en dehors de la définition de la classe.</p> +Les définitions de `Manager` et de `WorkerBee` montrent la différence dans la façon de spécifier l'objet immédiatement supérieur dans la chaîne d'héritage. En JavaScript, vous ajoutez une instance prototypique comme valeur de la propriété `prototype` de la fonction du constructeur, puis vous surchargez le `prototype.constructor` de la fonction du constructeur. Vous pouvez le faire à tout moment après avoir défini le constructeur. En Java, vous spécifiez la superclasse dans la définition de la classe. Vous ne pouvez pas modifier la superclasse en dehors de la définition de la classe. -<h4 id="javascript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">function Manager() { +```js +function Manager() { Employee.call(this); // On étend l'objet parent this.reports = []; // On définit une propriété unique à Manager } @@ -163,11 +186,12 @@ function WorkerBee() { } WorkerBee.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype WorkerBee.prototype.constructor = WorkerBee; // On surchage le constructeur -</pre> +``` -<h4 id="java_2">Java</h4> +#### Java -<pre class="brush: java">// La classe Manager étend la classe parente Employee +```java +// La classe Manager étend la classe parente Employee public class Manager extends Employee { public Employee[] reports = new Employee[0]; // On définit une propriété unique à Manager } @@ -176,13 +200,14 @@ public class Manager extends Employee { public class WorkerBee extends Employee { public String[] projects = new String[0]; // On définit une propriété unique à WorkerBee } -</pre> +``` -<p>Les définitions <code>Engineer</code> et <code>SalesPerson</code> créent des objets qui descendent de <code>WorkerBee</code> et donc de <code>Employee</code>. Un objet de ces types possède les propriétés de tous les objets situés au-dessus de lui dans la hiérarchie. En outre, ces définitions remplacent la valeur héritée de la propriété <code>dept</code> par de nouvelles valeurs spécifiques à ces objets.</p> +Les définitions `Engineer` et `SalesPerson` créent des objets qui descendent de `WorkerBee` et donc de `Employee`. Un objet de ces types possède les propriétés de tous les objets situés au-dessus de lui dans la hiérarchie. En outre, ces définitions remplacent la valeur héritée de la propriété `dept` par de nouvelles valeurs spécifiques à ces objets. -<h4 id="javascript_2">JavaScript</h4> +#### JavaScript -<pre class="brush: js">function SalesPerson() { +```js +function SalesPerson() { WorkerBee.call(this); // On étend l'objet WorkerBee this.dept = 'ventes'; // On réécrit la valeur de « dept » this.quota = 100; // On ajoute une propriété unique à SalesPerson @@ -196,11 +221,13 @@ function Engineer() { this.machine = ''; // On ajoute une propriété unique à Engineer } Engineer.prototype = Object.create(WorkerBee.prototype); -Engineer.prototype.constructor = Engineer;</pre> +Engineer.prototype.constructor = Engineer; +``` -<h4 id="java_3">Java</h4> +#### Java -<pre class="brush: java">// La classe a pour classe parente WorkerBee +```java +// La classe a pour classe parente WorkerBee public class SalesPerson extends WorkerBee { public String dept = "ventes"; // On réécrit la valeur de « dept » public double quota = 100.0; // On ajoute une propriété unique à SalesPerson @@ -210,25 +237,25 @@ public class SalesPerson extends WorkerBee { public class Engineer extends WorkerBee { public String dept = "ingénierie"; // On réécrit la valeur de « dept » public String machine = ""; // On ajoute une propriété unique à Engineer -}</pre> +} +``` -<p>À l'aide de ces définitions, vous pouvez créer des instances de ces objets qui obtiennent les valeurs par défaut de leurs propriétés. La figure suivante illustre l'utilisation de ces définitions JavaScript pour créer de nouveaux objets et montre les valeurs des propriétés de ces nouveaux objets.</p> +À l'aide de ces définitions, vous pouvez créer des instances de ces objets qui obtiennent les valeurs par défaut de leurs propriétés. La figure suivante illustre l'utilisation de ces définitions JavaScript pour créer de nouveaux objets et montre les valeurs des propriétés de ces nouveaux objets. -<div class="note"> - <p><strong>Note :</strong> Le terme <em>instance</em> a une signification technique spécifique dans les langages basés sur les classes. Dans ces langages, une instance est une instanciation individuelle d'une classe et est fondamentalement différente d'une classe. En JavaScript, « instance » n'a pas cette signification technique car JavaScript ne fait pas cette différence entre classes et instances. Toutefois, en parlant de JavaScript, le terme « instance » peut être utilisé de manière informelle pour désigner un objet créé à l'aide d'une fonction de construction particulière. Ainsi, dans cet exemple, vous pourriez dire de manière informelle que <code>jane</code> est une instance de <code>Engineer</code>. De même, bien que les termes <i>parent</i> (« Parent »), <i>child</i> (« Enfant »), <i>ancestor</i> (« Ancêtre ») et <i>descendant</i> (« Descendant ») n'aient pas de signification formelle en JavaScript ; vous pouvez les utiliser de manière informelle pour vous référer à des objets supérieurs ou inférieurs dans la chaîne des prototypes.</p> -</div> +> **Note :** Le terme _instance_ a une signification technique spécifique dans les langages basés sur les classes. Dans ces langages, une instance est une instanciation individuelle d'une classe et est fondamentalement différente d'une classe. En JavaScript, « instance » n'a pas cette signification technique car JavaScript ne fait pas cette différence entre classes et instances. Toutefois, en parlant de JavaScript, le terme « instance » peut être utilisé de manière informelle pour désigner un objet créé à l'aide d'une fonction de construction particulière. Ainsi, dans cet exemple, vous pourriez dire de manière informelle que `jane` est une instance de `Engineer`. De même, bien que les termes _parent_ (« Parent »), _child_ (« Enfant »), _ancestor_ (« Ancêtre ») et _descendant_ (« Descendant ») n'aient pas de signification formelle en JavaScript ; vous pouvez les utiliser de manière informelle pour vous référer à des objets supérieurs ou inférieurs dans la chaîne des prototypes. -<h3 id="creating_objects_with_simple_definitions">Création d'objets avec des définitions simples</h3> +### Création d'objets avec des définitions simples -<h4 id="object_hierarchy">Hiérarchie des objets</h4> +#### Hiérarchie des objets -<p>La hiérarchie suivante est créée à l'aide du code situé ci-dessous.</p> +La hiérarchie suivante est créée à l'aide du code situé ci-dessous. -<p><img src="figure8.3.png"></p> +![](figure8.3.png) -<h4 id="individual_objects_jim_sally_mark_fred_jane_etc._instances_created_from_constructor">Objets individuels = Jim, Sally, Mark, Fred, Jane, etc.<br>« Instances » créées à partir du constructeur</h4> +#### Objets individuels = Jim, Sally, Mark, Fred, Jane, etc.<br>« Instances » créées à partir du constructeur -<pre class="brush: js">let jim = new Employee; +```js +let jim = new Employee; // Les parenthèses peuvent être omises si // le constructeur ne prend pas d'arguments. // jim.name correspond à '' @@ -255,65 +282,78 @@ let jane = new Engineer; // jane.dept correspond à 'ingénierie' // jane.projects correspond à [] // jane.machine correspond à '' -</pre> +``` -<h2 id="object_properties">Les propriétés d'un objet</h2> +## Les propriétés d'un objet -<p>Cette section explique comment les objets héritent des propriétés d'autres objets dans la chaîne des prototypes et ce qui se passe lorsque vous ajoutez une propriété au moment de l'exécution.</p> +Cette section explique comment les objets héritent des propriétés d'autres objets dans la chaîne des prototypes et ce qui se passe lorsque vous ajoutez une propriété au moment de l'exécution. -<h3 id="inheriting_properties">L'héritage de propriétés</h3> +### L'héritage de propriétés -<p>Supposons que vous créez l'objet <code>mark</code> comme un <code>WorkerBee</code> avec l'instruction suivante :</p> +Supposons que vous créez l'objet `mark` comme un `WorkerBee` avec l'instruction suivante : -<pre class="brush: js">let mark = new WorkerBee;</pre> +```js +let mark = new WorkerBee; +``` -<p>Lorsque JavaScript voit l'opérateur <code>new</code>, il crée un nouvel objet générique et définit implicitement la valeur de la propriété interne [[Prototype]] à la valeur de <code>WorkerBee.prototype</code> et passe ce nouvel objet comme valeur du mot-clé <em><code>this</code></em> à la fonction du constructeur <code>WorkerBee</code>. La propriété interne [[Prototype]] détermine la chaîne de prototypes utilisée pour retourner les valeurs des propriétés. Une fois ces propriétés définies, JavaScript renvoie le nouvel objet et l'instruction d'affectation définit la variable <code>mark</code> à cet objet.</p> +Lorsque JavaScript voit l'opérateur `new`, il crée un nouvel objet générique et définit implicitement la valeur de la propriété interne \[\[Prototype]] à la valeur de `WorkerBee.prototype` et passe ce nouvel objet comme valeur du mot-clé _`this`_ à la fonction du constructeur `WorkerBee`. La propriété interne \[\[Prototype]] détermine la chaîne de prototypes utilisée pour retourner les valeurs des propriétés. Une fois ces propriétés définies, JavaScript renvoie le nouvel objet et l'instruction d'affectation définit la variable `mark` à cet objet. -<p>Ce processus ne met pas explicitement des valeurs dans l'objet <code>mark</code> (valeurs <em>locales</em>) pour les propriétés que <code>mark</code> hérite de la chaîne de prototypes. Lorsque vous demandez la valeur d'une propriété, JavaScript vérifie d'abord si la valeur existe dans cet objet. Si c'est le cas, cette valeur est retournée. Si la valeur n'existe pas localement, JavaScript vérifie la chaîne des prototypes (en utilisant la propriété interne [[Prototype]]). Si un objet de la chaîne des prototypes possède une valeur pour la propriété, cette valeur est renvoyée. Si aucune propriété de ce type n'est trouvée, JavaScript indique que l'objet ne possède pas la propriété. Ainsi, l'objet <code>mark</code> possède les propriétés et valeurs suivantes :</p> +Ce processus ne met pas explicitement des valeurs dans l'objet `mark` (valeurs _locales_) pour les propriétés que `mark` hérite de la chaîne de prototypes. Lorsque vous demandez la valeur d'une propriété, JavaScript vérifie d'abord si la valeur existe dans cet objet. Si c'est le cas, cette valeur est retournée. Si la valeur n'existe pas localement, JavaScript vérifie la chaîne des prototypes (en utilisant la propriété interne \[\[Prototype]]). Si un objet de la chaîne des prototypes possède une valeur pour la propriété, cette valeur est renvoyée. Si aucune propriété de ce type n'est trouvée, JavaScript indique que l'objet ne possède pas la propriété. Ainsi, l'objet `mark` possède les propriétés et valeurs suivantes : -<pre class="brush: js">mark.name = ''; +```js +mark.name = ''; mark.dept = 'général'; -mark.projects = [];</pre> +mark.projects = []; +``` -<p>L'objet <code>mark</code> se voit attribuer des valeurs locales pour les propriétés <code>name</code> et <code>dept</code> par le constructeur <code>Employee</code>. Une valeur locale lui est attribuée pour la propriété <code>projects</code> par le constructeur <code>WorkerBee</code>. On obtient ainsi l'héritage des propriétés et de leurs valeurs en JavaScript. Certaines subtilités de ce processus sont abordées dans <a href="#property_inheritance_revisited">L'héritage des propriétés, revisité</a>.</p> +L'objet `mark` se voit attribuer des valeurs locales pour les propriétés `name` et `dept` par le constructeur `Employee`. Une valeur locale lui est attribuée pour la propriété `projects` par le constructeur `WorkerBee`. On obtient ainsi l'héritage des propriétés et de leurs valeurs en JavaScript. Certaines subtilités de ce processus sont abordées dans [L'héritage des propriétés, revisité](#property_inheritance_revisited). -<p>Comme ces constructeurs ne vous permettent pas de fournir des valeurs spécifiques à une instance, ces informations sont génériques. Les valeurs des propriétés sont celles par défaut partagées par tous les nouveaux objets créés à partir de <code>WorkerBee</code>. Vous pouvez, bien sûr, modifier les valeurs de n'importe laquelle de ces propriétés. Ainsi, vous pourriez donner des informations spécifiques pour <code>mark</code> comme suit :</p> +Comme ces constructeurs ne vous permettent pas de fournir des valeurs spécifiques à une instance, ces informations sont génériques. Les valeurs des propriétés sont celles par défaut partagées par tous les nouveaux objets créés à partir de `WorkerBee`. Vous pouvez, bien sûr, modifier les valeurs de n'importe laquelle de ces propriétés. Ainsi, vous pourriez donner des informations spécifiques pour `mark` comme suit : -<pre class="brush: js">mark.name = 'Mark Eting'; +```js +mark.name = 'Mark Eting'; mark.dept = 'admin'; -mark.projects = ['navigateur'];</pre> +mark.projects = ['navigateur']; +``` -<h3 id="adding_properties">L'ajout de propriétés</h3> +### L'ajout de propriétés -<p>En JavaScript, vous pouvez ajouter des propriétés à tout objet au moment de l'exécution. Vous n'êtes pas contraint d'utiliser uniquement les propriétés fournies par la fonction du constructeur. Pour ajouter une propriété spécifique à un seul objet, vous attribuez une valeur à l'objet, comme suit :</p> +En JavaScript, vous pouvez ajouter des propriétés à tout objet au moment de l'exécution. Vous n'êtes pas contraint d'utiliser uniquement les propriétés fournies par la fonction du constructeur. Pour ajouter une propriété spécifique à un seul objet, vous attribuez une valeur à l'objet, comme suit : -<pre class="brush: js">mark.bonus = 3000;</pre> +```js +mark.bonus = 3000; +``` -<p>Maintenant, l'objet <code>mark</code> possède une propriété <code>bonus</code>, mais aucun autre objet <code>WorkerBee</code> ne possède cette propriété.</p> +Maintenant, l'objet `mark` possède une propriété `bonus`, mais aucun autre objet `WorkerBee` ne possède cette propriété. -<p>Si vous ajoutez une nouvelle propriété à un objet qui est utilisé comme prototype pour une fonction du constructeur, vous ajoutez cette propriété à tous les objets qui héritent des propriétés du prototype. Par exemple, vous pouvez ajouter une propriété <code>specialty</code> à tous les employés avec l'instruction suivante :</p> +Si vous ajoutez une nouvelle propriété à un objet qui est utilisé comme prototype pour une fonction du constructeur, vous ajoutez cette propriété à tous les objets qui héritent des propriétés du prototype. Par exemple, vous pouvez ajouter une propriété `specialty` à tous les employés avec l'instruction suivante : -<pre class="brush: js">Employee.prototype.specialty = 'aucune';</pre> +```js +Employee.prototype.specialty = 'aucune'; +``` -<p>Dès que JavaScript exécute cette instruction, l'objet <code>mark</code> possède également la propriété <code>specialty</code> avec la valeur <code>"aucune"</code>. La figure suivante montre l'effet de l'ajout de cette propriété au prototype <code>Employee</code>, puis de sa surcharge pour le prototype <code>Engineer</code>.</p> +Dès que JavaScript exécute cette instruction, l'objet `mark` possède également la propriété `specialty` avec la valeur `"aucune"`. La figure suivante montre l'effet de l'ajout de cette propriété au prototype `Employee`, puis de sa surcharge pour le prototype `Engineer`. -<p><img alt="Ajout de propriétés" src="figure8.4.png"></p> +![Ajout de propriétés](figure8.4.png) -<h2 id="more_flexible_constructors">Des constructeurs plus flexibles</h2> +## Des constructeurs plus flexibles -<p>Les fonctions correctrices présentées jusqu'à présent ne vous permettent pas de spécifier les valeurs des propriétés lorsque vous créez une instance. Comme avec Java, vous pouvez fournir des arguments aux constructeurs pour initialiser les valeurs des propriétés des instances. La figure suivante montre une façon de le faire.</p> +Les fonctions correctrices présentées jusqu'à présent ne vous permettent pas de spécifier les valeurs des propriétés lorsque vous créez une instance. Comme avec Java, vous pouvez fournir des arguments aux constructeurs pour initialiser les valeurs des propriétés des instances. La figure suivante montre une façon de le faire. -<p><img alt="Spécifier des propriétés dans un constructeur, prise 1" src="figure8.5.png"></p> +![Spécifier des propriétés dans un constructeur, prise 1](figure8.5.png) -<p>Les paires d'exemples suivantes montrent les définitions Java et JavaScript de ces objets.</p> +Les paires d'exemples suivantes montrent les définitions Java et JavaScript de ces objets. -<pre class="brush: js">// JavaScript +```js +// JavaScript function Employee(name, dept) { this.name = name || ''; // L'argument donné OU la valeur par défaut this.dept = dept || 'général'; // L'argument donné OU la valeur par défaut -}</pre> +} +``` -<pre class="brush: java">// Java +```java +// Java public class Employee { public String name; public String dept; @@ -330,15 +370,19 @@ public class Employee { this.name = name; this.dept = dept; } -}</pre> +} +``` -<pre class="brush: js">// JavaScript +```js +// JavaScript function WorkerBee(projs) { this.projects = projs || []; // L'argument donné OU la valeur par défaut } -WorkerBee.prototype = new Employee;</pre> +WorkerBee.prototype = new Employee; +``` -<pre class="brush: java">// Java +```java +// Java public class WorkerBee extends Employee { public String[] projects; // On assigne une valeur par défaut à la propriété @@ -349,16 +393,20 @@ public class WorkerBee extends Employee { public WorkerBee (String[] projs) { projects = projs; } -}</pre> +} +``` -<pre class="brush: js">// JavaScript +```js +// JavaScript function Engineer(mach) { this.dept = 'engineering'; // On réécrit la valeur de « dept » this.machine = mach || ''; // L'argument donné OU la valeur par défaut } -Engineer.prototype = new WorkerBee;</pre> +Engineer.prototype = new WorkerBee; +``` -<pre class="brush: java">// Java +```java +// Java public class Engineer extends WorkerBee { public String machine; public Engineer () { @@ -369,74 +417,83 @@ public class Engineer extends WorkerBee { dept = "engineering"; // On réécrit la valeur de « dept » machine = mach; // On assigne l'argument donné à la propriété } -}</pre> +} +``` -<p>Ces définitions JavaScript utilisent un idiome spécial pour définir les valeurs par défaut :</p> +Ces définitions JavaScript utilisent un idiome spécial pour définir les valeurs par défaut : -<pre class="brush: js">this.nom = nom || "";</pre> +```js +this.nom = nom || ""; +``` -<p>L'opérateur logique OU de JavaScript (<code>||</code>) évalue son premier argument. Si cet argument se transforme en vrai, l'opérateur le retourne. Sinon, l'opérateur renvoie la valeur du deuxième argument. Par conséquent, cette ligne de code teste pour voir si <code>name</code> a une valeur utile pour la propriété <code>name</code>. Si c'est le cas, elle définit <code>this.name</code> à cette valeur. Sinon, elle définit <code>this.name</code> à la chaîne de caractères vide. Ce chapitre utilise cet idiome par souci de concision ; cependant, il peut être déroutant au premier abord.</p> +L'opérateur logique OU de JavaScript (`||`) évalue son premier argument. Si cet argument se transforme en vrai, l'opérateur le retourne. Sinon, l'opérateur renvoie la valeur du deuxième argument. Par conséquent, cette ligne de code teste pour voir si `name` a une valeur utile pour la propriété `name`. Si c'est le cas, elle définit `this.name` à cette valeur. Sinon, elle définit `this.name` à la chaîne de caractères vide. Ce chapitre utilise cet idiome par souci de concision ; cependant, il peut être déroutant au premier abord. -<div class="note"> - <p><strong>Note :</strong> Cela peut ne pas fonctionner comme prévu si la fonction du constructeur est appelée avec des arguments qui se convertissent en <code>false</code> (comme <code>0</code> (zéro) et la chaîne vide (<code>""</code>)). Dans ce cas, la valeur par défaut sera choisie.</p> -</div> +> **Note :** Cela peut ne pas fonctionner comme prévu si la fonction du constructeur est appelée avec des arguments qui se convertissent en `false` (comme `0` (zéro) et la chaîne vide (`""`)). Dans ce cas, la valeur par défaut sera choisie. -<p>Avec ces définitions, lorsque vous créez une instance d'un objet, vous pouvez spécifier des valeurs pour les propriétés définies localement. Vous pouvez utiliser l'instruction suivante pour créer un nouvel <code>Engineer</code> :</p> +Avec ces définitions, lorsque vous créez une instance d'un objet, vous pouvez spécifier des valeurs pour les propriétés définies localement. Vous pouvez utiliser l'instruction suivante pour créer un nouvel `Engineer` : -<pre class="brush: js">let jane = new Engineer('belau');</pre> +```js +let jane = new Engineer('belau'); +``` -<p>Les propriétés de <code>Jane</code> sont maintenant :</p> +Les propriétés de `Jane` sont maintenant : -<pre class="brush: js">jane.name == ''; +```js +jane.name == ''; jane.dept == 'engineering'; jane.projects == []; -jane.machine == 'belau';</pre> +jane.machine == 'belau'; +``` -<p>Remarquez qu'avec ces définitions, vous ne pouvez pas spécifier une valeur initiale pour une propriété héritée telle que <code>name</code>. Si vous voulez spécifier une valeur initiale pour les propriétés héritées en JavaScript, vous devez ajouter du code supplémentaire à la fonction du constructeur.</p> +Remarquez qu'avec ces définitions, vous ne pouvez pas spécifier une valeur initiale pour une propriété héritée telle que `name`. Si vous voulez spécifier une valeur initiale pour les propriétés héritées en JavaScript, vous devez ajouter du code supplémentaire à la fonction du constructeur. -<p>Jusqu'à présent, la fonction du constructeur a créé un objet générique, puis a spécifié les propriétés et valeurs locales du nouvel objet. Vous pouvez demander au constructeur d'ajouter d'autres propriétés en appelant directement la fonction du constructeur d'un objet situé plus haut dans la chaîne des prototypes. La figure suivante montre ces nouvelles définitions.</p> +Jusqu'à présent, la fonction du constructeur a créé un objet générique, puis a spécifié les propriétés et valeurs locales du nouvel objet. Vous pouvez demander au constructeur d'ajouter d'autres propriétés en appelant directement la fonction du constructeur d'un objet situé plus haut dans la chaîne des prototypes. La figure suivante montre ces nouvelles définitions. -<p><img alt="Spécifier des propriétés dans un constructeur, prise 2" src="figure8.6.png"></p> +![Spécifier des propriétés dans un constructeur, prise 2](figure8.6.png) -<p>Examinons l'une de ces définitions en détails. Voici la nouvelle définition pour le constructeur <code>Engineer</code> :</p> +Examinons l'une de ces définitions en détails. Voici la nouvelle définition pour le constructeur `Engineer` : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; -}</pre> +} +``` -<p>Supposons que vous créez un nouvel objet <code>Engineer</code> comme suit :</p> +Supposons que vous créez un nouvel objet `Engineer` comme suit : -<pre class="brush: js">let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); -</pre> +```js +let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); +``` -<p>JavaScript suit les étapes suivantes :</p> +JavaScript suit les étapes suivantes : -<ol> - <li>L'opérateur <code>new</code> crée un objet générique et définit sa propriété <code>__proto__</code> à <code>Engineer.prototype</code>.</li> - <li>L'opérateur <code>new</code> transmet le nouvel objet au constructeur <code>Engineer</code> comme valeur du mot clé <code>this</code>.</li> - <li>Le constructeur crée une nouvelle propriété appelée <code>base</code> pour cet objet et affecte la valeur du constructeur <code>WorkerBee</code> à la propriété <code>base</code>. Cela fait du constructeur <code>WorkerBee</code> une méthode de l'objet <code>Engineer</code>. Le nom de la propriété <code>base</code> n'est pas spécial. Vous pouvez utiliser n'importe quel nom de propriété légal ; <code>base</code> est évocateur de son but.</li> - <li>Le constructeur appelle la méthode <code>base</code>, en passant comme arguments deux des arguments passés au constructeur (<code>"Jane Dupont"</code> et <code>["navigateur", "javascript"]</code>) et également la chaîne <code>"ingénierie"</code>. L'utilisation explicite de <code>"ingénierie"</code> dans le constructeur indique que tous les objets <code>Engineer</code> ont la même valeur pour la propriété <code>dept</code> héritée, et cette valeur remplace la valeur héritée de <code>Employee</code>.</li> - <li>Parce que <code>base</code> est une méthode de <code>Engineer</code>, dans l'appel à <code>base</code>, JavaScript lie le mot-clé <code>this</code> à l'objet créé à l'étape 1. Ainsi, la fonction <code>WorkerBee</code> transmet à son tour les arguments <code>"Jane Dupont"</code> et <code>"ingénierie"</code> à la fonction du constructeur <code>Employee</code>. Au retour de la fonction du constructeur <code>Employee</code>, la fonction <code>WorkerBee</code> utilise l'argument restant pour définir la propriété <code>projects</code>.</li> - <li>Au retour de la méthode <code>base</code>, le constructeur <code>Engineer</code> initialise la propriété <code>machine</code> de l'objet à <code>"belau"</code>.</li> - <li>Au retour du constructeur, JavaScript affecte le nouvel objet à la variable <code>jane</code>.</li> -</ol> +1. L'opérateur `new` crée un objet générique et définit sa propriété `__proto__` à `Engineer.prototype`. +2. L'opérateur `new` transmet le nouvel objet au constructeur `Engineer` comme valeur du mot clé `this`. +3. Le constructeur crée une nouvelle propriété appelée `base` pour cet objet et affecte la valeur du constructeur `WorkerBee` à la propriété `base`. Cela fait du constructeur `WorkerBee` une méthode de l'objet `Engineer`. Le nom de la propriété `base` n'est pas spécial. Vous pouvez utiliser n'importe quel nom de propriété légal ; `base` est évocateur de son but. +4. Le constructeur appelle la méthode `base`, en passant comme arguments deux des arguments passés au constructeur (`"Jane Dupont"` et `["navigateur", "javascript"]`) et également la chaîne `"ingénierie"`. L'utilisation explicite de `"ingénierie"` dans le constructeur indique que tous les objets `Engineer` ont la même valeur pour la propriété `dept` héritée, et cette valeur remplace la valeur héritée de `Employee`. +5. Parce que `base` est une méthode de `Engineer`, dans l'appel à `base`, JavaScript lie le mot-clé `this` à l'objet créé à l'étape 1. Ainsi, la fonction `WorkerBee` transmet à son tour les arguments `"Jane Dupont"` et `"ingénierie"` à la fonction du constructeur `Employee`. Au retour de la fonction du constructeur `Employee`, la fonction `WorkerBee` utilise l'argument restant pour définir la propriété `projects`. +6. Au retour de la méthode `base`, le constructeur `Engineer` initialise la propriété `machine` de l'objet à `"belau"`. +7. Au retour du constructeur, JavaScript affecte le nouvel objet à la variable `jane`. -<p>Vous pourriez penser que, ayant appelé le constructeur <code>WorkerBee</code> à partir de l'intérieur du constructeur <code>Engineer</code>, vous avez mis en place l'héritage de manière appropriée pour les objets <code>Engineer</code>. Ce n'est pas le cas. L'appel du constructeur <code>WorkerBee</code> garantit qu'un objet <code>Engineer</code> commence avec les propriétés spécifiées dans toutes les fonctions des constructeurs qui sont appelées. Cependant, si vous ajoutez ultérieurement des propriétés aux prototypes <code>Employee</code> ou <code>WorkerBee</code>, ces propriétés ne sont pas héritées par l'objet <code>Engineer</code>. Par exemple, supposons que vous ayez les déclarations suivantes :</p> +Vous pourriez penser que, ayant appelé le constructeur `WorkerBee` à partir de l'intérieur du constructeur `Engineer`, vous avez mis en place l'héritage de manière appropriée pour les objets `Engineer`. Ce n'est pas le cas. L'appel du constructeur `WorkerBee` garantit qu'un objet `Engineer` commence avec les propriétés spécifiées dans toutes les fonctions des constructeurs qui sont appelées. Cependant, si vous ajoutez ultérieurement des propriétés aux prototypes `Employee` ou `WorkerBee`, ces propriétés ne sont pas héritées par l'objet `Engineer`. Par exemple, supposons que vous ayez les déclarations suivantes : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; } let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); -Employee.prototype.specialty = 'aucune';</pre> +Employee.prototype.specialty = 'aucune'; +``` -<p>L'objet <code>jane</code> n'hérite pas de la propriété <code>specialty</code>. Vous devez encore configurer explicitement le prototype pour assurer un héritage dynamique. Supposons plutôt que vous ayez ces déclarations :</p> +L'objet `jane` n'hérite pas de la propriété `specialty`. Vous devez encore configurer explicitement le prototype pour assurer un héritage dynamique. Supposons plutôt que vous ayez ces déclarations : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; @@ -444,43 +501,47 @@ Employee.prototype.specialty = 'aucune';</pre> Engineer.prototype = new WorkerBee; let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); -Employee.prototype.specialty = 'aucune';</pre> +Employee.prototype.specialty = 'aucune'; +``` -<p>Maintenant la valeur de la propriété <code>jane</code> de l'objet <code>specialty</code> est « aucune ».</p> +Maintenant la valeur de la propriété `jane` de l'objet `specialty` est « aucune ». -<p>Une autre façon d'hériter est d'utiliser les méthodes <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> / <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a>. Les méthodes ci-dessous sont équivalentes :</p> +Une autre façon d'hériter est d'utiliser les méthodes [`call()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call) / [`apply()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply). Les méthodes ci-dessous sont équivalentes : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; -}</pre> +} +``` -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { WorkerBee.call(this, name, 'ingénierie', projs); this.machine = mach || ''; -}</pre> +} +``` -<p>L'utilisation de la méthode JavaScript <code>call()</code> rend une implémentation plus propre car <code>base</code> n'est plus nécessaire.</p> +L'utilisation de la méthode JavaScript `call()` rend une implémentation plus propre car `base` n'est plus nécessaire. -<h2 id="property_inheritance_revisited">L'héritage des propriétés, revisité</h2> +## L'héritage des propriétés, revisité -<p>Les sections précédentes ont décrit comment les constructeurs et prototypes JavaScript fournissent des hiérarchies et de l'héritage. Cette section aborde certaines subtilités qui n'étaient pas nécessairement apparentes dans les discussions précédentes.</p> +Les sections précédentes ont décrit comment les constructeurs et prototypes JavaScript fournissent des hiérarchies et de l'héritage. Cette section aborde certaines subtilités qui n'étaient pas nécessairement apparentes dans les discussions précédentes. -<h3 id="local_versus_inherited_values">Valeurs locales et valeurs héritées</h3> +### Valeurs locales et valeurs héritées -<p>Lorsque vous accédez à une propriété d'objet, JavaScript effectue les étapes suivantes, comme décrit précédemment dans ce chapitre :</p> +Lorsque vous accédez à une propriété d'objet, JavaScript effectue les étapes suivantes, comme décrit précédemment dans ce chapitre : -<ol> - <li>Vérifiez si la valeur existe localement. Si c'est le cas, elle est retournée.</li> - <li>S'il n'y a pas de valeur locale, vérifiez la chaîne de prototypes (en utilisant la propriété <code>__proto__</code>).</li> - <li>Si un objet de la chaîne de prototypes possède une valeur pour la propriété spécifiée, renvoyer cette valeur.</li> - <li>Si aucune propriété de ce type n'est trouvée, l'objet ne possède pas cette propriété.</li> -</ol> +1. Vérifiez si la valeur existe localement. Si c'est le cas, elle est retournée. +2. S'il n'y a pas de valeur locale, vérifiez la chaîne de prototypes (en utilisant la propriété `__proto__`). +3. Si un objet de la chaîne de prototypes possède une valeur pour la propriété spécifiée, renvoyer cette valeur. +4. Si aucune propriété de ce type n'est trouvée, l'objet ne possède pas cette propriété. -<p>Le résultat de ces étapes dépend de la façon dont vous définissez les choses en cours de route. L'exemple original avait ces définitions :</p> +Le résultat de ces étapes dépend de la façon dont vous définissez les choses en cours de route. L'exemple original avait ces définitions : -<pre class="brush: js">function Employee() { +```js +function Employee() { this.name = ''; this.dept = 'général'; } @@ -488,29 +549,37 @@ Employee.prototype.specialty = 'aucune';</pre> function WorkerBee() { this.projects = []; } -WorkerBee.prototype = new Employee;</pre> +WorkerBee.prototype = new Employee; +``` -<p>Avec ces définitions, supposons que vous créez <code>amy</code> comme une instance de <code>WorkerBee</code> avec l'instruction suivante :</p> +Avec ces définitions, supposons que vous créez `amy` comme une instance de `WorkerBee` avec l'instruction suivante : -<pre class="brush: js">let amy = new WorkerBee;</pre> +```js +let amy = new WorkerBee; +``` -<p>L'objet <code>amy</code> possède une propriété locale, <code>projects</code>. Les valeurs des propriétés <code>name</code> et <code>dept</code> ne sont pas locales à <code>amy</code> et héritent donc dans la propriété <code>amy</code> de l'objet <code>__proto__</code>. Ainsi, <code>amy</code> possède ces valeurs de propriétés :</p> +L'objet `amy` possède une propriété locale, `projects`. Les valeurs des propriétés `name` et `dept` ne sont pas locales à `amy` et héritent donc dans la propriété `amy` de l'objet `__proto__`. Ainsi, `amy` possède ces valeurs de propriétés : -<pre class="brush: js">amy.name == ''; +```js +amy.name == ''; amy.dept == 'général'; -amy.projects == [];</pre> +amy.projects == []; +``` -<p>Supposons maintenant que vous modifiez la valeur de la propriété <code>name</code> dans le prototype associé à <code>Employee</code> :</p> +Supposons maintenant que vous modifiez la valeur de la propriété `name` dans le prototype associé à `Employee` : -<pre class="brush: js">Employee.prototype.name = 'Inconnu·e';</pre> +```js +Employee.prototype.name = 'Inconnu·e'; +``` -<p>À première vue, on pourrait s'attendre à ce que cette nouvelle valeur se propage vers le bas à toutes les instances de <code>Employee</code>. Cependant, ce n'est pas le cas.</p> +À première vue, on pourrait s'attendre à ce que cette nouvelle valeur se propage vers le bas à toutes les instances de `Employee`. Cependant, ce n'est pas le cas. -<p>Lorsque vous créez <em>n'importe quelle</em> instance de l'objet <code>Employee</code>, cette instance obtient une <strong>valeur locale</strong> pour la propriété <code>name</code> (la chaîne de caractères vide). Cela signifie que lorsque vous définissez le prototype de <code>WorkerBee</code> en créant un nouvel objet <code>Employee</code>, <code>WorkerBee.prototype</code> a une valeur locale pour la propriété <code>name</code>. Par conséquent, lorsque JavaScript recherche la propriété <code>name</code> de l'objet <code>amy</code> (une instance de <code>WorkerBee</code>), JavaScript trouve la valeur locale de cette propriété dans <code>WorkerBee.prototype</code>. Il ne cherche donc pas plus haut dans la chaîne jusqu'à <code>Employee.prototype</code>.</p> +Lorsque vous créez _n'importe quelle_ instance de l'objet `Employee`, cette instance obtient une **valeur locale** pour la propriété `name` (la chaîne de caractères vide). Cela signifie que lorsque vous définissez le prototype de `WorkerBee` en créant un nouvel objet `Employee`, `WorkerBee.prototype` a une valeur locale pour la propriété `name`. Par conséquent, lorsque JavaScript recherche la propriété `name` de l'objet `amy` (une instance de `WorkerBee`), JavaScript trouve la valeur locale de cette propriété dans `WorkerBee.prototype`. Il ne cherche donc pas plus haut dans la chaîne jusqu'à `Employee.prototype`. -<p>Si vous souhaitez modifier la valeur d'une propriété d'un objet au moment de l'exécution et que la nouvelle valeur soit héritée par tous les descendants de l'objet, vous ne pouvez pas définir la propriété dans la fonction du constructeur de l'objet. Vous devez plutôt l'ajouter au prototype associé au constructeur. Par exemple, supposons que vous remplaciez le code précédent par le suivant :</p> +Si vous souhaitez modifier la valeur d'une propriété d'un objet au moment de l'exécution et que la nouvelle valeur soit héritée par tous les descendants de l'objet, vous ne pouvez pas définir la propriété dans la fonction du constructeur de l'objet. Vous devez plutôt l'ajouter au prototype associé au constructeur. Par exemple, supposons que vous remplaciez le code précédent par le suivant : -<pre class="brush: js">function Employee() { +```js +function Employee() { this.dept = 'général'; // Notez que this.name (une variable locale) n'apparaît pas ici } Employee.prototype.name = ''; // Un seul exemplaire @@ -522,38 +591,46 @@ WorkerBee.prototype = new Employee; let amy = new WorkerBee; -Employee.prototype.name = 'Inconnu·e';</pre> +Employee.prototype.name = 'Inconnu·e'; +``` + +Dans ce cas, la propriété `name` de `amy` devient « Inconnu·e ». + +Comme le montrent ces exemples, si vous souhaitez définir des valeurs par défaut pour les propriétés d'un objet et que vous voulez pouvoir modifier ces valeurs au moment de l'exécution, vous devez définir les propriétés dans le prototype du constructeur, et non dans la fonction du constructeur elle-même. -<p>Dans ce cas, la propriété <code>name</code> de <code>amy</code> devient « Inconnu·e ».</p> +### Déterminer les relations entre les instances -<p>Comme le montrent ces exemples, si vous souhaitez définir des valeurs par défaut pour les propriétés d'un objet et que vous voulez pouvoir modifier ces valeurs au moment de l'exécution, vous devez définir les propriétés dans le prototype du constructeur, et non dans la fonction du constructeur elle-même.</p> +La recherche de propriétés en JavaScript s'effectue dans les propriétés propres d'un objet et, si le nom de la propriété n'est pas trouvé, elle s'effectue dans la propriété spéciale de l'objet `__proto__`. Cette opération se poursuit de manière récursive ; le processus est appelé « recherche dans la chaîne des prototypes ». -<h3 id="determining_instance_relationships">Déterminer les relations entre les instances</h3> +La propriété spéciale `__proto__` est définie lorsqu'un objet est construit ; elle prend la valeur de la propriété `prototype` du constructeur. Ainsi, l'expression `new Riri()` crée un objet avec `__proto__ == Riri.prototype`. Par conséquent, les modifications apportées aux propriétés de `Riri.prototype` modifient la recherche de propriétés pour tous les objets qui ont été créés par `new Riri()`. -<p>La recherche de propriétés en JavaScript s'effectue dans les propriétés propres d'un objet et, si le nom de la propriété n'est pas trouvé, elle s'effectue dans la propriété spéciale de l'objet <code>__proto__</code>. Cette opération se poursuit de manière récursive ; le processus est appelé « recherche dans la chaîne des prototypes ».</p> +Chaque objet a une propriété `__proto__` (sauf `Object`) ; chaque fonction a une propriété `prototype`. Les objets peuvent donc être liés par « héritage de prototype » à d'autres objets. Vous pouvez tester l'héritage en comparant le `__proto__` d'un objet avec l'objet `prototype` d'une fonction. JavaScript fournit un raccourci : l'opérateur `instanceof` teste un objet par rapport à une fonction et renvoie vrai si l'objet hérite du prototype de la fonction. Par exemple, -<p>La propriété spéciale <code>__proto__</code> est définie lorsqu'un objet est construit ; elle prend la valeur de la propriété <code>prototype</code> du constructeur. Ainsi, l'expression <code>new Riri()</code> crée un objet avec <code>__proto__ == Riri.prototype</code>. Par conséquent, les modifications apportées aux propriétés de <code>Riri.prototype</code> modifient la recherche de propriétés pour tous les objets qui ont été créés par <code>new Riri()</code>.</p> +```js +let f = new Riri(); +let isTrue = (f instanceof Riri); +``` -<p>Chaque objet a une propriété <code>__proto__</code> (sauf <code>Object</code>) ; chaque fonction a une propriété <code>prototype</code>. Les objets peuvent donc être liés par « héritage de prototype » à d'autres objets. Vous pouvez tester l'héritage en comparant le <code>__proto__</code> d'un objet avec l'objet <code>prototype</code> d'une fonction. JavaScript fournit un raccourci : l'opérateur <code>instanceof</code> teste un objet par rapport à une fonction et renvoie vrai si l'objet hérite du prototype de la fonction. Par exemple,</p> +Pour un exemple plus détaillé, supposons que vous ayez le même ensemble de définitions que celui présenté dans [Héritage des propriétés](#inheriting_properties). Créez un objet `Engineer` comme suit : -<pre class="brush: js">let f = new Riri(); -let isTrue = (f instanceof Riri);</pre> - -<p>Pour un exemple plus détaillé, supposons que vous ayez le même ensemble de définitions que celui présenté dans <a href="#inheriting_properties">Héritage des propriétés</a>. Créez un objet <code>Engineer</code> comme suit :</p> - -<pre class="brush: js">let chris = new Engineer('Chris Anthème', ['jsd'], 'fiji');</pre> +```js +let chris = new Engineer('Chris Anthème', ['jsd'], 'fiji'); +``` -<p>Avec cet objet, les affirmations suivantes sont toutes vraies :</p> +Avec cet objet, les affirmations suivantes sont toutes vraies : -<pre class="brush: js">chris.__proto__ == Engineer.prototype; +```js +chris.__proto__ == Engineer.prototype; chris.__proto__.__proto__ == WorkerBee.prototype; chris.__proto__.__proto__.__proto__ == Employee.prototype; chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; -chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;</pre> +chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; +``` -<p>Compte tenu de cela, vous pourriez écrire une fonction <code>instanceOf</code> comme suit :</p> +Compte tenu de cela, vous pourriez écrire une fonction `instanceOf` comme suit : -<pre class="brush: js">function instanceOf(object, constructor) { +```js +function instanceOf(object, constructor) { object = object.__proto__; while (object != null) { if (object == constructor.prototype) @@ -564,43 +641,51 @@ chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;</pre> object = object.__proto__; } return false; -}</pre> +} +``` -<div class="note"> - <p><strong>Note :</strong> L'implémentation ci-dessus vérifie le type de l'objet par rapport à « xml » afin de contourner une bizarrerie de la façon dont les objets XML sont représentés dans les versions récentes de JavaScript. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=634150">bug 634150</a> si vous voulez connaître les détails.</p> -</div> +> **Note :** L'implémentation ci-dessus vérifie le type de l'objet par rapport à « xml » afin de contourner une bizarrerie de la façon dont les objets XML sont représentés dans les versions récentes de JavaScript. Voir [bug 634150](https://bugzilla.mozilla.org/show_bug.cgi?id=634150) si vous voulez connaître les détails. -<p>En utilisant la fonction <code>instanceOf</code> définie ci-dessus, ces expressions sont vraies :</p> +En utilisant la fonction `instanceOf` définie ci-dessus, ces expressions sont vraies : -<pre class="brush: js">instanceOf(chris, Engineer) +```js +instanceOf(chris, Engineer) instanceOf(chris, WorkerBee) instanceOf(chris, Employee) -instanceOf(chris, Object)</pre> +instanceOf(chris, Object) +``` -<p>Mais l'expression suivante est fausse :</p> +Mais l'expression suivante est fausse : -<pre class="brush: js">instanceOf(chris, SalesPerson)</pre> +```js +instanceOf(chris, SalesPerson) +``` -<h3 id="global_information_in_constructors">Les informations globales dans les constructeurs</h3> +### Les informations globales dans les constructeurs -<p>Lorsque vous créez des constructeurs, vous devez faire attention si vous définissez des informations globales dans le constructeur. Par exemple, supposons que vous souhaitez qu'un identifiant unique soit automatiquement attribué à chaque nouvel employé. Vous pourriez utiliser la définition suivante pour <code>Employee</code> :</p> +Lorsque vous créez des constructeurs, vous devez faire attention si vous définissez des informations globales dans le constructeur. Par exemple, supposons que vous souhaitez qu'un identifiant unique soit automatiquement attribué à chaque nouvel employé. Vous pourriez utiliser la définition suivante pour `Employee` : -<pre class="brush: js">let idCounter = 1; // On définit un compteur d'identifiant +```js +let idCounter = 1; // On définit un compteur d'identifiant function Employee(name, dept) { this.name = name || ''; this.dept = dept || 'général'; this.id = idCounter++; // On assigne la valeur et on incrémente le compteur -}</pre> +} +``` -<p>Avec cette définition, lorsque vous créez un nouvel <code>Employee</code>, le constructeur lui attribue l'ID suivant dans la séquence, puis incrémente le compteur d'ID global. Ainsi, si votre déclaration est la suivante, <code>victoria.id</code> vaut 1 et <code>harry.id</code> vaut 2 :</p> +Avec cette définition, lorsque vous créez un nouvel `Employee`, le constructeur lui attribue l'ID suivant dans la séquence, puis incrémente le compteur d'ID global. Ainsi, si votre déclaration est la suivante, `victoria.id` vaut 1 et `harry.id` vaut 2 : -<pre class="brush: js">let victoria = new Employee('Victoria Lamar', 'pubs'); -let harry = new Employee('Harry Stocrate', 'ventes');</pre> +```js +let victoria = new Employee('Victoria Lamar', 'pubs'); +let harry = new Employee('Harry Stocrate', 'ventes'); +``` -<p>À première vue, cela semble correct. Cependant, <code>idCounter</code> est incrémenté à chaque fois qu'un objet <code>Employee</code> est créé, pour quelque raison que ce soit. Si vous créez toute la hiérarchie <code>Employee</code> présentée dans ce chapitre, le constructeur <code>Employee</code> est appelé chaque fois que vous mettez en place un prototype. Supposons que vous ayez le code suivant :</p> +À première vue, cela semble correct. Cependant, `idCounter` est incrémenté à chaque fois qu'un objet `Employee` est créé, pour quelque raison que ce soit. Si vous créez toute la hiérarchie `Employee` présentée dans ce chapitre, le constructeur `Employee` est appelé chaque fois que vous mettez en place un prototype. Supposons que vous ayez le code suivant : -<pre class="brush: js">let idCounter = 1; +```js +let idCounter = 1; function Employee(name, dept) { this.name = name || ''; @@ -620,13 +705,15 @@ Engineer.prototype = new WorkerBee; function SalesPerson(name, projs, quota) {...} SalesPerson.prototype = new WorkerBee; -let mac = new Engineer('Mac Fly');</pre> +let mac = new Engineer('Mac Fly'); +``` -<p>Supposons en outre que les définitions omises ici possèdent la propriété <code>base</code> et appellent le constructeur situé au-dessus d'elles dans la chaîne des prototypes. Dans ce cas, au moment où l'objet <code>mac</code> est créé, <code>mac.id</code> est 5.</p> +Supposons en outre que les définitions omises ici possèdent la propriété `base` et appellent le constructeur situé au-dessus d'elles dans la chaîne des prototypes. Dans ce cas, au moment où l'objet `mac` est créé, `mac.id` est 5. -<p>Selon l'application, il peut être important ou non que le compteur ait été incrémenté ces fois supplémentaires. Si vous vous souciez de la valeur exacte de ce compteur, une solution possible consiste à utiliser plutôt le constructeur suivant :</p> +Selon l'application, il peut être important ou non que le compteur ait été incrémenté ces fois supplémentaires. Si vous vous souciez de la valeur exacte de ce compteur, une solution possible consiste à utiliser plutôt le constructeur suivant : -<pre class="brush: js">function Employee(name, dept) { +```js +function Employee(name, dept) { this.name = name || ''; this.dept = dept || 'general'; // Ceci est une écriture raccourcie de l'opérateur if @@ -635,24 +722,27 @@ let mac = new Engineer('Mac Fly');</pre> this.id = idCounter++; } } -</pre> +``` -<p>Lorsque vous créez une instance de <code>Employee</code> pour l'utiliser comme prototype, vous ne fournissez pas d'arguments au constructeur. En utilisant cette définition du constructeur, lorsque vous ne fournissez pas d'arguments, le constructeur n'attribue pas de valeur à l'id et ne met pas à jour le compteur. Par conséquent, pour qu'un <code>Employee</code> obtienne un id, vous devez spécifier un nom pour l'employé. Dans cet exemple, <code>mac.id</code> serait 1.</p> +Lorsque vous créez une instance de `Employee` pour l'utiliser comme prototype, vous ne fournissez pas d'arguments au constructeur. En utilisant cette définition du constructeur, lorsque vous ne fournissez pas d'arguments, le constructeur n'attribue pas de valeur à l'id et ne met pas à jour le compteur. Par conséquent, pour qu'un `Employee` obtienne un id, vous devez spécifier un nom pour l'employé. Dans cet exemple, `mac.id` serait 1. -<p>Vous pouvez également créer une copie de l'objet prototype de l'employé pour l'affecter à WorkerBee :</p> +Vous pouvez également créer une copie de l'objet prototype de l'employé pour l'affecter à WorkerBee : -<pre class="brush: js">WorkerBee.prototype = Object.create(Employee.prototype); -// au lieu de WorkerBee.prototype = new Employee</pre> +```js +WorkerBee.prototype = Object.create(Employee.prototype); +// au lieu de WorkerBee.prototype = new Employee +``` -<h3 id="no_multiple_inheritance">Pas d'héritage multiple</h3> +### Pas d'héritage multiple -<p>Certains langages orientés objets permettent l'héritage multiple. C'est-à-dire qu'un objet peut hériter des propriétés et des valeurs d'objets parents non apparentés. JavaScript ne prend pas en charge l'héritage multiple.</p> +Certains langages orientés objets permettent l'héritage multiple. C'est-à-dire qu'un objet peut hériter des propriétés et des valeurs d'objets parents non apparentés. JavaScript ne prend pas en charge l'héritage multiple. -<p>L'héritage des valeurs des propriétés se produit au moment de l'exécution, lorsque JavaScript recherche une valeur dans la chaîne de prototypes d'un objet. Comme un objet n'a qu'un seul prototype associé, JavaScript ne peut pas hériter dynamiquement de plus d'une chaîne de prototypes.</p> +L'héritage des valeurs des propriétés se produit au moment de l'exécution, lorsque JavaScript recherche une valeur dans la chaîne de prototypes d'un objet. Comme un objet n'a qu'un seul prototype associé, JavaScript ne peut pas hériter dynamiquement de plus d'une chaîne de prototypes. -<p>En JavaScript, vous pouvez faire en sorte qu'une fonction de construction appelle plusieurs autres fonctions de construction en son sein. Cela donne l'illusion d'un héritage multiple. Par exemple, considérez les déclarations suivantes :</p> +En JavaScript, vous pouvez faire en sorte qu'une fonction de construction appelle plusieurs autres fonctions de construction en son sein. Cela donne l'illusion d'un héritage multiple. Par exemple, considérez les déclarations suivantes : -<pre class="brush: js">function Hobbyist(hobby) { +```js +function Hobbyist(hobby) { this.hobby = hobby || 'plongée'; } @@ -666,20 +756,24 @@ function Engineer(name, projs, mach, hobby) { Engineer.prototype = new WorkerBee; let dennis = new Engineer('Dennis Ah', ['collaborateur'], 'hugo'); -</pre> +``` -<p>Supposons en outre que la définition de <code>WorkerBee</code> soit celle utilisée précédemment dans ce chapitre. Dans ce cas, l'objet <code>dennis</code> possède ces propriétés :</p> +Supposons en outre que la définition de `WorkerBee` soit celle utilisée précédemment dans ce chapitre. Dans ce cas, l'objet `dennis` possède ces propriétés : -<pre class="brush: js">dennis.name == 'Dennis Ah'; +```js +dennis.name == 'Dennis Ah'; dennis.dept == 'ingénierie'; dennis.projects == ['collaborateur']; dennis.machine == 'hugo'; -dennis.hobby == 'plongée';</pre> +dennis.hobby == 'plongée'; +``` -<p>Donc <code>dennis</code> obtient bien la propriété <code>hobby</code> du constructeur <code>Hobbyist</code>. Cependant, supposons que vous ajoutez ensuite une propriété au prototype du constructeur <code>Hobbyist</code> :</p> +Donc `dennis` obtient bien la propriété `hobby` du constructeur `Hobbyist`. Cependant, supposons que vous ajoutez ensuite une propriété au prototype du constructeur `Hobbyist` : -<pre class="brush: js">Hobbyist.prototype.equipment = ['masque', 'palmes', 'régulateur', 'bcd'];</pre> +```js +Hobbyist.prototype.equipment = ['masque', 'palmes', 'régulateur', 'bcd']; +``` -<p>L'objet <code>dennis</code> n'héritera pas de cette nouvelle propriété.</p> +L'objet `dennis` n'héritera pas de cette nouvelle propriété. -<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> +{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}} |