From 813516306651b14f4eff093d961765c6b13135b1 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Mon, 28 Jun 2021 08:54:10 +0200 Subject: UPDT: Update from en-US - #1317 (#1330) * UPDT: Update from en-US - mdn/translated-content#1317 * FIX: Proofreading pass 1 * Review - minor typos / few rewordings Co-authored-by: julieng --- .../guide/details_of_the_object_model/index.html | 983 ++++++++++----------- 1 file changed, 460 insertions(+), 523 deletions(-) (limited to 'files/fr/web/javascript') diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.html b/files/fr/web/javascript/guide/details_of_the_object_model/index.html index ad95d59b18..24c1a3c533 100644 --- a/files/fr/web/javascript/guide/details_of_the_object_model/index.html +++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.html @@ -9,612 +9,552 @@ tags: translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails --- -

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}

+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
-

JavaScript est un langage objet basé sur des prototypes plus que sur des classes. Cette différence peut rendre difficile la compréhension des hiérarchies entre objets, leurs créations, l’héritage de propriétés et de leurs valeurs... L’objectif de ce chapitre est de clarifier ces différents éléments en expliquant le modèle prototypal et ses différences avec un système de classes.

+

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.

-

Avant de lire ce chapitre, il est conseillé d’avoir quelques bases en JavaScript, notamment en ayant déjà écrit quelques fonctions et manipulé des objets.

+

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.

-

Langages de prototypes / Langages de classes

+

Langages basés sur des classes ou des prototypes

-

Les langages orientés objet basés sur des classes, comme Java ou C++, se fondent sur deux entités principales distinctes : les classes et les instances.

+

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.

-

Un langage basé sur des prototypes, comme JavaScript, n’utilise pas cette distinction. Il ne possède que des objets. On peut avoir des objets prototypiques qui sont des objets agissant comme un modèle sur lequel on pourrait obtenir des propriétés initiales pour un nouvel objet. Tout objet peut définir ses propres propriétés, que ce soit à l’écriture ou pendant l’exécution. De plus, chaque objet peut être associé comme le prototype d’un autre objet, auquel cas le second objet partage les propriétés du premier.

+

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.

-

La définition d'une classe

+

La définition d'une classe

-

Dans les langages de classes, on doit définir une classe dans une définition de classe. Dans cette définition, on peut inclure certaines méthodes spéciales, comme les constructeurs qui permettent de créer de nouvelles instances de cette classe. Un constructeur permet de définir certaines valeurs initiales pour des propriétés de l’instance et d’effectuer certains traitements lors de la création d’une instance. L’opérateur new, utilisé avec le constructeur, permet de créer de nouvelles instances.

+

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.

-

Le fonctionnement de JavaScript est similaire. En revanche, il n’y a pas de différence entre la définition de la classe et le constructeur. La fonction utilisée pour le constructeur permet de créer un objet avec un ensemble initial de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. L’opérateur new doit être utilisé avec un constructeur pour créer un nouvel objet.

+

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.

-
-

Note : Bien qu'ECMAScript 2015 introduise une déclaration de classe, celle-ci n'est qu'un sucre syntaxique utilisant l'héritage à base de prototype. Cette nouvelle syntaxe n'introduit pas de nouveau paradigme d'héritage objet au sein de JavaScript.

+
+

Note : ECMAScript 2015 introduit une déclaration de classe :

+ +
+

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.

+
-

Classes-filles et héritage

+

Classes enfants et héritage

-

Dans un langage de classes, on peut créer une hiérarchie de classes à travers la définition de classe. En effet, dans cette définition, on peut préciser si la nouvelle classe est une classe-fille d'une classe existante. La classe-fille hérite alors des propriétés de la classe-parente et peut ajouter de nouvelles propriétés ou modifier les propriétés héritées. Si, par exemple, la classe Employé comprend les propriétés nom et branche et que Manager est une classe-fille de la classe Employee qui ajoute la propriété rapports. Dans cet exemple, une instance de la classe Manager aurait trois propriétés : nom, branche, et rapports.

+

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.

-

En JavaScript, l’héritage permet d’associer un objet prototypique avec n’importe quel constructeur. Ainsi, on peut créer le même exemple EmployéManager mais on utilisera une terminologie légèrement différente. Tout d’abord, on définit le constructeur (fonction) Employé et on y définit les propriétés nom et branche. Ensuite, on définit le constructeur Manager avec la propriété rapports. Enfin, on assigne un nouvel objet Employé comme prototype dans le constructeur Manager. Ainsi, quand on créera un nouvel objet Manager, il héritera des propriétés nom et branche de l’objet Employé.

+

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 EmployeeManager, 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.

-

Ajouter ou retirer des propriétés

+

Ajouter ou retirer des propriétés

-

Dans un langage de classe, les classes sont créées durant la compilation et les instanciations de la classe ont lieu durant la compilation ou durant l’exécution. Il n’est pas possible de modifier les propriétés (leur quantité, leurs types) une fois que la classe a été définie. JavaScript, en revanche, permet d’ajouter ou de retirer des propriétés à n’importe quel objet pendant l’exécution. Si une propriété est ajoutée à un objet utilisé comme prototype, tous les objets qui l’utilisent comme prototype bénéficieront de cette propriété.

+

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é.

-

Résumé des différences

+

Résumé des différences

-

Le tableau suivant fournit un rapide récapitulatif de ces différences. Le reste du chapitre décrira l’utilisation de constructeur et de prototypes en JavaScript ainsi que la méthode correspondante qui pourrait être utilisée en Java.

+

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CatégorieLangage de classe (Java)Langage de prototype (JavaScript)
Classe ou instanceLes classes et les instances sont deux entités distinctes.Tous les objets sont des instances.
DéfinitionUne classe est définie avec une définition de classe. On instancie une classe avec des méthodes appelées constructeursOn définit et on crée un ensemble d’objets avec des fonctions qui sont des constructeurs.
Création d'un nouvel objetOn crée un seul objet grâce à l’opérateur new.Même chose que pour les langages de classe.
Construction de la hiérarchie des objetsOn construit une hiérarchie d’objets en utilisant les définitions des classes pour définir des classes-filles à partir de classes existantes.On construit une hiérarchie d’objets en assignant un prototype à un objet dans le constructeur de cet objet.
Modèle d'héritageLes objets héritent des propriétés appartenant à la chaîne des classes de la hiérarchie.Les objets héritent des propriétés appartenant à la chaîne des prototypes de la hiérarchie.
Ajout de propriétésLa définition de la classe définit exactement toutes les propriétés de toutes les instances d’une classe. Il est impossible d’ajouter des propriétés dynamiquement pendant l’exécution.Le constructeur ou le prototype définit un ensemble de propriétés initiales. Il est possible d’ajouter ou de retirer des propriétés dynamiquement, pour certains objets en particuliers ou bien pour l’ensemble des objets.
Comparaison des systèmes d'objets basés sur des classes (Java) et des prototypes (JavaScript)
CatégorieBasé sur les classes (Java)Basé sur des prototypes (JavaScript)
Classe et instanceLa classe et l'instance sont des entités distinctes.Tous les objets peuvent hériter d'un autre objet.
DéfinitionDéfinir une classe avec une définition de classe ; instancier une classe avec des méthodes de construction.Définir et créer un ensemble d'objets avec des fonctions de construction.
Création d'un nouvel objetCréer un objet unique avec l'opérateur new.Pareil.
Construction de la hiérarchie des objetsConstruire une hiérarchie d'objets en utilisant des définitions de classes pour définir des classes enfants à partir de classes existantes.Construire une hiérarchie d'objets en assignant un objet comme prototype associé à une fonction de construction.
Modèle d'héritageHériter des propriétés en suivant la chaîne de classes.Hériter des propriétés en suivant la chaîne des prototypes.
Extension des propriétésLa définition de la classe spécifie toutes 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.La fonction ou le prototype du constructeur spécifie un ensemble initial de propriétés. On peut ajouter ou supprimer dynamiquement des propriétés à des objets individuels ou à l'ensemble des objets.
-

L’exemple de l’employé

- -

La suite de ce chapitre expliquera la hiérarchie objet suivante, modélisant un système avec différents employés :

+

L'exemple de l'employé

-

+

Le reste de ce chapitre utilise la hiérarchie des employés présentée dans la figure suivante.

-

Une hiérarchie objet basique

+

-

Cet exemple utilisera les objets suivants :

+

Cela montre une hiérarchie d'objets avec les objets suivants :

    -
  • Employé qui possède la propriété nom (dont la valeur par défaut est la chaîne de caractères vide) et branche (dont la valeur par défaut est "commun").
  • -
  • Manager qui est basé sur Employé. La propriété rapports est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli d’objets Employés).
  • -
  • Travailleur est également basé sur Employé. La propriété project est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli de chaînes de caractères).
  • -
  • Vendeur est basé sur Travailleur. La propriété quota est ajoutée (la valeur par défaut est 100). La propriété branche est surchargée et vaut "ventes", indiquant que tous les vendeurs font partie du même département.
  • -
  • Ingénieur est basé sur Travailleur. La propriété moteur est ajoutée (la valeur par défaut est la chaîne vide) et la propriété branche est surchargée avec la valeur "ingénierie".
  • +
  • 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 ».
-

La création de la hiérarchie

+

La création de la hiérarchie

-

Plusieurs fonctions utilisées comme constructeurs peuvent permettre de définir la hiérarchie souhaitée. La façon que vous utiliserez dépendra des fonctionnalités que vous souhaitez avoir dans votre application.

+

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.

-

On utilise ici des définitions très simples (et peu adaptables) permettant de montrer le fonctionnement de l’héritage. Grâce à ces définitions fournies, on ne peut pas définir des valeurs spécifiques pour les propriétés lors de la création de l’objet. Les objets créés reçoivent les valeurs par défaut, les propriétés pourront être changées par la suite.

+

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.

-

Pour une application réelle, on définirait des constructeurs permettant de fixer les valeurs des propriétés lors de la création (voir Des constructeurs plus flexibles). Ici, ces définitions nous permettent d’observer l’héritage.

+

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 pour plus d'informations). Pour l'instant, ces définitions simples démontrent comment l'héritage se produit.

-
-

Attention, quand on assigne une fonction directement à NomFonction.prototype, cela retire la propriété « constructeur » du prototype original. Ainsi, (new Travailleur).constructor renverra un Employé (et non pas Travailleur). Il faut faire attention à la façon de conserver le constructeur original du prototype. On peut, par exemple, l'assigner à NomFonction.prototype.__proto__. Dans notre exemple, on aurait ainsi, Travailleur.prototype.__proto__ = new Employé; de cette façon : (new Travailleur).constructor renvoie bien « Travailleur ».

-
+

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é (en anglais) alors que JavaScript est un langage faiblement typé).

-

Les définitions d’Employé suivantes, en Java et JavaScript sont assez semblables. Les seules différences proviennent du typage nécessaire : avec Java, il est nécessaire de préciser le type des propriétés alors que ce n’est pas le cas en JavaScript. En Java, il est également nécessaire de créer une méthode constructeur à part dans la classe.

- - - - - - - - - - - - - - -
JavaScriptJava
-
-function Employé () {
-  this.nom = "";
-  this.branche = "commun";
-}
-
-
-
-public class Employé {
-   public String nom;
-   public String branche;
-   public Employé () {
-      this.nom = "";
-      this.branche = "commun";
-   }
-}
-
-
+

JavaScript (l'utilisation de cette option peut provoquer une erreur pour les exemples suivants)

+ +
class Employee {
+  constructor() {
+    this.name = '';
+    this.dept = 'général';
+  }
+}
+ +

JavaScript ** (utilisez plutôt ceci)

-

Les définitions de Manager et Travailleur permettent de voir la différence dans les façons de définir un objet plus loin dans la relation d’héritage. En JavaScript, il faut ajouter une instance prototypique comme valeur de la propriété prototype de la fonction constructeur (autrement dit, on définit la valeur de la propriété prototype de la fonction, en utilisant une instance du prototype utilisé puis en surchargeant prototype.constructor). On peut faire cela à n’importe quel moment après la définition du constructeur. Avec Java, on définit la classe mère au sein de la définition de la classe et il n’est pas possible de définir cette relation en dehors de la définition de la classe.

- - - - - - - - - - - - - - -
JavaScriptJava
-
-function Manager () {
-  this.rapports = [];
+
function Employee() {
+    this.name = '';
+    this.dept = 'général';
+}
+ +

Java

+ +
public class Employee {
+   public String name = "";
+   public String dept = "général";
+}
+ +

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.

+ +

JavaScript

+ +
function Manager() {
+  Employee.call(this); // On étend l'objet parent
+  this.reports = []; // On définit une propriété unique à Manager
 }
-Manager.prototype = new Employé;
+Manager.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype
+Manager.prototype.constructor = Manager; // On surchage le constructeur
 
-function Travailleur () {
-  this.projets = [];
+function WorkerBee() {
+  Employee.call(this); // On étend l'objet parent
+  this.projects = []; // On définit une propriété unique à WorkerBee
 }
-Travailleur.prototype = new Employé;
+WorkerBee.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype
+WorkerBee.prototype.constructor = WorkerBee; // On surchage le constructeur
 
-
-
-public class Manager extends Employé {
-   public Employé[] rapports;
-   public Manager () {
-      this.rapports = new Employé[0];
-   }
+
+

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
 }
 
-public class Travailleur extends Employé {
-   public String[] projets;
-   public Travailleur () {
-      this.projets = new String[0];
-   }
+// La classe WorkerBee étend la classe parente Employee
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0]; // On définit une propriété unique à WorkerBee
 }
 
-
-

Les définitions d’Ingénieur et de Vendeur permettent de créer des objets qui héritent de Travailleur et donc, implicitement, de Employé. Un objet d’un de ces deux types possède les propriétés de tous les objets présents plus haut dans l’héritage. De plus, dans notre exemple, les définitions de ces types surchargent les valeurs de la propriété branche avec des valeurs spécifiques.

- - - - - - - - - - - - - - -
JavaScriptJava
-
-function Vendeur () {
-   this.branche = "ventes";
-   this.quota = 100;
-}
-Vendeur.prototype = new Travailleur;
+

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.

+ +

JavaScript

-function Ingénieur () { - this.branche = "ingénierie"; - this.moteur = ""; +
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
 }
-Ingénieur.prototype = new Travailleur;
-
-
-
-public class Vendeur extends Travailleur {
-   public double quota;
-   public Vendeur () {
-      this.branche = "ventes";
-      this.quota = 100.0;
-   }
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+SalesPerson.prototype.constructor = SalesPerson;
+
+function Engineer() {
+   WorkerBee.call(this); // On étend l'objet WorkerBee
+   this.dept = 'ingénierie'; // On réécrit la valeur de « dept »
+   this.machine = ''; // On ajoute une propriété unique à Engineer
 }
+Engineer.prototype = Object.create(WorkerBee.prototype);
+Engineer.prototype.constructor = Engineer;
-public class Ingénieur extends Travailleur { - public Ingénieur () { - this.branche = "ingénierie"; - this.moteur = ""; - } +

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
 }
-
-
-

Grâce à ces définitions, on peut créer des instances pour ces objets qui auront les valeurs par défaut pour leurs propriétés. Le schéma suivant montre comment utiliser ces définitions en JavaScript et illustre les propriétés des objets ainsi créés.

+// La classe a pour classe parente 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 +} + +

À 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.

-

Le terme instance possède un sens particulier, au niveau technique, pour les langages de classes. Pour ces langages, une instance est le résultat de l’instanciation d’une classe en un objet (qui sera un « exemplaire » de cette classe), le concept d’instance est donc fondamentalement différent du concept de classe. En JavaScript, une « instance » ne possède pas de sens technique particulier, ceci est notamment dû au fait qu'il n’y a pas d’opposition entre ces concepts (car il n’y a pas de classe). Cependant, le terme instance peut parfois être utilisé, en JavaScript, pour désigner un objet qui aurait été créé en utilisant un constructeur. De la même façon, les mots parent, enfant, ancêtre, et descendant n’ont pas de signification formelle en JavaScript, mais ils peuvent être utilisés pour faire référence aux différents objets appartenant aux différents niveaux de la chaîne de prototypes.

+

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.

-

Créer des objets avec des définitions simples

+

Création d'objets avec des définitions simples

-

Les propriétés d’un objet

+

Hiérarchie des objets

-

Dans cette section, nous verrons comment les objets héritent des propriétés d’autres objets de la chaîne de prototypes et de ce qui se passe quand on ajoute une propriété lors de l’exécution.

+

La hiérarchie suivante est créée à l'aide du code situé ci-dessous.

-

L’héritage de propriétés

+

-

Imaginons qu’on souhaite créer un objet marc qui est un Travailleur :

+

Objets individuels = Jim, Sally, Mark, Fred, Jane, etc.
« Instances » créées à partir du constructeur

-
var marc = new Travailleur;
-
+
let jim = new Employee;
+// Les parenthèses peuvent être omises si
+// le constructeur ne prend pas d'arguments.
+// jim.name correspond à ''
+// jim.dept correspond à 'général'.
 
-

Lorsque JavaScript rencontre l’opérateur new, un objet générique est créé, ce nouvel objet est passé comme valeur de this à la fonction constructeur de Travailleur. Le constructeur définit ensuite la valeur de la propriété projets puis il définit implicitement la valeur de la propriété interne [[Prototype]] avec la valeur de Travailleur.prototype. (Le nom de cette propriété commence et finit par deux tirets bas.) La propriété __proto__ détermine la chaîne de prototypes utilisée pour renvoyer les valeurs des propriétés qu’on pourrait utiliser. Quand ces propriétés sont définies, JavaScript renvoie le nouvel objet, l’instruction d’assignation assigne alors la variable marc à cet objet.

+let sally = new Manager; +// sally.name correspond à '' +// sally.dept correspond à 'général' +// sally.reports correspond à [] -

En utilisant ce procédé, on n’introduit pas de valeurs spécifiques pour les propriétés de marc dont il hérite via la chaîne de prototypes. Si on utilise une valeur d'une de ces propriétés, JavaScript vérifiera tout d’abord si elle appartient à l'objet : si c’est le cas, la valeur est renvoyée. Sinon, JavaScript remonte dans la chaîne de prototypes en utilisant la propriété __proto__. Si un objet de cette chaîne possède une valeur pour cette propriété, la valeur est renvoyée. Si aucune propriété n’est trouvée, JavaScript indique que l’objet ne possède pas cette propriété. Ainsi pour l’objet marc : on aura les propriétés suivantes avec les valeurs respectives :

+let mark = new WorkerBee; +// mark.name correspond à '' +// mark.dept correspond à 'général' +// mark.projects correspond à [] -
marc.nom = "";
-marc.branche = "commun";
-marc.projets = [];
+let fred = new SalesPerson;
+// fred.name correspond à ''
+// fred.dept correspond à 'ventes'
+// fred.projects correspond à []
+// fred.quota correspond à 100
+
+let jane = new Engineer;
+// jane.name correspond à ''
+// jane.dept correspond à 'ingénierie'
+// jane.projects correspond à []
+// jane.machine correspond à ''
 
-

L’objet marc hérite des valeurs des propriétés nom et branche via le constructeur Employé. Il y a une valeur locale pour la propriété projets grâce au constructeur Travailleur.

+

Les propriétés d'un objet

-

Ces constructeurs ne permettent pas de fournir des valeurs spécifiques, l’information créée est générique pour chaque objet. Les valeurs des propriétés sont celles par défaut, comme pour tous les autres objets créés à partir de Travailleur. On peut, bien sûr, changer les valeurs de ces propriétés pour fournir des valeurs spécifiques :

+

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.

-
marc.nom = "Marc Dupont";
-marc.branche = "admin";
-marc.projets = ["navigateur"];
+

L'héritage de propriétés

-

L’ajout de propriétés

+

Supposons que vous créez l'objet mark comme un WorkerBee avec l'instruction suivante :

-

En JavaScript, on peut ajouter des propriétés lors de l’exécution et on peut utiliser des propriétés qui ne seraient pas définies par le constructeur. Afin d’ajouter une propriété à un objet donné, on assigne une valeur de la façon suivante :

+
let mark = new WorkerBee;
-
marc.bonus = 3000;
-
+

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.

-

Désormais, l’objet marc possède la propriété bonus. En revanche, aucun autre Travailleur ne possède cette propriété.

+

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 :

-

Si on ajoute une nouvelle propriété à un objet qui est utilisé comme prototype pour un constructeur, alors tous les objets créés à partir de ce constructeur bénéficieront de cette propriété grâce à l’héritage. Ainsi, on peut ajouter une propriété spécialité à tous les employés grâce à l’instruction suivante :

+
mark.name = '';
+mark.dept = 'général';
+mark.projects = [];
-
Employé.prototype.spécialité = "aucune";
-
+

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é.

-

Dès que l’instruction est exécutée par JavaScript, l’objet marc possèdera aussi la propriété spécialité initialisée avec la valeur "aucune". Le schéma suivant décrit l’effet de cet ajout puis de la surcharge de cette propriété pour le prototype Ingénieur.

+

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 :

-


- Ajouter des propriétés

+
mark.name = 'Mark Eting';
+mark.dept = 'admin';
+mark.projects = ['navigateur'];
-

Des constructeurs plus flexibles

+

L'ajout de propriétés

-

Les fonctions constructeur utilisées jusqu’à présent ne permettaient pas de définir les valeurs des propriétés à la création d’une instance. De la même façon qu’en Java, il est possible d’utiliser des arguments pour ces fonctions afin d’initialiser les valeurs des propriétés des instances.

+

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 :

-


- Définir les propriétés grâce au constructeur

+
mark.bonus = 3000;
-

Le tableau suivant montre les définitions de ces objets en JavaScript et en Java.

+

Maintenant, l'objet mark possède une propriété bonus, mais aucun autre objet WorkerBee ne possède cette propriété.

- - - - - - - - - - - - - - - - - - - - - -
JavaScriptJava
-
-function Employé (nom, branche) {
-  this.nom = nom || "";
-  this.branche = branche || "commun";
-}
-
-
-
-public class Employé {
-   public String nom;
-   public String branche;
-   public Employé () {
-      this("", "commun");
-   }
-   public Employé (String nom) {
-      this(nom, "commun");
-   }
-   public Employé (String nom, String branche) {
-      this.nom = nom;
-      this.branche = branche;
-   }
-}
-
-
-
-function Travailleur (projs) {
-  this.projets = projs || [];
+

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 :

+ +
Employee.prototype.specialty = 'aucune';
+ +

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.

+ +

Ajout de propriétés

+ +

Des constructeurs plus flexibles

+ +

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.

+ +

Spécifier des propriétés dans un constructeur, prise 1

+ +

Les paires d'exemples suivantes montrent les définitions Java et JavaScript de ces objets.

+ +
// 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
+}
+ +
// Java
+public class Employee {
+  public String name;
+  public String dept;
+  // On assigne les valeurs par défaut aux propriétés
+  public Employee () {
+    this("", "général");
+  }
+  // On assigne une valeur donnée et une par défaut aux propriétés
+  public Employee (String name) {
+    this(name, "général");
+  }
+  // On assigne les deux arguments donnés aux propriétés
+  public Employee (String name, String dept) {
+    this.name = name;
+    this.dept = dept;
+  }
+}
+ +
// JavaScript
+function WorkerBee(projs) {
+  this.projects = projs || []; // L'argument donné OU la valeur par défaut
 }
-Travailleur.prototype = new Employé;
-
-
-
-public class Travailleur extends Employé {
-   public String[] projets;
-   public Travailleur () {
+WorkerBee.prototype = new Employee;
+ +
// Java
+public class WorkerBee extends Employee {
+   public String[] projects;
+   // On assigne une valeur par défaut à la propriété
+   public WorkerBee () {
       this(new String[0]);
    }
-   public Travailleur (String[] projs) {
-      this.projets = projs;
+   // On assigne l'argument donné à la propriété
+   public WorkerBee (String[] projs) {
+      projects = projs;
    }
-}
+}
- -
-
-
-function Ingénieur (moteur) {
-   this.branche = "ingénierie";
-   this.moteur = moteur || "";
+
// 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
 }
-Ingénieur.prototype = new Travailleur;
-
-
-
-public class Ingénieur extends Travailleur {
-   public String moteur;
-   public Ingénieur () {
-      this.branche = "ingénierie";
-      this.moteur = "";
+Engineer.prototype = new WorkerBee;
+ +
// Java
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering"; // On réécrit la valeur de « dept »
+      machine = ""; // On assigne une valeur par défaut à la propriété
    }
-   public Ingénieur (String moteur) {
-      this.branche = "ingénierie";
-      this.moteur = moteur;
+   public Engineer (String mach) {
+      dept = "engineering"; // On réécrit la valeur de « dept »
+      machine = mach; // On assigne l'argument donné à la propriété
    }
-}
-
-
+}
-

Les définitions JavaScript présentées ci-dessus utilisent une instruction qui peut paraître étrange pour avoir des valeurs par défaut :

+

Ces définitions JavaScript utilisent un idiome spécial pour définir les valeurs par défaut :

-
this.nom = nom || "";
-
+
this.nom = nom || "";
-

L’opérateur correspondant au OU logique en JavaScript (||) évalue le premier argument. Si cet argument peut être converti en true, alors l’opérateur renverra cet argument. Sinon, il renvoie la valeur du second argument. Ainsi, en utilisant ce code, on teste si la valeur fournie (nom) est utile ou non : si c’est le cas, on l’utilise pour la propriété, sinon on conserve la valeur par défaut (ici la chaîne vide). Cet exemple peut paraître déroutant mais permet d’être plus concis.

+

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.

-

Attention, cela peut ne pas fonctionner comme souhaité si le constructeur est appelé avec des arguments qui seront convertis à false (comme 0 (zéro) et la chaîne de caractère vide (""). Si ces valeurs sont utilisées, la valeur par défaut sera prise en compte.

+

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.

-

Grâce à ces définitions, on peut créer une instance d’un objet en utilisant des valeurs spécifiques pour les propriétés. On peut par exemple utiliser :

+

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 :

-
var jeanne = new Ingénieur("carnot");
+
let jane = new Engineer('belau');
-

Les propriétés de l’objet sont donc désormais :

+

Les propriétés de Jane sont maintenant :

-
jeanne.nom == "";
-jeanne.branche == "ingénierie";
-jeanne.projets == [];
-jeanne.moteur == "carnot"
-
+
jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
-

On peut remarquer qu’avec ces définitions, on ne peut pas définir de valeur initiale pour les propriétés provenant de l’héritage, comme nom ici. Si on souhaite définir des valeurs initiales pour ces propriétés, il faut modifier légèrement le constructeur.

+

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.

-

Jusqu’à présent, le constructeur utilisé permettait de créer un objet générique puis de créer des propriétés et de spécifier leurs valeurs pour le nouvel objet. On peut utiliser un constructeur afin de définir des valeurs spécifiques pour les autres propriétés plus hautes dans l’héritage. Pour ce faire, on appelle le constructeur de l’objet plus haut dans l’héritage au sein même du constructeur de l’objet courant.

+

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.

-


- La définition de propriétés héritées dans un constructeur

+

Spécifier des propriétés dans un constructeur, prise 2

-

Ainsi, le constructeur de Ingénieur sera :

+

Examinons l'une de ces définitions en détails. Voici la nouvelle définition pour le constructeur Engineer :

-
function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
-

Si on crée ensuite un objet Ingénieur de cette façon :

+

Supposons que vous créez un nouvel objet Engineer comme suit :

-
var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
+
let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau');
 
-

L’exécution du code entraînera les étapes suivantes :

+

JavaScript suit les étapes suivantes :

    -
  1. La création d’un objet générique avec l'opérateur new qui assigne la valeur Ingénieur.prototype à la propriété __proto__.
  2. -
  3. L'opérateur new passe ensuite l’objet au constructeur Ingénieur comme valeur du mot-clé this.
  4. -
  5. Le constructeur crée une nouvelle propriété, appelée base, pour cet objet. Cette propriété reçoit la valeur du constructeur Travailleur. Ainsi le constructeur Travailleur devient une méthode de l’objet Ingénieur. Le nom de cette propriété base n’est pas spécial, on pourrait utiliser un autre nom pour cette propriété (sous réserve qu’il soit valide).
  6. -
  7. -

    Le constructeur appelle la méthode base et lui passe deux arguments qui avaient été passés ("Jeanne Dubois" et ["navigateur", "javascript"]), ainsi que la chaîne de caractères "ingénierie". Le fait d’utiliser "ingénierie" explicitement indique que tous les objets Ingénieur auront la même valeur pour la propriété branche qui aura été héritée. Cela permet également de surcharger la valeur par défaut héritée de Employé.

    -
  8. -
  9. -

    base étant une méthode d'Ingénieur, lors de l'appel de cette fonction, le mot clé this aura été lié à l'objet créé en 1. Ainsi, la fonction Travailleur passera les arguments "Jeanne Dubois" et "ingénierie" au constructeur Employé. Une fois que la fonction constructeur Employé a renvoyé un résultat, la fonction Travailleur utilise l'argument restant pour donner la valeur à la propriété projets.

    -
  10. -
  11. Une fois que la méthode base a renvoyé un résultat, le constructeur Ingénieur initialise la propriété moteur avec la valeur "carnot".
  12. -
  13. Lorsque le constructeur renvoie le résultat, il est assigné à la variable jeanne.
  14. +
  15. L'opérateur new crée un objet générique et définit sa propriété __proto__ à Engineer.prototype.
  16. +
  17. L'opérateur new transmet le nouvel objet au constructeur Engineer comme valeur du mot clé this.
  18. +
  19. 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.
  20. +
  21. 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.
  22. +
  23. 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.
  24. +
  25. Au retour de la méthode base, le constructeur Engineer initialise la propriété machine de l'objet à "belau".
  26. +
  27. Au retour du constructeur, JavaScript affecte le nouvel objet à la variable jane.
-

On peut penser qu’un simple appel au constructeur Travailleur, dans le constructeur Ingénieur permette de définir l'héritage pour les objets Ingénieur. Attention, ce n’est pas le cas. Un simple appel au constructeur Travailleur permet de bien définir les valeurs des propriétés spécifiées dans les constructeurs appelés. En revanche, si plus tard on souhaite ajouter des propriétés aux prototypes Employé ou Travailleur : l'objet Ingénieur n’en héritera pas. Si par exemple on a :

+

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 :

-
function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
 }
-var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
-Employé.prototype.spécialité = "aucune";
-
-

L'objet jeanne n’héritera pas de la propriété spécialité. Il aurait fallu préciser le prototype pour s'assurer de l'héritage dynamique. Si on a plutôt :

+let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); +Employee.prototype.specialty = 'aucune';
-
function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
+

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 :

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
 }
-Ingénieur.prototype= new Travailleur;
-var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
-Employé.prototype.spécialité = "aucune";
-
-

Alors la valeur de la propriété spécialité de jeanne sera "aucune".

+Engineer.prototype = new WorkerBee; +let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); +Employee.prototype.specialty = 'aucune';
-

Une autre façon d’utiliser l’héritage dans un constructeur peut être d'utiliser les méthodes call() et apply(). Les deux fragments de codes présentés ici sont équivalents :

+

Maintenant la valeur de la propriété jane de l'objet specialty est « aucune ».

- - - - - - - -
-
-function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-
-
-
-function Ingénieur (nom, projets, moteur) {
-  Travailleur.call(this, nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-
-
+

Une autre façon d'hériter est d'utiliser les méthodes call() / apply(). Les méthodes ci-dessous sont équivalentes :

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
+ +
function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
-

En utilisant la méthode call() on obtient une syntaxe plus claire car on n’utilise plus la propriété intermédiaire base.

+

L'utilisation de la méthode JavaScript call() rend une implémentation plus propre car base n'est plus nécessaire.

-

L’héritage de propriétés : les subtilités

+

L'héritage des propriétés, revisité

-

Les sections précédentes ont permis de décrire le fonctionnement des constructeurs et des prototypes, notamment par rapport aux hiérarchies d’objets et à l’héritage. L’objectif de cette section est de couvrir un peu plus en profondeur certaines facettes de l'héritage qui n’étaient pas détaillées avant.

+

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.

-

Valeurs locales et valeurs héritées

+

Valeurs locales et valeurs héritées

-

Quand on accède à la propriété d’un objet, JavaScript effectue les étapes suivantes :

+

Lorsque vous accédez à une propriété d'objet, JavaScript effectue les étapes suivantes, comme décrit précédemment dans ce chapitre :

    -
  1. On vérifie si la valeur existe localement : si c'est le cas on renvoie cette valeur.
  2. -
  3. S'il n’y a pas de valeur locale, on parcourt la chaîne des prototypes grâce à la propriété__proto__.
  4. -
  5. Si un objet de la chaîne de prototypes possède une valeur pour la propriété recherchée, alors on renvoie cette valeur.
  6. -
  7. Si aucune propriété correspondante n’est trouvée, alors l’objet ne possède pas cette propriété.
  8. +
  9. Vérifiez si la valeur existe localement. Si c'est le cas, elle est retournée.
  10. +
  11. S'il n'y a pas de valeur locale, vérifiez la chaîne de prototypes (en utilisant la propriété __proto__).
  12. +
  13. Si un objet de la chaîne de prototypes possède une valeur pour la propriété spécifiée, renvoyer cette valeur.
  14. +
  15. Si aucune propriété de ce type n'est trouvée, l'objet ne possède pas cette propriété.
-

L'issue de cet algorithme peut dépendre de la façon dont on a défini au fur et à mesure les différents objets. Dans l'exemple initial on avait les définitions :

+

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 :

-
function Employé () {
-  this.nom = "";
-  this.branche = "commun";
+
function Employee() {
+  this.name = '';
+  this.dept = 'général';
 }
 
-function Travailleur () {
-  this.projets = [];
+function WorkerBee() {
+  this.projects = [];
 }
-Travailleur.prototype = new Employé;
-
+WorkerBee.prototype = new Employee;
-

Si on utilise ces définitions et qu'on définit une instance de Travailleur appelée amy avec l'instruction suivante :

+

Avec ces définitions, supposons que vous créez amy comme une instance de WorkerBee avec l'instruction suivante :

-
var amy = new Travailleur;
-
+
let amy = new WorkerBee;
-

Alors l'objet amy possède une propriété locale : projets. Les valeurs des propriétés nom et branche ne sont pas locales, elles sont obtenues grâce à la propriété __proto__ de l'objet amy. Ainsi amy possède les propriétés suivantes avec les valeurs respectives :

+

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 :

-
amy.nom == "";
-amy.branche == "commun";
-amy.projets == [];
-
+
amy.name == '';
+amy.dept == 'général';
+amy.projects == [];
-

Si maintenant on change la valeur de la propriété nom pour le prototype associé à Employé :

+

Supposons maintenant que vous modifiez la valeur de la propriété name dans le prototype associé à Employee :

-
Employé.prototype.nom = "Inconnu"
-
+
Employee.prototype.name = 'Inconnu·e';
-

On pourrait penser que cette nouvelle valeur est propagée pour toutes les instances de Employé. Ce n’est pas le cas.

+

À 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.

-

En effet, lorsqu’on crée n’importe quelle instance de Employé, cette instance obtient une valeur locale pour la propriété nom (qui est la chaîne de caractères vide). Cela signifie que lorsqu'on utilise le prototype Travailleur dans lequel on crée un nouvel objet Employé, Travailleur.prototype aura une valeur locale pour la propriété nom. Ainsi, quand JavaScript recherche la propriété nom de l'objet amy (qui est une instance de Travailleur), JavaScript trouve la valeur locale de cette propriété au niveau de Travailleur.prototype et ne remonte pas plus loin dans la chaîne : on n’atteint pas Employé.prototype.

+

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.

-

Si on souhaite changer la valeur de la propriété d’un objet pendant l’exécution et que sa valeur soit héritée par tous les descendants de l’objet, on ne peut pas définir cette propriété dans le constructeur de l'objet, il faut l’ajouter au constructeur du prototype associé. Si on change le code précédent par :

+

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 :

-
function Employé () {
-  this.branche = "commun"; // La propriété this.nom, qui est une variable locale, n'apparaît pas ici
+
function Employee() {
+  this.dept = 'général'; // Notez que this.name (une variable locale) n'apparaît pas ici
 }
-Employé.prototype.nom = ""; // Il s'agit d'une simple affectation
+Employee.prototype.name = ''; // Un seul exemplaire
 
-function Travailleur () {
-  this.projets = [];
+function WorkerBee() {
+  this.projects = [];
 }
-Travailleur.prototype = new Employé;
-
-var amy = new Travailleur;
-
-Employé.prototype.nom = "Inconnnu";
-
+WorkerBee.prototype = new Employee; -

Alors on aura bien la propriété nom de amy qui deviendra "Inconnu".

+let amy = new WorkerBee; -

Comme on a pu le voir avec ces exemples, si on souhaite avoir des valeurs par défaut pour certaines propriétés et être capable de les modifier à l'exécution, il est nécessaire de les définir dans les propriétés du prototype du constructeur et non dans le constructeur même.

+Employee.prototype.name = 'Inconnu·e';
-

Comment déterminer les relations entre les instances

+

Dans ce cas, la propriété name de amy devient « Inconnu·e ».

-

La recherche de propriétés JavaScript permet de rechercher parmi les propriétés de l’objet puis dans la propriété spéciale __proto__ et ainsi de suite pour explorer la chaîne des prototypes.

+

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.

-

La propriété spéciale __proto__ est défnie à la construction d'un objet et contient la valeur du constructeur de la propriétéprototype. Ainsi, l’expression new Toto() crée un nouvel objet avec __proto__ == Toto.prototype. Ainsi, tous les changements des propriétés de Toto.prototype sont propagés sur la chaîne des prototypes des objets ayant été créés par new Toto().

+

Déterminer les relations entre les instances

-

Chaque objet (sauf Object) possède une propriété __proto__. Chaque fonction possède une propriété prototype. Ainsi, on peut relier les objets par « héritage prototypique ». Pour tester l’héritage, on peut comparer la propriété __proto__ d'un objet avec la propriété prototype d'une fonction. JavaScript permet de faire ceci avec l’opérateur instanceof qui teste un objet par rapport à une fonction et qui renvoie true si l’objet hérite de la fonction prototype. Ainsi :

+

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 ».

-
var t = new Toto();
-var isTrue = (t instanceof Toto);
+

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().

-

Pour avoir un exemple plus précis, si on crée un objet Ingénieur comme ceci :

+

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,

-
var chris = new Engineer("Chris Pigman", ["jsd"], "fiji");
-
+
let f = new Riri();
+let isTrue = (f instanceof Riri);
+ +

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. Créez un objet Engineer comme suit :

+ +
let chris = new Engineer('Chris Anthème', ['jsd'], 'fiji');
-

L’ensemble des instructions suivantes renverra true :

+

Avec cet objet, les affirmations suivantes sont toutes vraies :

-
chris.__proto__ == Ingénieur.prototype;
-chris.__proto__.__proto__ == Travailleur.prototype;
-chris.__proto__.__proto__.__proto__ == Employé.prototype;
+
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;
-
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-

On pourrait donc écrire la une fonction instanceOf de la façon suivante :

+

Compte tenu de cela, vous pourriez écrire une fonction instanceOf comme suit :

function instanceOf(object, constructor) {
+   object = object.__proto__;
    while (object != null) {
       if (object == constructor.prototype)
          return true;
@@ -624,125 +564,122 @@ chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
       object = object.__proto__;
    }
    return false;
-}
-
+}
-
Note : L’implémentation ci-dessus possède un cas particulier pour le type d'objet "xml" : c'est une façon de traiter les objets XML et la façon dont ils sont représentés dans les versions plus récentes de JavaScript. N’hésitez pas à aller consulter la fiche {{bug(634150)}} si vous voulez en savoir plus.
+
+

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 si vous voulez connaître les détails.

+
-

Ainsi, avec cette fonction, les expressions suivantes seront vérifiées :

+

En utilisant la fonction instanceOf définie ci-dessus, ces expressions sont vraies :

-
instanceOf (chris, Ingénieur)
-instanceOf (chris, Travailleur)
-instanceOf (chris, Employé)
-instanceOf (chris, Object)
-
+
instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
-

En revanche, l’expression qui suit est fausse :

+

Mais l'expression suivante est fausse :

-
instanceOf (chris, Vendeur)
-
+
instanceOf(chris, SalesPerson)
-

Les informations globales dans les constructeurs

+

Les informations globales dans les constructeurs

-

Lorsqu'on crée des constructeurs, on doit prendre des précautions si on souhaite manipuler des informations globales au sein d'un constructeur. Si, par exemple, on souhaite avoir un identifiant unique attribué automatiquement pour chaque nouvel employé, on pourrait utiliser la définition suivante :

+

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 :

-
var idCompteur = 1;
+
let idCounter = 1; // On définit un compteur d'identifiant
 
-function Employé (nom, branche) {
-   this.nom = nom || "";
-   this.branche = branche || "commun";
-   this.id = idCompteur++;
-}
-
+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 +}
-

Avec cette définition, si on utilise les instructions suivantes victoria.id sera 1 et henri.id sera 2:

+

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 :

-
var victoria = new Employé("Victoria Rander", "international")
-var henri = new Employé("Henri Jelier", "ventes")
-
+
let victoria = new Employee('Victoria Lamar', 'pubs');
+let harry = new Employee('Harry Stocrate', 'ventes');
-

De cette façon, on peut penser que cette solution convient. Cependant, idCompteur sera incrémenté à chaque fois qu’un objet Employé sera créé, quelqu’en soit la raison. Si on utilise la hiérarchie établie au cours de ce chapitre, le constructeur Employé sera appelé à chaque fois qu’on définit un prototype. Avec le code suivant par exemple :

+

À 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 :

-
var idCompteur = 1;
+
let idCounter = 1;
 
-function Employé (nom, branche) {
-   this.nom = nom || "";
-   this.branche = branche || "commun";
-   this.id = idCompteur++;
+function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'général';
+  this.id = idCounter++;
 }
 
-function Manager (nom, branche, rapports) {...}
-Manager.prototype = new Employé;
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
 
-function Travailleur (nom, branche, projets) {...}
-Travailleur.prototype = new Employé;
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
 
-function Ingénieur (nom, projets, moteur) {...}
-Ingénieur.prototype = new Travailleur;
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
 
-function Vendeur (nom, projets, quota) {...}
-Vendeur.prototype = new Travailleur;
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
 
-var alex = new Ingénieur("Alex S");
-
+let mac = new Engineer('Mac Fly');
-

Si on prend le cas où les définitions utilisent la propriété base et appellent le constructeur à chaque fois au-dessus, alors la propriété alex.id vaudra 3.

+

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.

-

Selon l’application qu’on a de cette information, on peut souhaiter ou non que ce compteur ne soit pas incrémenté avec ces étapes intermédiaires. Si on souhaite utiliser une valeur exacte, on pourra utiliser le constructeur suivant :

+

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 :

-
function Employé (nom, branche) {
-   this.nom = nom || "";
-   this.branche = branche || "commun";
-   if (nom)
-      this.id = idCompteur++;
+
function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+  // Ceci est une écriture raccourcie de l'opérateur if
+  // Si « name » est défini, alors on assigne et on incrémente
+  if (name) {
+    this.id = idCounter++;
+  }
 }
 
-

Lorsqu’on crée une instance d’Employé comme prototype, on ne fournit pas d’argument au constructeur. Ainsi, en utilisant ce constructeur, lorsqu’on ne fournit pas d’argument, le constructeur n’incrémente pas le compteur. De cette façon, pour qu’un employé ait un identifiant valide, il faut qu’on lui ait donné un nom. Avec cet exemple, alex.id vaudrait 1.

+

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.

-

Une autre façon de procéder est de créer une copie du prototype d'Employé et d'affecter celle-ci à Travailleur :

+

Vous pouvez également créer une copie de l'objet prototype de l'employé pour l'affecter à WorkerBee :

-
Travailleur.prototype = Object.create(Employé.prototype);
-// plutôt que Travailleur.prototype = new Employé;
+
WorkerBee.prototype = Object.create(Employee.prototype);
+// au lieu de WorkerBee.prototype = new Employee
-

L’absence d’héritage multiple

+

Pas d'héritage multiple

-

Certains langages orientés objet permettent d’avoir un héritage multiple. Cela veut dire qu’un objet peut hériter des propriétés et des valeurs d’objets parents qui n’ont aucune relation. JavaScript ne permet pas d’avoir ce type d'héritage.

+

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.

-

L’héritage des valeurs des propriétés s’effectue lors de l’exécution lorsque JavaScript explore la chaîne de prototype. Étant donné qu’un objet possède un seul prototype associé, JavaScript ne peut pas, dynamiquement, effectuer l’héritage sur plus d’une chaîne de prototypes.

+

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.

-

En JavaScript, il est possible d’avoir un constructeur qui fait appel à plusieurs constructeurs. Cela donne en quelque sorte l’illusion d’un héritage multiple. Par exemple :

+

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 :

-
function Passioné (passion) {
-   this.passion = passion || "plongée";
+
function Hobbyist(hobby) {
+  this.hobby = hobby || 'plongée';
 }
 
-function Ingénieur (nom, projets, moteur, passion) {
-   this.base1 = Travailleur;
-   this.base1(nom, "ingénierie", projets);
-   this.base2 = Passioné;
-   this.base2(passion);
-   this.moteur = moteur || "";
+function Engineer(name, projs, mach, hobby) {
+  this.base1 = WorkerBee;
+  this.base1(name, 'ingénierie', projs);
+  this.base2 = Hobbyist;
+  this.base2(hobby);
+  this.machine = mach || '';
 }
-Ingénieur.prototype = new Travailleur;
+Engineer.prototype = new WorkerBee;
 
-var denis = new Ingénieur("Denis Carle", ["collabra"], "carnot")
+let dennis = new Engineer('Dennis Ah', ['collaborateur'], 'hugo');
 
-

Supposons que la définition de Travailleur soit utilisée plus haut dans ce chapitre. Dans ce cas, l’objet dennis aura les propriétés suivantes :

+

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 :

-
denis.nom == "Denis Carle"
-denis.branche == "ingénierie"
-denis.projets == ["collabra"]
-denis.moteur == "carnot"
-denis.passion == "plongée"
-
+
dennis.name == 'Dennis Ah';
+dennis.dept == 'ingénierie';
+dennis.projects == ['collaborateur'];
+dennis.machine == 'hugo';
+dennis.hobby == 'plongée';
-

On voit bien que denis bénéficie de la propriété passion du constructeur Passioné. Cependant, si, plus tard, on ajoute une propriété au prototype du constructeur :

+

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 :

-
Passioné.prototype.équipement = ["masque", "filet", "club", "balles"]
-
+
Hobbyist.prototype.equipment = ['masque', 'palmes', 'régulateur', 'bcd'];
-

L’objet denis n’héritera pas de cette nouvelle propriété.

+

L'objet dennis n'héritera pas de cette nouvelle propriété.

-

{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}

+
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
-- cgit v1.2.3-54-g00ecf