javascript tome vii - Les Objets

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
J AVA S C R I P T (Programmation Internet) V O L . V
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
CHAPITRE 5 : BREF APERÇU SUR LES OBJETS :
Les OBJETS en JS :
Les OBJETS sont un type de données (ensemble d’entités)
comportant leurs propres propriétés, méthodes et d’autres o bjets dont l’objet prototype. C’est une collection de données
(des paires de « clés [des « symboles »] auxquelles on a associé ou assigné des valeurs »).
TYPES SIMPLES en JS :
Un autre type de données que les objets est les PRIMITIVES (types simples vs objets [de haut-niveau]) :
Undefined, Null, Boolean (qui n’a que deux valeurs : true
ou false), Number (dont le NaN = Not A Number), String.
NOTE :
A primitive value is a datum that is represented directly at
the lowest level of the language implementation (ECMA-262
Edition 5.1) .
Quelques OBJECTS JS :
window | document | history | navigator | form
| ...
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Quelques TYPES d’Objects en JS :
Array | Boolean | Date | Error | Function | JSON
| Math | Number | Object | RegExp | String | Map
| Set | WeakMap | WeakSet | ...
Les OBJECTS JavaScript intrinsèques (built-in) possédant la méthode « valueOf() » :
Array
Boolean
Date
Function
Number
Object
String
Returns the array instance.
The Boolean value.
The stored time value in milliseconds since midnight, January 1, 1970 UTC.
The function itself.
The numeric value.
The object itself. This is the default.
The string value.
Les OBJECTS JavaScript intrinsèques (built-in) ne possédant pas la méthode « valueOf() » :
Math et Error.
Les objets JS (ci-dessus) ne sont pas objets DOM (cidessous) :
Anchor | document | Event | Form , Form Input |
Frame , Frameset , IFrame | Image | location |
navigator | Option et Select | Screen | Table ,
TableHeader , TableRow , TableData | window
Bref aperçu sur les objets
2 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Quelques comparaisons avec les objets :
var p = {}; // Définition Hash object.
>
>
>
>
>
p
p
p
p
p
==
==
==
==
==
0
-> false // p
null -> false // p
undefined -> false
"{}"
-> false
{} -> false // Deux
n'a pas la valeur zéro.
n'est pas null
// p n'est pas undefined
// p n'est pas string
pointeurs différents
Quatre façons de créer un objet en JS :
1
2
Avec un constructeur que vous créez (objet-fonction),
Par assignation d'un littéral (Hash Literal ou object literal = litté-
3
4
ral d’objet).
Avec l’objet Object.
Avec la méthode Object.create()
1. Création d’objet-fonction :
Avec une fonction « constructeur » (=gabarit=modèle).
Un constructeur est une fonction comme les autres mais qui permet avec
l’opérateur new la création ET l’initialisation simultanée de toutes ou
quelques propriétés du nouvel objet créé (Réciproquement une fonction
est un objet comme les autres).
<script type="text/javascript"> "use strict";
let bool = new Boolean(true);
console.log(bool.valueOf()); // true
console.log(typeof bool);
// object
let boolp1 = bool.toString();
console.log(boolp1);
// true
console.log(typeof boolp1);
// string
let boolp2 = toString(bool);
console.log(boolp2);
// [object Undefined]
console.log(typeof boolp2);
// string
console.log(boolp1==boolp2);
// false
Bref aperçu sur les objets
3 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
console.log(boolp1===boolp2);
</script>
// false
Comme avec une fonction, on peut accéder directement aux variables
globales d’un constructeur, sauf l’opérateur « this »
La fonction « constructeur » est invoquée avec l’opérateur « new » et
pas directement. Un appel du constructeur sans l’opérateur « new » fait
un simple appel à sa fonction sans instanciation (création d’instance).
Toute fonction « constructeur » doit donc être appelée avec l’opérateur
« new » qui retourne un nouvel objet.
Notez l’opérateur « this », le point-virgule « ; » pour terminer la définition des propriétés, et le signe égale « = » pour initialiser les propriétés.
Quant à l’opérateur « this », sa signification varie selon les contextes :
1. « this » dans un constructeur représente l’objet et permet de définir
ses propriétés et méthodes.
2. « this » dans une référence à une des propriétés de l’instance d’un
objet déjà créé représente cet objet.
3 « this » vaut undefined dans les appels de fonctions stricts.
4. « this » représente le contexte de l'objet si la fonction est appelée
comme une méthode,...).
5. Dans un élément HTML, il représente l’élément contenant.
6. Dans une fonction, il représente l’objet window en mode standard,
mais n’est pas reconnu en mode « use strict; ».
7. Dans l’espace globale, il représente l’objet window.
8. Dans le bloc de sa définition :
Bref aperçu sur les objets
4 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
a) Avant le début d’une création d’objet : l’objet window.
b) Dès le début de la création : l’objet en cours de création.
« this » dans un objet appelé comme fonction ordinaire en mode standard (non strict) :
<script type="text/javascript">
var dObj = function(){
console.log (this);
return this;
};
// Appel de dObj() comme fonction
dObj();
</script>
Exécution :
Window file:///K:/DADET/PROGS/test.html
Window
dObj: function dObj()
[default properties]
__proto__: WindowPrototype { … }
« this » dans un objet appelé comme fonction ordinaire en mode «use
strict»; :
<script type="text/javascript">
"use strict";
var dObj = function(){
console.log (this);
return this;
};
// Appel de dObj() comme fonction
dObj();
</script>
Exécution :
Bref aperçu sur les objets
5 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
undefined
JavaScript Tome-V
test.html:5:5
« this » dans un objet appelé comme fonction constructeur en mode
standard ou en mode «use strict»; :
<script type="text/javascript">
"use strict";
var dObj = function(){
console.log (this);
return this;
};
// Appel de dObj() fonction constructeur
// Instanciation de dObj()
var iObj = new dObj();
</script>
Exécution :
Object {
}
{}
__proto__: {…}
constructor: function dObj()
__proto__: Object { … }
« this » dans une fonction ordinaire contenant un object literal :
<script type="text/javascript">
console.log(this);
console.log("==> This ds Espace Global = ");
function obj_Constr(width, length) {
console.log("==> This ds obj_Constr = ");
console.log(this);
console.log("this = "+this);
return { // object literal
width: width || 0,
length: length || 0,
toString: function() {
console.log("==> This ds oConstr-objet-toString() =
");
Bref aperçu sur les objets
6 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
console.log(this);
console.log("this = "+this); /: too much recursion
return this.width + this.length;
//
}
};
}
var perim = obj_Constr(null,5);
console.log("Périmètre = " + perim.toString());
r=perim instanceof obj_Constr
console.log("perim instanceof obj_Constr = "+r);
console.log("perim instanceof obj_Constr = "+
eval(perim instanceof obj_Constr));
</script>
<body>
<input type="button"
onkeyup="console.log(this) ,
console.log('==> this = '+this)"
value="ivalue">
</body>
Exécution :
Window file:///H:/DADET/PROGS/this.html
==> This ds Espace Global =
==> This ds obj_Constr =
Window file:///H:/DADET/PROGS/this.html
this = [object Window]
==> This ds oConstr-objet-toString() =
Object { width: 0, length: 5, toString: toString() }
Périmètre = 5
perim instanceof obj_Constr = false
perim instanceof obj_Constr = false
<input onkeyup="console.log(this) ,\n
sole.log('==>
this
=
'+this)"
type="button">
this.html:1:1
==> this = [object HTMLInputElement]
convalue="ivalue"
Notez que « perim » n’est pas instance de « obj_Constr » car non créé
avec « new ».
Voici le même exemple où « perim » est créé avec « new » :
Bref aperçu sur les objets
7 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
<script type="text/javascript">
function obj_Constr(width, length) {
}
var perim = new obj_Constr(null,5);
r=perim instanceof obj_Constr;
console.log("perim instanceof obj_Constr = "+r);
console.log("perim instanceof obj_Constr = "+
eval(perim instanceof obj_Constr));
</script>
Exécution :
perim instanceof obj_Constr = true
perim instanceof obj_Constr = true
Ce code avec un Hash Object (voir plus loin) :
<script type="text/javascript">
console.log("This ds Espace Global = ");
console.log(this);
console.log("==>this = "+this);
var obj_Hash={
toString: function(width,length) {
width=5,
length=15,
console.log("this ds oConstr-objet-fSurf() = ");
console.log(this);
//
console.log("==>this = " + this); // too much recursion
return width + length;
}
}
var perim = obj_Hash.toString(null,5);
console.log("Périm = "+perim)
console.log("==>this = " + this);
console.log(this);
</script>
<body>
<input type="button" onkeyup="console.log(this),
console.log('==>this = '+this)"
value="ivalue">
</body>
Bref aperçu sur les objets
8 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Exécution :
This ds Espace Global =
Window file:///H:/DADET/PROGS/this.html
==>this = [object Window]
this ds oConstr-objet-fSurf() =
Object { toString: toString() }
Périm = 20
==>this = [object Window]
Window file:///H:/DADET/PROGS/this.html
<input
onkeyup="console.log(this),\n
console.log('==>this = '+this)" value="ivalue" type="button">
==>this = [object HTMLInputElement]
Les objets créés avec un constructeur ne peuvent s’utiliser directement,
et seules leurs instances sont manipulables.
<script type="text/javascript">
f=function(p){
// Constructeur
K=1000*3600*24*365.2475; // Notez les points-virgules.
this.nom="Object AVEC Constructor"; // Et l’opérateur =.
this.dn=p;
this.age=(new Date()-this.dn)/K;
}
v=new f(new Date("Aug 11 1953")); // new instancie.
console.log("f.nom="+f.nom);
console.log("f.dn="+f.dn);
console.log("f.age="+f.age+" ans.");
console.log("v.nom="+v.nom);
console.log("v.dn="+v.dn.toLocaleDateString());
console.log("v.age="+v.age+" ans.");
console.log("==> Ajout de propriétés via prototype");
f.prototype.num=Math.tan(Math.random()*
2*Math.PI*57.29577951 | 0);
console.log("f.num="+f.num+" * "+
"v.num="+v.num.toFixed(5));
console.log("<=> LISTE PROPRIÉTÉS DE L'OBJET f");
for (i in f) {
console.log(i+" * "+v[i]);
Bref aperçu sur les objets
9 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
}
console.log("<=> LISTE PROPRIÉTÉS DE L'INSTANCE v");
for (i in v) {
console.log(i+" * "+v[i]);
}
console.log("MODIFIER LA STRUCTURE DES OBJETS APRÈS LEUR
CRÉATION");
console.log("= Aspect dynamique de JS vs autres POO (Java
et C++)");
console.log("==> On peut AJOUTER DES PROPRIÉTÉS");
f.ec="Ecole";
console.log("f.ec="+f.ec+" * "+"v.ec="+v.ec);
v.rue="Rue";
console.log("f.rue="+f.rue+" * "+"v.rue="+v.rue);
v.ec="***Ecole";
console.log("*** f.ec="+f.ec+" * "+"v.ec="+v.ec);
console.log("==> On peut RETIRER DES PROPRIÉTÉ");
delete f.ec;
// Supprimer une propriété;
console.log("*** f.ec="+f.ec+" * "+"v.ec="+v.ec);
delete v.ec; // Supprimer une propriété;
console.log("*** f.ec="+f.ec+" * "+"v.ec="+v.ec);
//TypeError: v.prototype is undefined
// v.prototype.vp="Vprot";
// console.log("f.vp="+f.vp+" * "+"v.vp="+v.vp);
console.log("<=> LISTE PROPRIÉTÉS DE L'OBJET f");
for (i in f) {
console.log(i+" * "+v[i]);
}
console.log("<=> LISTE PROPRIÉTÉS DE L'INSTANCE v");
for (i in v) {
console.log(i+" * "+v[i]);
}
</script>
Exécution :
f.nom=undefined
f.dn=undefined
f.age=undefined ans.
v.nom=Object AVEC Constructor
v.dn=8/11/1953
Bref aperçu sur les objets
10 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
v.age=64.37741110058425 ans.
==> Ajout de propriétés via prototype
f.num=undefined * v.num=0.41036
<=> Liste des propriétés de l'objet f
<=> Liste des propriétés de l'instance v
nom * Object AVEC Constructor
dn * Tue Aug 11 1953 00:00:00 GMT+0100
age * 64.37741110058425
num * 0.41035651904814957
MODIFIER LA STRUCTURE DES OBJETS APRÈS LEUR CRÉATION = Aspect dynamique de JS vs autres POO (Java et C++)
==> On peut ajouter de propriétés
f.ec=Ecole * v.ec=undefined
f.rue=undefined * v.rue=Rue
*** f.ec=Ecole * v.ec=***Ecole
==> On peut retirer de propriétés
*** f.ec=undefined * v.ec=***Ecole
*** f.ec=undefined * v.ec=undefined
<=> Liste des propriétés de l'objet f
<=> Liste des propriétés de l'instance v
nom * Object AVEC Constructor
dn * Tue Aug 11 1953 00:00:00 GMT+0100
age * 64.37741110058425
rue * Rue
num * -2.7431651195920748
À l’instar des fonctions ordinaires, on peut accéder directement aux variables globales d’un objet construit avec un constructeur. En effet les
objets sont des fonctions de premier ordre (first-class functions) car
les fonctions sont traitées comme des objets et vice-versa :
En mode strict :
<script type="text/javascript">
"use strict";
var Fruit = function(){
// Variables ordinaires
window.couleur= "rouge";
window.poids= 50;
window.gfc = function(){
return "Functionning in Global"};
// Propriétés propres de l'objet
this.couleur="VERT"
this.poids=35
this.toString= function() {
Bref aperçu sur les objets
11 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
}
JavaScript Tome-V
return "couleur= " + couleur + ", poids= " + poids+
"\nwindow.couleur= " + window.couleur +
", window.poids= " + window.poids+
"\nthis.couleur= " + this.couleur +
", this.poids= " + this.poids;
};
var pomme=new Fruit();
console.log(pomme); // pomme (Fruit) = OBJET
console.log("==> "+pomme);
// Accès direct aux variables globales de fonction/objet
console.log("Globale couleur : " + couleur);
console.log("Globale poids : " + poids);
console.log("Globale fct : " + gfc);
console.log("Globale fct : " + gfc());
// Accès aux propriétés de l'objet vs fonction
console.log("pomme.couleur : " + pomme.couleur);
console.log("pomme.poids : " + pomme.poids);
// Appel à la méthode toString()
// Affiche pointeur et description
console.log(pomme.toString); // pomme.toString = FUNCTION
// Exécute la fonction : notez les ()
console.log(pomme.toString());
// Affiche pointeur sur fonction et description
console.log(pomme.__proto__.toString); // pomme.toString
FUNCTION
// Exécute la fonction : notez les ()
console.log(pomme.__proto__.toString());
</script>
Exécution avec YANDEX :
Fruit {couleur: "VERT", poids: 35, toString: ƒ}
couleur:"VERT"
poids:35
toString:ƒ ()
__proto__:Object
==> couleur= rouge, poids= 50
Bref aperçu sur les objets
12 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
window.couleur= rouge, window.poids= 50
this.couleur= VERT, this.poids= 35
Globale couleur : rouge
Globale poids : 50
Globale fct : function (){
return "Functionning in Global"}
Globale fct : Functionning in Global
pomme.couleur : VERT
pomme.poids : 35
ƒ () {
return "couleur= " + couleur + ", poids= " + poids+
"\nwindow.couleur= " + window.couleur +
", window.poids= " + window.poids+
"\nthis.couleur= " + this.coul…
couleur= rouge, poids= 50
window.couleur= rouge, window.poids= 50
this.couleur= VERT, this.poids= 35
ƒ toString() { [native code] }
[object Object]
En mode standard (non strict) :
Le mode standard est plus tolérant et permet de supprimer tout ce qui et
en /* commentaire */ mais il est préférable de les laisser pour faciliter la
transition vers le mode strict.
<script type="text/javascript">
// "use strict";
/*var*/ Fruit = function(){
// Variables ordinaires
/*window.*/ couleur= "rouge";
/*window.*/ poids= 50;
/*window.*/ gfc = function(){
return "Functionning in Global"};
// Propriétés propres de l'objet
this.couleur="VERT"
this.poids=35
this.toString= function() {
return "couleur= " + couleur + ", poids= " + poids+
"\nwindow.couleur= " + window.couleur +
", window.poids= " + window.poids+
"\nthis.couleur= " + this.couleur +
", this.poids= " + this.poids;
}
Bref aperçu sur les objets
13 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
}
/*var*/ pomme=new Fruit();
console.log(pomme); // pomme (Fruit) = OBJET
console.log("==> "+pomme);
// Accès direct aux variables globales de fonction/objet
console.log("Globale couleur : " + couleur);
console.log("Globale poids : " + poids);
console.log("Globale fct : " + gfc);
console.log("Globale fct : " + gfc());
// Accès aux propriétés de l'objet vs fonction
console.log("pomme.couleur : " + pomme.couleur);
console.log("pomme.poids : " + pomme.poids);
// Appel à la méthode toString()
// Affiche pointeur sur fonction et description
console.log(pomme.toString); // pomme.toString FUNCTION
// Exécute la fonction : notez les ()
console.log(pomme.toString());
// Affiche pointeur sur fonction et description
console.log(pomme.__proto__.toString); // pomme.toString
FUNCTION
// Exécute la fonction : notez les ()
console.log(pomme.__proto__.toString());
</script>
Exécution identique avec FIREFOX :
Object
{
couleur:
"VERT",
Fruit/this.toString() }
poids:
35,
toString:
{…}
couleur: "VERT"
poids: 35
toString: function Fruit/this.toString()
__proto__: Object { … }
==> couleur= rouge, poids= 50
window.couleur= rouge, window.poids= 50
this.couleur= VERT, this.poids= 35
Globale couleur : rouge
Bref aperçu sur les objets
14 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Globale poids : 50
Globale fct : function(){
return "Functionning in Global"}
Globale fct : Functionning in Global
pomme.couleur : VERT
pomme.poids : 35
Fruit/this.toString()
arguments: null
caller: null
length: 0
name: ""
prototype: Object { … }
__proto__: function ()
function Fruit/this.toString()
couleur= rouge, poids= 50
window.couleur= rouge, window.poids= 50
this.couleur= VERT, this.poids= 35
function toString()
toString()
length: 0
name: "toString"
__proto__: function ()
[object Object]
Note :
1) Seuls les propriétés propres de l’objet (Fruit) sont affichés dans la
description de l’objet, pas les variables ordinaires.
2) La définition des propriétés this.couleur et this.poids n’a pas écrasée
la définition antérieure des variables locales de même nom (couleur et
poids).
Mnémonique :
Considérez
que
le
this.
dans
« this.nom_de_la_propriété » fait partie du nom complet de la propriété, puisque c’est ainsi qu’on va se référer partout à cette propriété.
Bref aperçu sur les objets
15 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Appel comme fonction ordinaire du constructeur d’un objet :
<script type="text/javascript">
var Fruit = function(n,s){
// Variables ordinaires
couleur= "rouge";
poids= 50;
// Propriétés propres de l'objet
this.couleur="VERT"
this.poids=35
// Ds [ this.toString= function() { ] ci-dessous
// n est directement argument du constructeur
this.toString= function() {
if(n==1) return 1;
else return n * this.toString(n--);
}
console.log("Appel via "+s)
};
// Appel d'un objet comme CONSTRUCTEUR (new)
pomme=new Fruit(10 , "CONSTRUCTEUR");
// Appel direct de la méthode toString locale
console.log(pomme.toString("MÉTHODE"));
////////
// Appel d'un objet comme fonction ORDINAIRE
Fruit(null , "ORDINAIRE");
</script>
Exécution :
Notez ici que la méthode « toString » a été assignée à calculer plutôt
une valeur mathématique : une FACTORIELLE.
Appel via CONSTRUCTEUR
3628800
Appel via ORDINAIRE
II. CRÉATION D’OBJETS :
Bref aperçu sur les objets
16 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
1. Création d’objet par assignation d'un littéral (Hash Literal) :
Une chaîne littérale (object literal = littéral d’objet = chaîne pour objet)
= objet écrit comme valeur d’une variable en utilisant les accolades { et }
comme délimiteurs de l’objet.
Implémenté avec seulement les accolades = object literal (littéral
d’objet) Ce genre d’objets n’a pas de prototype et ne permet pas
d’instanciation (il est lui-même sa propre instance, unique = singleton).
Il permet toutefois comme pour tout objet, la création d’alias (pointeurs
pointant sur un même objet).
Prevue : Prototype de l’objet hash (object literal dans la console) :
var x = { y:1 , z:"texte" };
Nous voyons dans la console à partir de son prototype que son constructeur est la fonction Object() (avec O majuscule) :
x => {y: 1, z: "texte"}
1 {y: 1, z: "texte"}
A
B
C
y:1
z:"texte"
__proto__:
I
constructor:ƒ Object()
II
hasOwnProperty:ƒ hasOwnProperty()
III
isPrototypeOf:ƒ isPrototypeOf()
IV
propertyIsEnumerable:ƒ propertyIsEnumerable()
V
toLocaleString:ƒ toLocaleString()
VI
toString:ƒ toString()
VII
valueOf:ƒ valueOf()
VIII
__defineGetter__:ƒ __defineGetter__()
IX
__defineSetter__:ƒ __defineSetter__()
X
__lookupGetter__:ƒ __lookupGetter__()
XI
__lookupSetter__:ƒ __lookupSetter__()
XII
get __proto__:ƒ __proto__()
XIII
set __proto__:ƒ __proto__()
Donc même un objet Hash est en fait une fonction.
Bref aperçu sur les objets
17 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Il peut aussi être enrichi de nouvelles propriétés et méthodes et voir ses
propriétés supprimés. Par défaut, elle ne retourne rien, vous devez éventuellement vous-même spécifier ce qu’elle doit retourner, et « this » ne
représente pas ici l’objet en cours de création..
Propriétés et méthodes séparées par une virgule, propriétés et valeurs
séparés par un double-point, pas d’opérateur this. La définition des méthodes (fonctions) obéit aux règles des fonctions.
<script type="text/javascript">
var f={
// Notez les « dbl-pts » et les « virgs »
nom:"OBJET PAR ASSIGNATION D'UN LITTÉRAL",
age:(function(){ // Bloc de méthode.
var p=new Date(1953,7,11);
var K=1000*3600*24*365.2475;// Notez les « ; ».
return (new Date()-p)/K
})(), // Jamis de points-virgule d'anonyme.
vieux:{age:45} // objet comme valeur de propriété.
}
// v=new f(); // TypeError: f is not a constructor.
// v=new f; // TypeError: f is not a constructor.
v=f; // Création d'alias.
console.log(f.nom+"\n"+v.nom);
console.log(f.age+" ans.\n"+v.age);
s=f.age >f.vieux.age ? "VIEILLARD":"JEUNE";
console.log(s);
s=v.age >v.vieux.age ? "VIEILLARD":"JEUNE";//alias
console.log(s);
// Affichage de l'objet initial
console.log(f);
console.log(v);
console.log("f="+f+"\n"+"v="+v);
// Enrichissement de l'objet via son alias
v.ec="Ecole"; // alias
console.log("f.ec="+f.ec+"\n"+"v.ec="+v.ec);
// Enrichissement direct de l'objet
f.uc="université"; // alias
console.log("f.uc="+f.uc+"\n"+"v.uc="+v.uc);
// Affichage de l'objet
Bref aperçu sur les objets
18 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
console.log(f);
console.log(v);
console.log("f="+f+"\n"+"v="+v);
// HASOWNPROPERTY()
console.log("***** HASOWNPROPERTY()");
r=v.hasOwnProperty("nom")
console.log('v.hasOwnProperty("nom")'+r);
r=f.hasOwnProperty("ec")
console.log("f.hasOwnProperty('ec')"+r);
r=v.hasOwnProperty("toString")
console.log('v.hasOwnProperty("toString")'+r);
// Suppression d'une propriété
delete v.ec;
console.log("f.ec="+f.ec+"\n"+"v.ec="+v.ec);
// Affichage de l'objet fiinal
console.log(f);
console.log(v);
console.log("f="+f+"\n"+"v="+v);
</script>
Exécution :
OBJET PAR ASSIGNATION D'UN LITTÉRAL
OBJET PAR ASSIGNATION D'UN LITTÉRAL
64.39170476874763 ans.
64.39170476874763
VIEILLARD
VIEILLARD
Object { nom: "OBJET PAR ASSIGNATION D'UN LITTÉRAL", age:
64.39170476874763, vieux: {…} }
Object { nom: "OBJET PAR ASSIGNATION D'UN LITTÉRAL", age:
64.39170476874763, vieux: {…} }
f=[object Object]
v=[object Object]
f.ec=Ecole
v.ec=Ecole
f.uc=université
v.uc=université
Object { nom: "OBJET PAR ASSIGNATION D'UN LITTÉRAL", age:
64.39170476874763, vieux: {…}, ec: "Ecole", uc: "université" }
Object { nom: "OBJET PAR ASSIGNATION D'UN LITTÉRAL", age:
64.39170476874763, vieux: {…}, ec: "Ecole", uc: "université" }
f=[object Object]
Bref aperçu sur les objets
19 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
v=[object Object]
***** HASOWNPROPERTY()
v.hasOwnProperty("nom")true
f.hasOwnProperty('ec')true
v.hasOwnProperty("toString")false
f.ec=undefined
v.ec=undefined
Object { nom: "OBJET PAR ASSIGNATION D'UN LITTÉRAL", age:
64.39170476874763, vieux: {…}, uc: "université" }
Object { nom: "OBJET PAR ASSIGNATION D'UN LITTÉRAL", age:
64.39170476874763, vieux: {…}, uc: "université" }
f=[object Object]
v=[object Object]
2. Création d’objet avec l’objet générique Object et l’opérateur new :
On utilise le constructeur incorporé (function-méthode) de l’objet générique Object, et l’opérateur new. Crée une instance unique, à l’instar
d’un littéral d’objet.
<script type="text/javascript"> "use strict";
const K=1000*3600*24*365.2475;
//
var
var
var
Création d'instance unique d'objet.o = new Object();
o2 = new Object();
o3 = new Object();
// Toutes les propriétés, définies en dehors
o.nom = "KIBINDA'NKOYE";
o.dn = new Date("Aug 1953 11")
o.age=function(){return (new Date()-o.dn)/K};
console.log(o.nom+" : Age = "+o.age().toFixed(2)+" ans.");
// KIBINDA'NKOYE : Age = 64.55 ans.
// Il n'a pas de prototype.
console.log(o.prototype) // undefined
//
// Mais on peut lui définir directement un
// prototype VIDE.
function
newprotot(){
this.fct=function(){return
Date()}};
o.prototype=newprotot;
o.prototype.pnom="Dance";
console.log(o.prototype) // function newprotot()
console.log(Object.getOwnPropertyNames(o.prototype))
Bref aperçu sur les objets
20 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
// Array [ "pnom", "prototype", "length", "name" ]
console.log(o.prototype.fct); // undefined
// Une fonction associée à un prototype peut aussi
// être appelée comme n'importe quelle autre fonction.
let dum=new newprotot()
console.log(dum.fct());
// Wed Feb 28 2018 07:54:50 GMT+0100 (Paris, Madrid)
console.log("==========");
// On peut aussi lui en définir un indirectement,
// toujours vide, via le « Object.setPrototypeOf ».
// Notez : la fonction fct des newprotot est ignorée.
let newprotot2=function (){
this.fct=function(){return Math.PI}};
// NOTEZ QUE LE RÉSULAT VARIE SELON QUE L'ON
// UTILISE setPrototypeOf AVEC OU SANS new.
Object.setPrototypeOf(o2, newprotot2);
console.log(Object.getOwnPropertyNames(o2))
// Array []
console.log(o2.prototype) // Object { … }
console.log(o2.fct)
// undefined
console.log("==========");
Object.setPrototypeOf(o3, new newprotot2);
console.log(Object.getOwnPropertyNames(o3))
// Array []
console.log(o3.prototype) // undefined
console.log(o3.fct())
// 3.141592653589793
</script>
Exécution :
KIBINDAKOYE : Age = 64.37283049358591 ans.
obj_with_Object.html:11:2
Ce genre d’objets de l’objet Object sont initialement vides (prototype =
objet = vide, sans propriétés ni méthodes, c’est à vous de l’achalander :
Rappelez-vous qu’une fonction est implicitement un objet de première
classe. Mais aussi qu’un objet est une fonction à part entière.
Bref aperçu sur les objets
21 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
3. Création d’objet avec l’objet Function et l’opérateur new :
Crée aussi une instance unique, à l’instar d’un littéral d’objet et la création avec new Object.
<script model="text/javascript"> "use strict";
let Specs = new Function();
Specs.model = "Soyouz";
Specs.color = "bleu";
Specs.dispInfo = dispSpecsInfo_=> 'Fusée '+Specs.model+"
"+Specs.color;
Specs.color = "rubisoï de"; // On redéfinit color
console.log(Specs.dispInfo());
// Fusée Soyouz
bisoï de
</script>
ru-
4. Création d’objet avec une fonction anonyme et l’opérateur new :
Ne peut créer qu’une instance unique d’objet.
<script model="text/javascript"> "use strict";
let specs = new function () {
// Définit une fonction anonyme constructeur
// (anonymous constructor function)
// et affectation à specs via « new ».
this.color = "bleu";
this.dispInfo
=
dispSpecsInfo_=>
'+this.model+" "+this.color;
}
'Fusée
specs.model = 'Soyouz'; // On redéfinit model
specs.color = "turquois"; // On redéfinit color
console.log(specs.dispInfo());
// Fusée Soyouz turquois
</script>
Passons maintenant à la création d’un nouvel objet à partir d’une expression ordinaire de fonction, sans l’opérateur new :
Bref aperçu sur les objets
22 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
<script model="text/javascript"> "use strict";
let Specs = function (model) {
this.model = model;
this.color = "bleu";
this.dispInfo
=
_=>
'Fusée
'+this.model+"
"+this.color;
}
let specs=new Specs('Soyouz');
specs.color = "beige"; // On redéfinit color
console.log(specs.dispInfo());
// Fusée Soyouz beige
</script>
Exemple plus complexe :
<script type="text/javascript">
var v = 25;
function dObj(){
console.log(v); // v globale
console.log(window.v); // v globale.
}
// Instanciation (Pointeur = adresse).
var iObj = new dObj();
// Propriété non définie ds le constuctor dObj
console.log(iObj.v);
// Ajout direct de méthode.
iObj.f=function f(){
console.log("Insiding iObj...");
}
// Ajout de méthode ds constuctor avec __proto__.
iObj.__proto__.fps=function() {
console.log("__proto__ing iObj...");
}
// Ajout de méthode à l'instance avec prototype.
// TypeError: Cannot set property 'fp' of undefined
/////
iObj.prototype.fp=function() {
/////
console.log("prototyping...");
/////
}
// Ajout de méthode à constuctor avec prototype.
Bref aperçu sur les objets
23 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
dObj.prototype.fp=function() {
console.log("prototyping dObj...");
}
iObj.f(); // Appel de méthode ajoutée.
iObj.fps(); // Appel de méthode ajoutée.
iObj.fp(); // Appel de méthode ajoutée.
</script>
Exécution :
25
25
Undefined
Insiding iObj...
__proto__ing iObj...
prototyping dObj...
test.html:6:6
test.html:7:6
test.html:14:2
test.html:18:11
test.html:23:11
test.html:34:11
Tentative de Création d’un nouvel objet à partir d’une fonction ordinaire,
sans l’opérateur new : Cela n’est ni plus ni moins un appel de fonction.
L’opérateur « new » indique d’appeler un constructeur pour
l’instanciation d’un objet.
En fait, sans l’opérateur new la fonction reste ordinaire.
<script type="text/javascript">
"Use strict";
v = 25; // Variable globale.
// Déclaratio/définition d’un nouvel objet.
dObj = function(){
console.log(this.v)
}
// Appel de fonction, pas intanciation.
iObj = dObj();
</script>
Exécution :
25
Bref aperçu sur les objets
24 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Voyons maintenant ceci :
<script type="text/javascript">
"use strict";
var v = 25;
var dObj = function(){
var v = 100; // variable locale
var f=(function(){ // Fonction locale
console.log("Insiding...")
})();
console.log(v); // v locale
console.log(window.v); // v globale.
}
var iObj = dObj();
// THE ERROR LAYS HERE //
// Uncaught TypeError: Cannot read property 'v'
// of undefined at this.html:19 [YANDEX]
console.log(iObj.v); // v locale à la fonction dObj.
// And Here too. TypeError:
// iObj is undefined
[FIREFOX]
// Uncaught TypeError:
// Cannot read property 'f' of undefined [YANDEX]
iObj.f(); // f aussi locale à la fonction dObj.
</script>
Exécution :
Insiding...
100
25
TypeError: iObj is undefined
test.html:8:12
test.html:10:7
test.html:11:7
test.html:19:2
Comment pallier à cela :
<script type="text/javascript">
"use strict";
var v = 25;
var dObj = function(){
this.v = 100; // propriété
Bref aperçu sur les objets
25 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
}
JavaScript Tome-V
this.f=function(){ // Méthode
console.log("Insiding...")
};
console.log(v); // v globale = 25
console.log(window.v); // v globale.
// instanciations
var iObj1 = new dObj();
var iObj2 = new dObj();
// v et f, propriétés héritées de dObj.
console.log(iObj1.v);
iObj1.f();
// Ajout de propriété (via prototype)
dObj.prototype.fp = function() {
console.log("In iObj1.prototype.fp()");
}
iObj1.fp(); // f aussi propriété de dObj.
iObj2.fp(); // f aussi propriété de dObj.
</script>
Exécution :
25
25
25
25
100
Insiding...
In iObj1.prototype.fp()
test.html:10:7
test.html:11:7
test.html:10:7
test.html:11:7
test.html:19:3
test.html:8:12
test.html:24:7
Nous constatons qu’avec l’opérateur « new », le constructeur affiche
« undefined », alors que sans le « new » le constructeur affiche la
valeur de la variable globale v = 25 ;
Tout ça rime avec quoi ?
Si vous instanciez averc l’opérateur « new », le constructeur dObj est
traité comme un objet tout fait, et l’opérateur « this » désigne le constructeur (la fonction de base ou gabarit, modèle).
Bref aperçu sur les objets
26 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Si vous instanciez sans l’opérateur « new », le constructeur dObj est
traité comme une fonction, et l’opérateur « this » se rapporte à
l’environnement (espace) global dans lequel la variable v a la valeur 25.
Exemple plus clair :
<script type="text/javascript">
function Agent(pTit){
this.titre = pTit;
// this = global (window)
}
function getName(){
console.log(this.titre);
// this réfère window.
}
// Initialise window.titre
Agent("Ekebekele");
//Affiche window.titre
getName();
// Accès explicite à window.titre
console.log(window.titre);
</script>
Exécution :
Ekebekele
Ekebekele
this.html:8:5
this.html:19:1
.!. Attention .!.
En passant, rappelons que si vous utilisez le pragma « "use strict"; »
vous devez modifier votre code comme ceci :
<script type="text/javascript">
"use strict";
window.v = 25;
Bref aperçu sur les objets
27 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
var dObj = function(){
console.log(window.v)
}
var iObj = dObj();
</script>
ou comme ceci :
<script type="text/javascript">
"use strict";
var v = 25;
var dObj = function(){
console.log(window.v)
}
var iObj = dObj();
</script>
Comment accéder aux propriétés et méthodes d’un objet quand le pragma ou directive "use strict"; a été utilisé ?
<script type="text/javascript">
"use strict";
var v = 25;
function dObj(){
this.v = 100;
console.log(v); // v locale
console.log(window.v); // v globale.
}
var iObj = new dObj(); // Instanciation.
// Accè à la propriété locale
console.log(iObj.v);
// Ajout de méthode.
iObj.f=function f(){
console.log("Insiding...");
}
iObj.f("Insideing"); // Appel de méthode.
</script>
Bref aperçu sur les objets
28 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Exécution :
25
25
100
Insiding...
4. Création d’objet avec la méthode Object.create :
On peut partir de zéro ou d’un objet parent (constructeur) existent :
« Object.creatre », à partir de rien :
<script type="text/javascript">
"use strict";
var pilipili = Object.create(
{}
);
pilipili.couleur = "rouge";
pilipili.prix = 2;
pilipili.descr=function(){
return this.couleur+" = "+this.prix+" USD"
}
console.log(Object.values(pilipili));
console.log(pilipili.descr());
console.log(Object.values(["texte", 5, {}, _=>{}]));
// Mais voyez ceci :
console.log(Object.values("pili^2"));
// Et aussi ceci :
console.log(Object.entries("pili^2"));
</script>
Exécution avec FIREFOX :
Array [ "rouge", 2, pilipili.descr() ]
rouge = 2 USD
Bref aperçu sur les objets
29 / 40
test.html:14:7
test.html:15:7
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Array [ "texte", 5, {}, () ]
Array [ "p", "i", "l", "i", "^", "2" ]
Array [ […], […], […], […], […], […] ]
[…]
0: Array [ "0", "p" ]
1: Array [ "1", "i" ]
2: Array [ "2", "l" ]
3: Array [ "3", "i" ]
4: Array [ "4", "^" ]
5: Array [ "5", "2" ]
length: 6
__proto__: Array []
test.html:16:2
test.html:19:7
test.html:22:7
Exécution avec YANDEX :
(3) ["rouge", 2, ƒ]
0: "rouge"
1: 2
2: ƒ ()
length: 3
__proto__: Array(0)
test.html:14
rouge = 2 USD
test.html:15
(4) ["texte", 5, {…}, ƒ]
0: "texte"
1: 5
2: {}
3: _=>{}
length: 4
__proto__: Array(0)
test.html:16
(6) ["p", "i", "l", "i", "^", "2"]
0: "p"
1: "i"
2: "l"
3: "i"
4: "^"
5: "2"
length: 6
__proto__: Array(0)
test.html:19
6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
test.html:22
1
0:(2) ["0", "p"]
2
1:(2) ["1", "i"]
3
2:(2) ["2", "l"]
Bref aperçu sur les objets
30 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
4
5
6
7
8
JavaScript Tome-V
3:(2) ["3", "i"]
4:(2) ["4", "^"]
5:(2) ["5", "2"]
length:6
__proto__:Array(0)
« Object create », à partir d’un objet (constructeur) pré-existent :
<script type="text/javascript"> "use strict";
// Création dun constructeur avec
// un literal d'objet (object literal).
let Yeux = {
oeil:{
couleur:"bleu",
diamètre:"25 mm"
}
}
// object literal avec "oeil" comme
// propriété du prototype.
// "oeil" étant un objet, est
// automatiquement considérée comme
// une propriété du prototype.
// Ctéation d'instances :
let Pierre = Object.create (Yeux);
let Louis = Object.create (Yeux);
console.log(Pierre.oeil.couleur);
console.log(Louis.oeil.couleur);
console.log(Pierre.oeil.diamètre);
console.log(Louis.oeil.diamètre);
//
//
//
//
bleu
bleu
25 mm
25 mm
//
//
//
//
bleu
bleu
30 mm
30 mm
Louis.oeil.diamètre = "30 mm";
console.log(Pierre.oeil.couleur);
console.log(Louis.oeil.couleur);
console.log(Pierre.oeil.diamètre);
console.log(Louis.oeil.diamètre);
Louis.oeil={
couleur : "marron",
Bref aperçu sur les objets
31 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
diamètre : "30 mm"
}
console.log(Pierre.oeil.couleur);
console.log(Louis.oeil.couleur);
console.log(Pierre.oeil.diamètre);
console.log(Louis.oeil.diamètre);
//
//
//
//
bleu
marron
30 mm
30 mm
</script>
La méthode « Object.create » peut être créée ou recréée (polyfill)
comme suit au cas où votre navigateur ne la posséderait pas :
if (!Object.create) {
Object.create = (function(o) {
function F(){};
return function(o) {
if(arguments.length != 1) {
throw new Error(’Objet.create implementation ’+
’only accepts one parameter.’);
}
}
})();
F.prototype o;
return new F();
}
Explications et démonstration :
Nous allons utiliser ce polyfill de façon inconditionnelle en désactivant
la ligne « if (!Object.create) {} »
<script type="text/javascript"> "use strict";
// if (!Object.create) { // => Exécution inconditionnelle
// Si l'Objet-ancêtre « Object » ne possède pas dans
// votre navigateur la méthode « create » ...
//===========================================
// Définitio d'une méthode create pour Objet,
// parent de tous les autres objets.
Bref aperçu sur les objets
32 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
// La méthode « Object.create() » acceptera son
// premier paramètre sous le nom « o ».
Object.create = (function(o) {
console.log("***** HIC *****");
// Juste pour nous assurer que
// cette nouvelle définition exécute bel et bien,
// nous lui avons collé cet « alert » bidon.
// Nous sommes maintenant en pleine création de
// la méthode « Object.create() »
// Nous y déclarons/définissons une autre fonction,
// la fonction « F() », vide, (elle-même méthode de
// la méthode « Object.create() »
function F(){};
//
//
//
//
Notre méthode « Object.create() » retournera le
résultat de l'exécution d'une fonction anonyme
qui prend comme paramètre le nom du nouvel objet
que nous voulons créer.
return function(o) {
//
//
//
//
Cette fonction retourneé prend et ne prend
que un seul paramètre, le nom de l'objet à
créer, sinon stop et génération de
message d'erreur.
if(arguments.length != 1) {
throw new Error('Objet.create implementation '+
'only accepts one parameter.');
}
// Si la condition ci-dessus a été remplie,
// alors on défnit un prototype pour la
// fonction/objet F() créée vide ci-haut.
F.prototype = o;
// La fonction/objet F() a maintenant un
// prototype, la foncton passée en argument
// au moment de l'appel à la
// méthode « Object.create() ».
// On retourne le nouvel objet F(),
// créé vide ci-dessus et ayant maintenant
// comme prototype, la fonction que nous
Bref aperçu sur les objets
33 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
// avons passée en argument.
return new F();
}
})();
//===========================================
// }
let Yeux = {
oeil:{
couleur:"bleu",
diametre:"25 mm"
}
}
let nOb = Object.create(Yeux);
// Ici, l'objet « Yeux » est le prototype
// du nouvel objet à créer, « nOb ».
console.dir(Yeux);
// Object { oeil: {…} }
test.html:78:1
//
// {…}
// oeil: Object { couleur: "bleu", diametre: "25 mm" }
// <prototype>: Object { … }
test.html:78:1
console.dir(nOb);
// Object { }
test.html:84:1
// {}
// <prototype>: Object { oeil: {…} } test.html:84:1
//
// {}
// <prototype>: {…}
//
oeil: Object { couleur: "bleu", diametre: "25 mm" }
//
<prototype>: Object { … }
test.html:84:1
</script>
Remarque :
L’instruction « let nOb = Object.create (Yeux); » ne crée en fait pas une
instance (fils ou descendant) de « Yeux », mais un tout nouvel objet
(« F ( ) ») qui a l’objet « Yeux » comme prototype, partageant de toutes
façons les mêmes propriétés que lui (« F ( ) ») via lui comme prototype.
Bref aperçu sur les objets
34 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
5. MISCELLANEOUS avec tous le types d’objets en un seul :
<script type="text/javascript">
cl=console.log;
// CONST CONST CONST CONST
// objet - constructeur
function Obj(oPdn,fct){
// objet dans une variable qui devient objet;
var dn = new Date(oPdn.j + oPdn.m + oPdn.a);
age_calc = new Date()-dn
// NEW NEW NEW NEW NEW NEW
// objet avec new Object
// objet-méthode du constructeur Obj
this.O_age = new Object();
// Méthode d'une méthode
this.O_age.disp_age = function(p){
return age_calc/fct()+" ans.";
};
}
// HASH HASH HASH
// objet Hash, argument vers le constructeur Obj.
var odn = {j:11 , m:"Aug" , a:1953}
// objet Hash et fonction cô arguments vers construct.
var iObj = new Obj(
odn , function() {return 3.6e6*24*365.2475});
cl("==> Age = " + iObj.O_age.disp_age());
</script>
Exécution :
==> Age = 64.39418192049759 ans.
Ajout de propriétés à un objet :
Voir ci-haut.
Bref aperçu sur les objets
35 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Accès aux propriétés d’un objet :
On peut le faire avec différentes syntaxes :
● instance.propriété
● instance[indice]
● instance["propriété"]
<script type="text/javascript">
lobjet = function(){
this.prix=30;
this.couleur="rose";
this.exp=(
new Date("3030 July 17").toLocaleDateString());
this.produit = { couleur:"jaune" };
};
var ist=new lobjet();
// instance
console.log("***11111111111***");
console.log("ist.prix="+ist.prix);
console.log("ist['prix']="+ist.prix);
var idx="prix";
console.log("ist[idx]="+ist.prix);
console.log("ist.couleur="+ist.couleur);
console.log("ist.exp="+ist.exp);
console.log("ist.produit.couleur="+ist.produit.couleur);
console.log("***22222222222***");
ist[0]=200; // n'écrase pas ist.prix
console.log("ist[0]="+ist[0]);
console.log("ist.prix="+ist.prix); // reste = 30
ist.couleur="violet";
console.log("ist.couleur="+ist.couleur);
ist["exp"]=(new Date(2030,10,25)).toLocaleString();
console.log("ist['exp']="+ist["exp"]);
ist["produit"]["couleur"] = "gris";
// TypeError: ist[3] is undefined
// console.log('ist[3]["couleur"]='+ist[3]["couleur"]);
console.log('ist.produit.couleur='+ist.produit.couleur);
console.log('ist.produit["couleur"]='+
ist.produit["couleur"]);
console.log('ist["produit"].couleur='+
Bref aperçu sur les objets
36 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
ist["produit"].couleur);
console.log('ist["produit"]["couleur"]='+
ist["produit"]["couleur"]);
console.log("***33333333333***");
ist[3] = {couleur: "Magenta"}
console.log('ist[3]='+ist[3]);
console.log('ist[3]["couleur"]='+ist[3]["couleur"]);
console.log('ist[3].couleur='+ist[3].couleur);
console.log('ist.produit.couleur='+ist.produit.couleur);
console.log('ist.produit["couleur"]='+
ist.produit["couleur"]);
console.log('ist["produit"].couleur='+
ist["produit"].couleur);
console.log('ist["produit"]["couleur"]='+
ist["produit"]["couleur"]);
// Ajout de nouvelles propriétés à l'instance
console.log("***44444444444***");
ist.nouveauI="NouveauI"
console.log('ist["nouveauI"]='+ist["nouveauI"]);
console.log('ist.nouveauI='+ist.nouveauI);
console.log("lobjet.nouveauI="+lobjet.nouveauI);
// Ajout de nouvelles propriétés au parent
console.log("***55555555555***");
lobjet.nouveauP="NouveauP"
console.log('ist["nouveauP"]='+ist["nouveauP"]);
console.log('ist.nouveauP='+ist.nouveauP);
console.log("lobjet.nouveauP="+lobjet.nouveauP);
// Ajout nvlles propr au prorotype du parent
console.log("***66666666666***");
lobjet.prototype.nouveauPP="NouveauPP"
console.log('ist["nouveauPP"]='+ist["nouveauPP"]);
console.log('ist.nouveauPP='+ist.nouveauPP);
console.log("lobjet.nouveauPP="+lobjet.nouveauPP);
</script>
Exécution :
***11111111111***
ist.prix=30
ist['prix']=30
ist[idx]=30
Bref aperçu sur les objets
test.html:12:2
test.html:13:2
test.html:14:2
test.html:16:2
37 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
ist.couleur=rose
ist.exp=17/07/3030
ist.produit.couleur=jaune
***22222222222***
ist[0]=200
ist.prix=30
ist.couleur=violet
ist['exp']=25/11/2030 à 00:00:00
ist.produit.couleur=gris
ist.produit["couleur"]=gris
ist["produit"].couleur=gris
ist["produit"]["couleur"]=gris
***33333333333***
ist[3]=[object Object]
ist[3]["couleur"]=Magenta
ist[3].couleur=Magenta
ist.produit.couleur=gris
ist.produit["couleur"]=gris
ist["produit"].couleur=gris
ist["produit"]["couleur"]=gris
***44444444444***
ist["nouveauI"]=NouveauI
ist.nouveauI=NouveauI
lobjet.nouveauI=undefined
***55555555555***
ist["nouveauP"]=undefined
ist.nouveauP=undefined
lobjet.nouveauP=NouveauP
***66666666666***
ist["nouveauPP"]=NouveauPP
ist.nouveauPP=NouveauPP
lobjet.nouveauPP=undefined
JavaScript Tome-V
test.html:17:2
test.html:18:2
test.html:19:2
test.html:21:2
test.html:23:2
test.html:24:2
test.html:27:2
test.html:30:2
test.html:35:2
test.html:36:2
test.html:38:2
test.html:40:2
test.html:43:2
test.html:45:2
test.html:46:2
test.html:47:2
test.html:48:2
test.html:49:2
test.html:51:2
test.html:53:2
test.html:58:2
test.html:60:2
test.html:61:2
test.html:62:2
test.html:66:2
test.html:68:2
test.html:69:2
test.html:70:2
test.html:74:2
test.html:76:2
test.html:77:2
test.html:78:2
Énumérer les propriétés d’un objet :
Pour énumérer les propriétés d’un objet il suffit :
1 De taper son nom à la ligne de commande (prompt) de la
console ;
2 L’afficher par son nom dans un code ;
3 Afficher son prototype dans un code ou au prompt de la
console
4 Utiliser la boucle « for i in objet » : La boucle « for-in »
parcourt la chaîne des prototypes.
Bref aperçu sur les objets
38 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
5 Utiliser la méthode Object.getOwnPropertyNames(objet)
Kinshasa, le 31 octobre 2018 (4:42 ).
Mots-clés :
OBJETS, JavaScript, types de données, ensemble d’entités, propres
propriétés, propriétés propres, méthodes,prototype, collection de
données, PRIMITIVES, types simples, objets de haut-niveau, Undefined, Null, Boolean, Number, String, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map,
Set, WeakMap, WeakSet, OBJECTS intrinsèques, built-in, valueOf,
fonctions ordinaires, variables globales, constructeur, polyfill, O bject.create, Object.getOwnPropertyNames
Bref aperçu sur les objets
39 / 40
mercredi, 31. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
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]
Bref aperçu sur les objets
40 / 40
mercredi, 31. octobre 2018