O b j e c t . d e f i n e P ro p e r t i e s Object.defineProperties(obj , props) O b j e c t . d e f i n e P ro p e r t y Object.defineProperty (obj , prop , descriptor) J AVA S C R I P T (Programmation Internet) Po u r D é b u t a n t J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818 La dernière révision de ce texte est disponible sur CD. I. Object . defineProperties « Object . defineProperties ( ) », méthode de l’objet transcendant « Object », permet de créer (définir) une ou plusieurs nouvelle(s) propriété(s), ou de modifier une ou plusieurs autres propriété préexistantes d’un objet donné, en retournant l’objet modifié. Syntaxe : Object.defineProperties(obj, props) « obj » : objet (soit-il vide) auquel on veut ajouter ou dont on veut modifier une ou plusieurs propriétés. « props » encore un objet, dont les clés (membres ou éléments) sont les attributs ou « descripteurs » (énumérables), des propriétés qu’on veut modifier ou ajouter. const obj = {}; Object.defineProperties(obj, { property1: { value: "prop1Value", attributs J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V }, property2: {} }); « Object . defineProperties ( ) » : version à deux arguments, le premier argument étant l’objet en question, et le deuxième étant un objet qui renferme les propriétés à définir ou à redéfinir. Les descripteurs (à définir ou à redéfinir) sont eux-mêmes des objets pouvant être des « data descriptors » ou des « accessor descriptors ». Ils doivent obligatoirement avoir les deux clés (membres ou éléments) suivantes (REQUIRED keys) : 1. configurable : si « true », le type du descripteur de cette propriété peut être modifié [ses attributs value, writable, configurable, enumerable, set(), get()], et cette propriété peut être supprimée de l’objet. Valeur par défaut = false. 2. enumerable : si « true », la propriété s’affiche lors d’une énumération des propriétés de l’objet, avec une boucle « for…in » ou avec les méthodes « Object . keys » ou « getOwnPropertyNames() ». Valeur par défaut = false. Les deux clés suivantes des descripteurs sont optionnelles (OPTIONAL keys) : 3. value : la valeur associée à l’objet, celle qui est automatiquement affichée quand on lit la valeur de l’objet, ou qu’on modifie lors d’une affectation (toute valeur JavaScript valide : number, object, function, etc.). Par exemple avec « console . log ( objet . property ) » ou defineProperty, defineProperties - 2/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V « objet . property = val ». Valeur par défaut = undefined. 4. writable : Si « true », on peut directement affecter une nouvelle valeur à la propriété, avec un opérateur d’affectation. Valeur par défaut = false. 5. get : Fonction jouant le rôle de « getter » pour la propriété. La valeur qu’elle retourne est la valeur de la propriété. Valeur par défaut = undefined. 6. set : Fonction jouant le rôle de « setter » pour la propriété. Son unique argument est la nouvelle valeur à affecter à la propriété. Valeur par défaut = undefined. <script type="text/javascript"> "use strict"; const objet = {}; let r = Object.defineProperties(objet, { property1: { value: "prop1Value", writable: true, enumerable: false } , property2: { value: "prop2Value" } , property3: { value: "prop3Value", writable: true, configurable: true } }); console.log(r); console.log( objet.property1, defineProperty, defineProperties - 3/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V objet.property2, objet.property3); </script> defineProperty, defineProperties - 4/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu II. JavaScript Tome-V Object . defineProperty Avant de définir une [nouvelle] propriété ou méthode, il faut vérifier si cette méthode n’existe pas déjà. Mais attention, tous les browsers ne se comportent pas de la même façon : <script> console.log(Array.reverse); console.log([].reverse); console.log(Boolean(Array.reverse)); console.log(Boolean([].reverse)); if(Array.reverse) console.log("« Array.reverse » existe"); else console.log("« Array.reverse » indéfinie"); if([].reverse) console.log("« [].reverse » existe"); else console.log("« [].reverse » indéfinie"); console.log(); console.log(Array.dummy); console.log([].dummy); console.log(Boolean(Array.dummy)); console.log(Boolean([].dummy)); if(Array.dummy) console.log("« Array.dummy » existe"); else console.log("« Array.dummy » indéfinie"); if([].dummy) console.log("« [].dummy » existe"); else console.log("« [].dummy » indéfinie"); </script> Avec Firefox Quantum version 66.0.3 : defineProperty, defineProperties - 5/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Alors qu’avec Firefox quantum ci-dessus, « Array . reverse » est aussi définie… Avec tous les browsers ci-dessous : Comme vous le verrez, « [] . reverse » est définie, mais « Array . reverse » n’est pas définie, Brave Version 0.64.75 Chromium: 74.0.3729.131 (Build officiel) Vivaldi 2.5.1525.40 (Stable channel), Révision 5309247574c10e1673d1207a16506a253f2ba8dc, JavaScript V8 7.4.288.26, Flash 32.0.0.192 Agent utilisateur Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.134 Safari/537.36 Vivaldi/2.5.1525.40 Yandex Browser Version 19.4.3.79 beta : Opera Version :60.0.3255.95, Identification du navigateur : Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36 OPR/60.0.3255.95 Maxthon v5.2.6.1000 Google Chrome Version 74.0.3729.131 (Build officiel) defineProperty, defineProperties - 6/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V « Object . defineProperty ( ) », méthode de l’objet transcendant « Object », permet de créer (définir) une nouvelle propriété, ou de modifier une autre propriété préexistante d’un objet donné, en retournant l’objet modifié. Syntaxe : Object.defineProperty(obj, prop, descriptor) « obj » : objet (soit-il vide) auquel on veut ajouter ou dont on veut modifier une ou plusieurs propriétés. « prop » encore un objet, la propriété à ajouter ou à modifier, et dont les clés (membres ou éléments) sont les attributs ou descripteurs de la propriété. « descriptor » descripteur de la propriété à ajouter ou à modifier. « valeur de retour » : L’objet passé à la fonction. defineProperty, defineProperties - 7/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Une façon de définir une propriété d’un objet, le descripteur est ici définit isolément. <script type="text/javascript"> "use strict"; // Littéral d'objet vide var obj = {}; // Un autre objet, nommé « descriptor » // Par défaut non enumerable, // non configurable, non writable. var descriptor = Object.create(null); // Définit directe d'une nouvelle propriété // « value » pour l'objet « descriptor » // avec la valeur « valueValue » descriptor.value = 'valueValue'; // Avec « Object.defineProperty » on définit // la propriété arbitrairement nommé ici // « cle » pour l'objet obj. // La description de la clé ou propriété // « cle » est contenue dans le descripteur // « descriptor » qui est aussi un objet. Object.defineProperty(obj, 'cle', descriptor); console.dir(obj); // obj.cle=55; // TypeError: "cle" is read-only </script> Cette façon de définir isolément un descripteur est plus claire et facile à suivre qu’une définition « inline ». defineProperty, defineProperties - 8/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Même définition du descripteur mais inline et explicite : <script type="text/javascript"> "use strict"; // Littéral d'objet vide var obj = {}; Object.defineProperty(obj, 'cle', { enumerable: false, configurable: false, writable: false, value: 'valueValue', }); console.dir(obj); // obj.cle=55; // TypeError: "cle" is read-only </script> Avec « set » et « get » : accessor property descriptor. <script type="text/javascript"> "use strict"; // Littéral d'objet. var obj = {v:null}; Object.defineProperty(obj, 'cle', { enumerable: false, configurable: false, // writable: false, defineProperty, defineProperties - 9/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu // JavaScript Tome-V value: 'valueValue', set(newVal) { console.log("Dans « set »"); this.v = newVal; }, get() { console.log("Dans « get »"); return this.v; } }); console.dir("obj=",obj); console.dir("obj.cle=",obj.cle); console.dir("obj['cle']=",obj['cle']); console.log("obj.v = Date.now()=",obj.v = Date.now()); console.log("obj.v=",obj.v); // obj.cle=55; // TypeError: "cle" is read-only </script> Définition de descripteur via un callBack : <script type="text/javascript"> "use strict"; // descrFct est une fonction, // donc un objet, donc peut avoir defineProperty, defineProperties - 10/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V // des propriétés (ayant des descriptors). // // // // // // Cette fonction retourne l'objet « d » qui peut donc être (et l'est effectivement ici) utilisé comme descripteur (puisqu'il est à la position de descripteur en argument). // Littéral d'objet vide auquel on va // ajouter la propriété nommée 'cle' var obj = {}; const descrFct = function(p) { var d = // d = Variable locale « d » qui prend // l'adresse du descripteur de descrFct descrFct.d = { // .d = Descriptor dans descrFct enumerable: false, // Attributs de .d writable: false, configurable: false, value: "DUMMYneoDescrFct" }; console.log("*** d=",d); // Affiche d.value d.value = p; console.log("*** d=",d); // Affiche nvlle d.value return d; // Le descriptor de descrFct, // deviendra le descripteur de « cle » // qui deviendra ainsi une propriété. }; // Définition d'une nouvelle propriété via callBack Object.defineProperty(obj, 'cle', descrFct('valueValue')); // Fin Définition nouvelle propriété via callBack console.dir(`descrFct= `,descrFct); console.dir("obj=",obj); console.dir("obj.cle=",obj.cle); obj.cle=55; // TypeError: "cle" is read-only // pcq « writable = false » </script> defineProperty, defineProperties - 11/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Différence dans la création de propriété avec « assignation » (affectation directe) et par la « méthode defineProperty() » de l'objet transcendant Object : Avec la « méthode defineProperty() », les attributs « enumerable », « configurable », et « writable » ont la valeur « false ». Par affectation directe, ces attributs sont « true ». <script language="javascript"> "use strict"; const o = {}; var descriptor1 = Object.create(null); descriptor1.value = 'static'; o.key2 = "dynamic" Object.defineProperty(o, 'key1', descriptor1); // Valeurs par défaut du descripteur de key1 // créé avec "Object.defineProperty" : // value=undefined, not enumerable, not configurable, not defineProperty, defineProperties - 12/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V writable. // not writable => on ne peut pas modifier le descripteur /**/ console.dir(Object.getOwnPropertyDescriptors(o)); // Object // key1: { // value: "static", // writable: false, // enumerable: false, // configurable: false // } // // key2: { // value: "dynamic", // writable: true, // enumerable: true, // configurable: true // } /**/ console.dir(Object.getOwnPropertyNames(o)); // Array(2) // 0: "key2" // 1: "key1" // length: 2 o.key2 = "*** dynamic ***" // Valeurs par défaut des propriétés du descripteur de key2 // créé par affectation directe : // value=undefined, enumerable, configurable, writable. // writable => on peut modifier le descripteur /**/ console.dir(Object.getOwnPropertyDescriptors(o)); // Object // key1: { // value: "static", // writable: false, // enumerable: false, // configurable: false // } // // key2: { // value: "*** dynamic ***", // writable: true, // enumerable: true, defineProperty, defineProperties - 13/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu // // } JavaScript Tome-V configurable: true /**/// obj.key1 = 'static'; // test.html:135 - Uncaught TypeError: // Cannot assign to read only property 'key1' of // object '#<Object>' // Seulement les propriétés énumerables // seront listées ci-après. for (var i in o) { console.log(i); } // key2 console.log(Object.keys(o)); // ["key2"] console.log(o.propertyIsEnumerable('key1')); // false console.log(o.propertyIsEnumerable('key2')); // true </script> « value » apparaît seulement dans les « data descriptors », alors que « get » apparaît seulement dans les « accessor descriptors », les deux ne pouvant pas se retrouver ensemble. Si le descripteur n’a aucune des clés « value », « writable », « get » ni « set », il est traité comme « data descriptor ». Si le descripteur a les deux clés « value » ou « writable » et en même temps « get » ou « set », alors une exception est générée. Kinshasa, le 31 mai 2019 (6:26:20 PM). Mots-clés : defineProperty, defineProperties - 14/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Getter, Setter, get, set, this, inline, callback, accessor property descriptor, accessor, property, descriptor, descripteur, definegetter, definesetter, defineProperty, getOwnPropertyNames, javascript, ecmascript DIASOLUKA Nz. Luyalu Docteur en Médecine, Chirurgie & Accouchements (1977), CNOM : 0866 - Spécialiste en ophtalmologie (1980) Études humanités : Scientifique - Mathématiques & Physique. Informaticien-amateur, Programmeur et WebMaster. Chercheur indépendant, autonome et autofinancé, bénévole, sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte promotionnelle avec qui qu’il soit ou quelqu’organisme ou institution / organisation que ce soit, étatique, paraétatique ou privé, industriel ou commercial en relation avec le sujet présenté. +243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818 [email protected] Autre Lecture : https://www.scribd.com/document/374738470/Le-Plus-GrandSecret-de-La-Creation D’autres publications pouvant aussi intéresser : • https://www.scribd.com/document/377036251/LeDosage-Des-Medicaments-en-Cac-Cas defineProperty, defineProperties - 15/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V • https://www.scribd.com/document/377035454/LeHasard-Des-Thermometres-Non-contact-a-Infrarouge • https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript • https://www.scribd.com/document/376221919/La-Foien-Jesus-Christ-Pour-Quoi-Faire • https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire • https://www.scribd.com/document/375349851/Lavariable-This • https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS • https://www.scribd.com/document/374789297/FormatInterne-Des-Objets-JavaScript • https://www.scribd.com/document/374788758/Iterationsen-JavaScript • https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation • https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka • https://www.scribd.com/document/373847209/PropertyDescriptors • https://www.scribd.com/document/373833282/l-ObjetGlobal-Window • https://www.scribd.com/document/372665249/JavascriptTome-II • https://www.scribd.com/document/355291488/motiliteoculaire-2 • https://www.scribd.com/document/355291239/motiliteoculaire-I • https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs • defineProperty, defineProperties - 16/17 - vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V https://www.scribd.com/document/321168468/Renseigne ments-Id-et-Anthropometriques • https://www.scribd.com/document/320856721/Emission31-Jul-2016 • https://www.scribd.com/document/318182982/Complicati on-Visuelle-du-Traitement-de-La-Malaria • https://www.scribd.com/document/318180637/RapportEntre-Oxymetrie-Et-Type-Respiration • https://www.scribd.com/document/315746265/Classificati on-Des-Medicaments • https://www.scribd.com/document/315745909/Incongrue nces-Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire • https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration defineProperty, defineProperties - 17/17 - vendredi, 31. mai 2019