Object.defineProperties - JavaScript

publicité
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
Téléchargement
Random flashcards
amour

4 Cartes mariam kasouh

Commune de paris

0 Cartes Edune

Ce que beaucoup devaient savoir

0 Cartes Jule EDOH

découpe grammaticale

0 Cartes Beniani Ilyes

Fonction exponentielle.

3 Cartes axlb48

Créer des cartes mémoire