« Propriétés » - javascript tome xvi

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
J AVA S C R I P T (Programmation Internet) V O L . V I
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
CHAPITRE 11 : LES PROPRIÉTÉS:
On peut accéder aux propriétés d’un objet de plusieurs façons :
1
2
3
Par le nom de la propriété. entre guillemets dans des crochets
Par le nom de la propriété précédé d’un point
Par un index
<script type="text/javascript">
"use strict";
var dObj = {
couleur:"rose",
50: "Cinquante",
age:45,
[2]:function(){console.log("Hello")},
3: "Trois",
["quatre"]:function(){console.log("quatre")}
}
//
var dObj = new dObj();
console.log(dObj["couleur"])
console.log(dObj["50"])
console.log(dObj.age)
dObj[2]()
console.log(dObj[3])
dObj["quatre"]()
console.log("=====")
for(var i in dObj)console.log(i+". "+dObj[i])
console.log(Object.values(dObj))
console.log(">===<")
for(i in dObj)console.log(dObj[i])
</script>
Exécution :
rose
Cinquante
test.html:14:3
test.html:15:3
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
45
test.html:16:3
Hello
test.html:7:23
Trois
test.html:18:3
quatre
test.html:9:30
=====
test.html:20:3
2. function(){console.log("Hello")}
test.html:21:21
3. Trois
test.html:21:21
50. Cinquante
test.html:21:21
couleur. rose
test.html:21:21
age. 45
test.html:21:21
quatre. function(){console.log("quatre")}
test.html:21:21
Array [
dObj(), "Trois", "Cinquante", "rose", 45, dObj()
]
test.html:22:3
>===<
test.html:23:3
dObj()
length: 0
name: "2"
prototype: Object { … }
__proto__: function ()
test.html:24:17
Trois
test.html:24:17
Cinquante
test.html:24:17
rose
test.html:24:17
45
test.html:24:17
dObj()
test.html:24:17
length: 0
name: "quatre"
prototype: Object { … }
__proto__: function ()
Parcourir les éléments d’une collection / itération (array, object...) avec
un itérateur comme “ keys ”!
Object.keys -> function keys()
Array.prototype.keys -> function keys()
<script type="text/javascript"> "use strict";
let _arr = ['ally', 'belly', 'chore'];
let our_Aiterator = _arr.keys();
console.log(our_Aiterator); // Array Iterator { }
for (let i of our_Aiterator) {
console.log(i,_arr[i]); // 0 ally , 1 belly , 2 chore
}
let our_Aiterator2 = Object.keys(_arr);
console.log(our_Aiterator2); // Array [ "0", "1", "2" ]
Variables & Functions
- 2 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
for (let i of our_Aiterator2) {
console.log(i,_arr[i]); // 0 ally , 1 belly , 2 chore
}
let _obj =
{"5":'ally', b:'belly', 3:'chore', _obj:45};
// « let _obj » et « _obj:45 == _obj._obj=45 »
// ne partagent pas le mê me Name Space et
// n'interfê rent donc pas.
console.log(_obj);
// Object { 3: "chore", 5: "ally", b: "belly", _obj: 45 }
console.log(_obj._obj); // 45
let our_Oiterator = Object.keys(_obj);
console.log(our_Oiterator);
// Array [ "3", "5", "b", "_obj" ]
for (let i of our_Oiterator) {
console.log(i,_obj[i]);
// 3 chore , 5 ally , b belly , _obj 45
}
</script>
CHAPITRE 12 : LES PROPRIÉTÉS ET LEURS ATTRIBUTS:
Les propriétés sont des objets dont les propriétés sont leurs attributs.
Sur https://www.ecma-international.org/ecma-262/8.0 nous lisons ceci :
6.1.7.1 Property Attributes
Attributes are used in this specification to define and explain the state of
Object properties. A data property associates a key value with the attributes listed in Table 2.
Table 2: Attrib- Value Domain
utes of a Data
Property Attribute Name
Variables & Functions
- 3 / 14 -
Description
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
[[Value]]
Any
ECMAScript
language type
The value retrieved by a get access
of the property.
[[Writable]]
Boolean
If false, attempts by ECMAScript
code to change the property's [[Value]] attribute using [[Set]] will not
succeed.
[[Enumerable]] Boolean
If true, the property will be enumerated by a for-in enumeration (see
13.7.5). Otherwise, the property is
said to be non-enumerable.
[[Configurable]] Boolean
If false, attempts to delete the property, change the property to be an
accessor property, or change its attributes (other than [[Value]], or
changing [[Writable]] to false) will
fail.
Comme dit ci-dessus, [[value]] est la valeur que vous attribuez ou attendez de l’objet.
Une propriété ayant « false » comme valeur de l’attribut Enumerable
ne figurera pas dans la liste des propriété de l’objet, générée avec
for (var in object).
<script type="text/javascript"> "use strict";
// Dê finition de propriê tê lors de la crê ation
var obj = {nom:"nomEl",matr:45};
console.log(Object.getOwnPropertyDescriptors(obj));
// Object { nom: {…}, matr: {…} }
// {…}
//
matr: Object { value: 45, writable: true, enumerable:
true, … }
//
nom: Object { value: "nomEl", writable: true, enumerable: true, … }
// {…}
// matr: {…}
Variables & Functions
- 4 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
//
//
//
//
//
//
//
//
//
//
JavaScript Tome-VI
configurable: true
enumerable: true
value: 45
writable: true
nom: {…}
configurable: true
enumerable: true
value: "nomEl"
writable: true
console.log(obj["nom"], obj.matr);
nomEl
45
// [Re]Dê finition brê ve avec defineProperty
Object.defineProperty(obj, 'defProp', {
value: "definedProp" });
console.log(obj["nom"], obj['matr'], obj.matr,
obj.defProp);
//
nomEl
45
45
definedProp
console.log(Object.getOwnPropertyDescriptor(obj,"nom"));
// Object { value: "nomEl", writable: true, enumerable:
true, configurable: true }
// {…}
//
configurable: true
//
enumerable: true
//
value: "nomEl"
//
writable: true
console.log(Object.getOwnPropertyDescriptor(
obj,"defProp"));
// Object { value: "definedProp", writable: false, enumerable: false, configurable: false }
// {…}
//
configurable: false
//
enumerable: false
//
value: "definedProp"
//
writable: false
</script>
Ci-dessous, voici comment on peut manipuler ces attributs :
1er Définir une propriété : avec la méthode Object.defineProperty
Object.defineProperty([objet], [property-key], { value: [property-value] })
Variables & Functions
- 5 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
[] = à fournir.
2e Lire une ou les propriété(s) : .avec la méthode Object.getOwnPropertyDescriptors.
Object.getOwnPropertyDescriptors([objet])
On peut définir les propriétés d’un objet [et éventuellement les attributs de ces propriétés] de plusieurs façons ;
<script type="text/javascript"> "use strict";
// Donne aussi les valeurs par dê faut des attributs des
// propriê tê s selon les diffê rents modes de dê finition.
// Dê finition de propriê tê lors de la crê ation
var obj = {nom:"nomEl",matr:45};
// Dê finition directe de propriê tê ê partir
// du monde externe
obj['dirProp']="Direct Property";
// [Re]Dê finition brê ve avec defineProperty
Object.defineProperty(obj, 'defProp', { value: "definedProp" });
// Modê le de [Re]Dê finition ê tendue avec defineProperty
// mê canisme interne.
Object.defineProperty(obj, 'defPropX', { value: "definedProp Extended",
configurable: true });
console.dir("obj.nom=",obj.nom); // obj.nom= nomEl
console.dir("obj.matr=",obj.matr); // obj.matr= 45
console.dir("obj.dirProp=",obj.dirProp);
// obj.dirProp= Direct Property
// Au lieu des points on peut aussi utiliser
// des crochets.
console.dir("obj['defProp']=",obj.defProp);
// obj['defProp']= definedProp
console.dir("obj.defPropX=",obj.defPropX);
// obj.defPropX= definedProp Extended
////////////////////////////
///// Dê BUT GETTER et SETTER
////////////////////////////
Variables & Functions
- 6 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
// On peut aussi utiliser des getters et setters.
// EXEMPLE DE SETTER :
Object.defineProperty(obj, "prod", {
// "get" et "set" deviendront propriê tê s
// de la propriê tê "prod" de l'objet "obj".
get: function() {
let alias1 = this.nom;
let alias2 = this.matr;
return "obj.nom= "+alias1 + " , " +
"obj.matr="+alias2;
},
set: function(details) {
var detail = details.split(" ");
this.nom = detail[0];
this.matr = detail[1];
}
})
// Accê s ordinaire
console.dir("obj=",obj);
// obj=
//
Object { nom: "nomEl", matr: 45, dirProp: "Direct
Property", … }
//
{…}
//
defProp: "definedProp"
//
defPropA: "Affectation ordinaire, toujours possible!"
//
defPropX: "definedProp Extended"
//
dirProp: "Direct Property"
//
matr: "2018"
//
nom: "JavaScript"
//
prod: Getter & Setter
//
<get>: function get()
//
<set>: function set()
// Accê s par GETTER
console.dir("OBJ.PROD = : ",obj.prod);
// OBJ.PROD = : obj.nom= nomEl , obj.matr=45
// Appel de SETTER dê clenchê par l'affectation
// au SETTER "prod" de l'objet "obj", ce qui
// modifiera ici propriê tê s "nom" et "matr" de "obj"
obj.prod = "JavaScript 2018"
// nom deviendra "JavaScript"
// matr deviendra 2018
//////////////////////////
///// FIN GETTER et SETTER
//////////////////////////
Variables & Functions
- 7 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
obj.defPropA = "Affectation ordinaire, toujours possible!";
console.log(obj);
// Object { nom: "JavaScript", matr: "2018", dirProp: "Direct Property", defPropA: "Affectation ordinaire, toujours
possible!", … }
// {…}
// defProp: "definedProp"
// defPropX: "Affectation ordinaire, toujours possible!"
// defPropX: "definedProp Extended"
// dirProp: "Direct Property"
// matr: "2018"
// nom: "JavaScript"
// prod: Getter & Setter
// <get>: function get()
// <set>: function set()
console.log(Object.getOwnPropertyDescriptors(obj))
// Object { nom: {…}, matr: {…}, dirProp: {…}, defProp:
{…}, defPropX: {…}, prod: {…}, defPropA: {…} }
// {…}
//
defProp: Object { value: "definedProp", writable:
false, enumerable: false, … }
//
defPropA: Object { value: "Affectation ordinaire,
toujours possible!", writable: true, enumerable: true, … }
//
defPropX: Object { value: "definedProp Extended",
writable: false, enumerable: false, … }
//
dirProp: Object { value: "Direct Property", writable:
true, enumerable: true, … }
//
matr: Object { value: "2018", writable: true, enumerable: true, … }
//
nom: Object { value: "JavaScript", writable: true,
enumerable: true, … }
//
prod: Object { get: get(), enumerable: false, configurable: false, … }
/*
defProp: {…}
configurable: false
enumerable: false
value: "definedProp"
writable: false
defPropA: {…}
configurable: true
enumerable: true
value: "Affectation ordinaire, toujours possible!"
writable: true
defPropX: {…}
Variables & Functions
- 8 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
configurable: true
enumerable: false
value: "definedProp Extended"
writable: false
dirProp: {…}
configurable: true
enumerable: true
value: "Direct Property"
writable: true
matr: {…}
configurable: true
enumerable: true
value: 2018
writable: true
nom: {…}
configurable: true
enumerable: true
value: "JavaScript"
writable: true
prod: {…}
configurable: false
enumerable: false
get: function get()
set: function set()
*/
</script>
On peut aussi définir un getter et un setter directement dans le corps
de l’objet lors de la définition de cet objet :
<script type="text/javascript"> "use strict";
// Notez avec les virgules, que "get" et "set"
// sont propriê tê s de "obj".
var obj = {
libelle: 'Nom Produit',
prix: 2018,
get detailsProd() {
return {nomProd:this.libelle, prixProd:this.prix};
},
set detailsProd(name) {
var parts = name.split(" ");
this.libelle = parts[0];
Variables & Functions
- 9 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
this.prix = parts[1];
}
};
console.log("obj=",obj);
// obj=
// Object { libelle: "Nom Produit", prix: 2018, detailsProd: Getter & Setter }
// {…}
// detailsProd: Getter & Setter
// libelle: "ECMASCRIPT_2018"
// prix: "3USD"
console.log("obj.libelle=",obj.libelle);
// obj.libelle= Nom Produit
console.log("obj.prix=",obj.prix);
// obj.prix= 2018
// AFFECTER ou MODIFIER via le SETTER
console.log(obj.detailsProd = 'ECMASCRIPT_2018 10 USD');
// ECMASCRIPT_2018 10 USD
console.log("obj.libelle=",obj.libelle);
// obj.libelle= ECMASCRIPT_2018
console.log("obj.prix=",obj.prix);
// obj.prix= 10
console.log(obj.prix = "3USD");
// 3USD
console.log("obj.detailsProd=",obj.detailsProd);
// obj.detailsProd=
//
Object { nomProd: "ECMASCRIPT_2018", prixProd:
"3USD" }
// {…}
// nomProd: "ECMASCRIPT_2018"
// prixProd: "3USD"
// AVEC YANDEX
//test.html:21
obj= {libelle: "Nom Produit", prix: 2018}
// detailsProd: (...)
// libelle: "ECMASCRIPT_2018"
// prix: "3USD"
// get detailsProd: ƒ detailsProd ()
// set detailsProd: ƒ detailsProd (name)
// __proto__: Object
//test.html:29
obj.libelle= Nom Produit
//test.html:32
obj.prix= 2018
Variables & Functions
- 10 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
//test.html:35
ECMASCRIPT_2018 10 USD
//test.html:38
obj.libelle= ECMASCRIPT_2018
//test.html:41
obj.prix= 10
//test.html:44
3USD
//test.html:47
obj.detailsProd = {nomProd:
"ECMASCRIPT_2018", prixProd: "3USD"}
/* obj.detailsProd =
1er
A
B
C
{nomProd: "ECMASCRIPT_2018", prixProd: "3USD"}
nomProd:"ECMASCRIPT_2018"
prixProd:"3USD"
__proto__:Object
1er detailsProd:(...)
2e libelle:"ECMASCRIPT_2018"
3e prix:"3USD"
4e get detailsProd:ƒ detailsProd()
5th set detailsProd:ƒ detailsProd(name)
6e get detailsProd:ƒ detailsProd()
A
B
C
D
arguments:(...)
caller:(...)
length:0
name:"get detailsProd"
E
__proto__:ƒ ()
F
[[FunctionLocation]]:test.html:9
G
[[Scopes]]:Scopes[1]
I
0:Global {type: "global", name: "", object: Wi
ndow}
1st set detailsProd:ƒ detailsProd(name)
A
arguments:(...)
B
caller:(...)
C
length:1
D
name:"set detailsProd"
E
__proto__:ƒ ()
F
[[FunctionLocation]]:test.html:13
G
[[Scopes]]:Scopes[1]
I
0:Global {type: "global", name: "", object: Wi
ndow}
1er __proto__:Object
*/
</script>
« get » et « set » définissent deux fonctions « accessor » pour la propriété « detailsProd ».
Variables & Functions
- 11 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
1er Un getter ( « get detailsProd() » ) pour accéder à la valeur de la
propriété,
et
2e Un setter ( « set detailsProd(name) » pour affecter / modifier la valeur de la propriété)
N.B. : Les propriété ne peuvent avoir que soit des valeurs, soit des accesseurs (set et get) , jamais les deux à la fois.
Vous avez remarqué ci-dessus que le prix introduit était « 10 USD »,
mais que le USD n’a pas été retenu. Si vous voulez que le setter accepte des entrées avec des espaces, il suffit de changer le séparateur
« name.split(' ') » en « name.split(',') » et séparer deux entrées par une
virgule.
<script type="text/javascript"> "use strict";
// Notez avec les virgules, que "get" et "set"
// sont propriê tê s de "obj".
var obj = {
libelle: 'Nom Produit',
prix: 2018,
get detailsProd() {
return {nomProd:this.libelle, prixProd:this.prix};
},
set detailsProd(name) {
var parts = name.split(",");
this.libelle = parts[0];
this.prix = parts[1];
}
};
// AFFECTER ou MODIFIER
console.log(obj.detailsProd = 'ECMASCRIPT 2018 ES 8, 10
USD AMê RICAINS');
// ECMASCRIPT 2018 ES 8, 10 USD AMê RICAINS
console.log("obj.libelle=",obj.libelle);
Variables & Functions
- 12 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
// obj.libelle= ECMASCRIPT 2018 ES 8
console.log("obj.prix=",obj.prix);
// obj.prix= 10 USD AMê RICAINS
console.log("obj.detailsProd=",obj.detailsProd);
// obj.detailsProd=
//
obj.detailsProd=
// Object { nomProd: "ECMASCRIPT 2018 ES 8", prixProd: "
10 USD AMê RICAINS" }
// {…}
// nomProd: "ECMASCRIPT 2018 ES 8"
// prixProd: " 10 USD AMê RICAINS"
</script>
mardi, 2. octobre 2018 (12:06 ).
Variables & Functions
- 13 / 14 -
mardi, 2. octobre 2018 (12:06 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
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 - 995624714 - 902263541 - 813572818
[email protected]
Variables & Functions
- 14 / 14 -
mardi, 2. octobre 2018 (12:06 )