javascript tome vii - Bref Aperçu sur Les Objets en JavaScript

Transcription

Les Objets
J AVA S C R I P T (Programmation Internet) V O L . V
Pour Débuter
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
Définition :
En JavaScript, les objets sont des collections de propriétés
(https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_données).
Préambule :
Qu’est ce qui est l’autre : est-ce l’Array qui est un objet ou un objet qui est une
Array ? Voyez ceci : les éléments (values) d’un objet sont accédés comme ceux
d’une Array, et les Arrays possèdent implicitement en interne des labels (keys)
que nous verrons un peu plus loin :
Voyons : créons un « object » à partir d’une « Array » préexistante.
<script> "use strict";
let o=[Math.pow(5,2),Math.PI,Math.LN2];
const a = Object.create(o);
console.log(a);
</script>
Exécution avec Firefox Quantum 64.0b13 :
Les éléments de l’Array d’origine tous ont été jetées dans le prototype du constructeur du nouvel objet créé !.
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
Et le prototype du parent (constructeur) du prototype du constructeur de ce
nouvel objet créé « est une … Array.
Nous avons donc créé un « object » à partir d’une « Array » et c’est exactement ce que le petit code de notre programme a demandé !
Avec Yandex Version 18.11.0.2022 beta :
Notre nouvel « objet » ici descend donc d’une Array, il est donc bel et bien une
« Array » !
Un autre exemple :
<script type="text/javascript"> "use strict";
const o = {0:"femme",1:"homme"};
const r = prompt("Donnez le sexe [0=femme ou 1=homme]");
console.log(r , o[r]=="femme" ? "femme" : "homme");
</script>
Bref aperçu sur les objets
2 / 98
jeudi, 4. avril 2019
JavaScript Tome-V
 0 femme
test.html:4:3
 1 homme
test.html:4:3
CHAPITRE 5 : BREF APERÇU SUR LES OBJETS :
ECMA définit un « Object » comme ceci :
An Object is logically a collection of properties. Each property is either a data property, or an accessor property:

A data property associates a key value with an ECMAScript
language value and a set of Boolean attributes.
3 / 98

JavaScript Tome-V
An accessor property associates a key value with one or two
accessor functions, and a set of Boolean attributes. The accessor functions are used to store or retrieve an ECMAScript language value that is associated with the property.
Properties are identified using key values. A property key value is
either an ECMAScript String value or a Symbol value. All String and
Symbol values, including the empty string, are valid as property
keys. A property name is a property key that is a String value.
An integer index is a String-valued property key that is a canonical
numeric String (see 7.1.16) and whose numeric value is either +0 or
a positive integer ≤ 253 - 1. An array index is an integer index whose
numeric value i is in the range +0 ≤ i < 232 - 1.
Property keys are used to access properties and their values. There
are two kinds of access for properties: get and set, corresponding to
value retrieval and assignment, respectively. The properties accessible via get and set access includes both own properties that are a
direct part of an object and inherited properties which are provided
by another associated object via a property inheritance relationship.
Inherited properties may be either own or inherited properties of
the associated object. Each own property of an object must each
have a key value that is distinct from the key values of the other own
properties of that object.
All objects are logically collections of properties, but there are multiple forms of objects that differ in their semantics for accessing and
manipulating their properties. Ordinary objects are the most common form of objects and have the default object semantics. An exotic
object is any form of object whose property semantics differ in any
way from the default semantics.
ECMA identifie quelques Objets comme ceci :
4 / 98
JavaScript Tome-V
1. 4.3.6 ordinary object : object that has the default behaviour
for the essential internal methods that must be supported by
all objects.
2. 4.3.7 exotic object : object that does not have the default behaviour for one or more of the essential internal methods.
Note: Any object that is not an ordinary object is an exotic object.
3. 4.3.8 standard object : object whose semantics are defined by
this specification.
4. 4.3.9 built-in object : object specified and supplied by an
ECMAScript implementation.
Note : Standard built-in objects are defined in this specification. An ECMAScript implementation may specify and supply
additional kinds of built-in objects. A built-in constructor is a
built-in object that is also a constructor.
Mais aussi il y a
Intrinsic Objects dont Array, ArrayBuffer, Boolean, Date, Error…
Les OBJETS en JS :
Les OBJETS sont donc un type de données (ensemble
d’entités) comportant leurs propres propriétés, méthodes et
d’autres objets dont l’objet prototype. C’est une collection de
données (des paires de « clés:valeurs » ou « symboles:valeurs », les clés (chaîne de caractères ou symbole)
étant les identifiants des valeurs, ou en d’autres termes une
« valeur » est affectée à chaque « clé »).
5 / 98
JavaScript Tome-V
TYPES SIMPLES en JS :
Un autre type de données que les objets est les PRIMITIVES (types simples vs objets [de haut-niveau]) :
Undefined (ou indéfini : variable à laquelle on n’a pas encore affectée de valeur),
Null (ne possède qu’une seule valeur : « null »),
Boolean (n’a que deux valeurs : true ou false),
Number : tous les nombres [tous compris entre « -(2 53 -1) »
et « 2 53 -1 »] et représentés comme « flottants double précision : 64 bits, format IEEE 754 ( NaN = Not A Number est un
groupe de flottants particuliers non représentables ),
String (chaîne de [n’importe quels] caractères).
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 TYPES d’ « objects » en JS :
Array | Boolean | Date | Error | Function | JSON
| Math | Number | Object | RegExp | String | Map
| Set | WeakMap | WeakSet | ...
Les objets JS (ci-dessus) ne sont pas objets DOM (cidessous) :
6 / 98
JavaScript Tome-V
Quelques OBJECTS DOM :
Anchor | document | Event | Form , Form Input
Frame , Frameset | History | IFrame | Image
location | navigator | Option et Select
Screen | Table , TableHeader , TableRow
TableData | window
|
|
|
,
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 |
7 / 98
JavaScript Tome-V
navigator | Option et Select | Screen | Table ,
TableHeader , TableRow , TableData | window
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).
let bool = new Boolean(true);
console.log(bool.valueOf()); // true
console.log(typeof bool);
// object
8 / 98
JavaScript Tome-V
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
console.log(boolp1===boolp2);
// false
</script>
Un constructeur accepte les paramètres du reste (Ellison) :
function o(p1,p2,...p3) {
this.nom = p1;
this.age = p2;
this.matr = _ => p3[0];
this.auj = function(){return "Aujourd'hui "+p3[1]};
}
let i = new o("Boniko", 35, "K223", Date());
console.log("i.nom = ",i.nom);
console.log("i.age = ",i.age);
console.log("i.matr = ",i.matr());
console.log("i.auj = ",i.auj());
console.log("o.nom = ",o.nom);
console.log("o.age = ",o.age);
// console.log("o.matr = ",o.matr());
// TypeError: o.matr is not a function
</script>
9 / 98
JavaScript Tome-V
Remarquez en passant que les propriétés d’un constructeur ne sont pas
directement accessibles en se servant du nom de ce constructeur, ce qui
est tout contraire avec les « méthodes statiques » du pseudo type
« class ». On peut se permettre de comprendre le terme « static » comme
« étroitement lié/attaché à la classe ».
class O {
static auj() {return Date()};
}
let i = new O();
console.log("O.auj = ",O.auj());
// console.log("i.auj = ",i.auj());
// TypeError: i.auj is not a function
</script>
Comme avec une fonction ordinaire, on peut accéder directement, sauf
en mode strict, aux variables globales d’un constructeur sauf l’opérateur
« this ». En mode strict toute variable doit être déclarée, or la déclaration
d’une variable « var » qui traverse les blocs ne peut « traverser » les
limites du bloc d’une fonction. Et les autres types de variables (« let » et
« const » - ce dernier est-il vraiment une variable) ne traversent même
pas les simples blocs.
En mode standard :
<script type="text/javascript">
function f() {
g = 1000;
var v = 5;
let l = 50;
10 / 98
JavaScript Tome-V
const c = 100;
this.local = "LOCAL";
}
f();
console.log("g = "
console.log("local
console.log("v = "
console.log("l = "
console.log("c = "
</script>
,
=
,
,
,
g);
" , local);
v);
l);
c);
En mode strict :
function f() {
var v = 5;
let l = 50;
const c = 100;
}
f();
console.log("v = " , v);
console.log("l = " , l);
console.log("c = " , c);
</script>
ReferenceError: v is not defined
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.
11 / 98
JavaScript Tome-V
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 :
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) :
var dObj = function(){
console.log (this);
return this;
};
12 / 98
JavaScript Tome-V
// 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»; :
"use strict";
console.log (this);
return this;
};
// Appel de dObj() comme fonction
dObj();
</script>
Exécution :
undefined
test.html:5:5
« this » dans un objet appelé comme fonction constructeur en mode
standard ou en mode «use strict»; :
"use strict";
console.log (this);
return this;
13 / 98
JavaScript Tome-V
};
// 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 :
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-objettoString() = ");
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
14 / 98
JavaScript Tome-V
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 =
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 » :
function obj_Constr(width, length) {
}
var perim = new obj_Constr(null,5);
15 / 98
JavaScript Tome-V
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) :
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>
Exécution :
16 / 98
JavaScript Tome-V
This ds Espace Global =
==>this = [object Window]
this ds oConstr-objet-fSurf() =
Object { toString: toString() }
Périm = 20
==>this = [object Window]
<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.
f=function(p){
// Constructeur
K=1000*3600*24*365.2475; // Notez les pointsvirgules.
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));
17 / 98
JavaScript Tome-V
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("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é;
delete v.ec; // Supprimer une propriété;
//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("<=> LISTE PROPRIÉTÉS DE L'INSTANCE v");
for (i in v) {
}
</script>
18 / 98
JavaScript Tome-V
Exécution :
f.nom=undefined
f.dn=undefined
f.age=undefined ans.
v.nom=Object AVEC Constructor
v.dn=8/11/1953
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
On a vu ci-dessus l’ajout d’une nouvelle propriété à un objet. Voici en
clair comment le faire :
let o = function() {
}
Object.defineProperty(o , "PI", {
value:
3.14,
19 / 98
JavaScript Tome-V
enumerable:
true,
writable:
false,
configurable: false
})
console.log(o.PI);
console.log(Math.PI);
</script>
// 3.14
// 3.141592653589793
À 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 :
"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;
}
};
var pomme=new Fruit();
console.log(pomme); // pomme (Fruit) = OBJET
console.log("==> "+pomme);
20 / 98
JavaScript Tome-V
// 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
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
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"}
21 / 98
JavaScript Tome-V
Globale fct : Functionning in Global
pomme.couleur : VERT
pomme.poids : 35
ƒ () {
return "couleur= " + couleur + ", poids= " + poids+
"\nthis.couleur= " + this.coul…
couleur= rouge, poids= 50
ƒ 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.
// "use strict";
/*var*/ Fruit = function(){
/*window.*/ couleur= "rouge";
/*window.*/ poids= 50;
/*window.*/ gfc = function(){
return "Functionning in Global"};
this.couleur="VERT"
this.poids=35
return "couleur= " + couleur + ", poids= " +
poids+
"\nthis.couleur= " + this.couleur +
", this.poids= " + this.poids;
}
}
22 / 98
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()
console.log(pomme.toString); // pomme.toString FUNCTION
console.log(pomme.toString());
console.log(pomme.__proto__.toString); //
pomme.toString FUNCTION
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 { … }
23 / 98
JavaScript Tome-V
==> couleur= rouge, poids= 50
Globale couleur : rouge
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
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.
24 / 98
JavaScript Tome-V
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é.
Appel comme fonction ordinaire du constructeur d’un objet :
var Fruit = function(n,s){
couleur= "rouge";
poids= 50;
this.couleur="VERT"
this.poids=35
// Ds [ this.toString= function() { ] ci-dessous
// n est directement argument du constructeur
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 :
25 / 98
JavaScript Tome-V
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 :
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
y:1
B
z:"texte"
C
__proto__:
I
constructor:ƒ Object()
II
hasOwnProperty:ƒ hasOwnProperty()
26 / 98
III
IV
V
VI
VII
VIII
IX
X
XI
XII
XIII
JavaScript Tome-V
isPrototypeOf:ƒ isPrototypeOf()
propertyIsEnumerable:ƒ propertyIsEnumerable()
toLocaleString:ƒ toLocaleString()
toString:ƒ toString()
valueOf:ƒ valueOf()
__defineGetter__:ƒ __defineGetter__()
__defineSetter__:ƒ __defineSetter__()
__lookupGetter__:ƒ __lookupGetter__()
__lookupSetter__:ƒ __lookupSetter__()
get __proto__:ƒ __proto__()
set __proto__:ƒ __proto__()
Donc même un objet Hash est en fait une fonction.
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.
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);
27 / 98
JavaScript Tome-V
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
console.log(f);
console.log(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);
</script>
Exécution :
28 / 98
JavaScript Tome-V
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: {…} }
64.39170476874763, vieux: {…} }
f=[object Object]
v=[object Object]
f.ec=Ecole
v.ec=Ecole
f.uc=université
v.uc=université
64.39170476874763, vieux: {…}, ec: "Ecole", uc: "université" }
64.39170476874763, vieux: {…}, ec: "Ecole", uc: "université" }
f=[object Object]
v=[object Object]
***** HASOWNPROPERTY()
v.hasOwnProperty("nom")true
f.hasOwnProperty('ec')true
v.hasOwnProperty("toString")false
f.ec=undefined
v.ec=undefined
64.39170476874763, vieux: {…}, uc: "université" }
64.39170476874763, vieux: {…}, uc: "université" }
f=[object Object]
v=[object Object]
Une méthode d’affectation (destructuration) d’objet :
var { mutara, santonge, mamiwata, ...lisusu} =
(function(obj, array) {
29 / 98
JavaScript Tome-V
for (var i of Object.keys(array)) {
obj[array[i]] = array.indexOf(array[i]);
console.log(array[i], Object.values(array)[i]);
};
return obj
})({}, ["mutara", "santonge", "mamiwata"]);
console.log(mutara, santonge, mamiwata, lisusu);
</script>
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.
const K=1000*3600*24*365.2475;
// Création d'instance unique d'objet.var o = new Object();
var o2 = new Object();
var 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
30 / 98
JavaScript Tome-V
// 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))
// 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.
31 / 98
JavaScript Tome-V
obj_with_Object.html:11:2
Ce genre d’objets instanciés à partir 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.
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 rubisoïde
</script>
4. Création d’objet avec une fonction anonyme et l’opérateur new :
Ne peut créer qu’une instance unique d’objet.
let specs = new function () {
// Définit une fonction anonyme constructeur
// (anonymous constructor function)
// et affectation à specs via « new ».
this.color = "bleu";
this.dispInfo = dispSpecsInfo_=>
32 / 98
'Fusée
JavaScript Tome-V
'+this.model+" "+this.color;
}
specs.model = 'Soyouz'; // On redéfinit model
specs.color = "turquois"; // On redéfinit color
console.log(specs.dispInfo());
// Fusée Soyouz tur-quois
</script>
Passons maintenant à la création d’un nouvel objet à partir d’une expression ordinaire de fonction, sans l’opérateur new :
let Specs = function (model) {
this.model = model;
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 :
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(){
33 / 98
JavaScript Tome-V
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.
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.
34 / 98
JavaScript Tome-V
"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
Voyons maintenant ceci :
"use strict";
var v = 25;
var v = 100; // variable locale
var f=(function(){ // Fonction locale
console.log("Insiding...")
})();
console.log(v); // v locale
}
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
// Uncaught TypeError:
35 / 98
[FIREFOX]
JavaScript Tome-V
// 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 :
"use strict";
var v = 25;
this.v = 100; // propriété
this.f=function(){ // Méthode
console.log("Insiding...")
};
console.log(v); // v globale = 25
}
// 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 :
36 / 98
JavaScript Tome-V
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).
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 :
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");
37 / 98
JavaScript Tome-V
//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 :
"use strict";
window.v = 25;
console.log(window.v)
}
var iObj = dObj();
</script>
ou comme ceci :
"use strict";
var v = 25;
console.log(window.v)
}
38 / 98
JavaScript Tome-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é ?
"use strict";
var v = 25;
function dObj(){
this.v = 100;
console.log(v); // v locale
}
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>
Exécution :
25
25
100
Insiding...
5. Création d’objet avec la méthode « Object . create ( ) » :
On peut partir de zéro ou d’un objet parent (constructeur) existent. Avec
cette technique, l’objet ainsi créé n’est pas un constructeur :
39 / 98
JavaScript Tome-V
« Object.creatre », à partir de rien :
"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 :
40 / 98
JavaScript Tome-V
Exécution avec YANDEX :
41 / 98
JavaScript Tome-V
6. « Object create », à partir d’un objet (constructeur) pré-existent :
42 / 98
JavaScript Tome-V
// 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
//
//
//
//
bleu
marron
30 mm
30 mm
Louis.oeil.diamètre = "30 mm";
Louis.oeil={
couleur : "marron",
diamètre : "30 mm"
}
</script>
43 / 98
JavaScript Tome-V
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) {} »
// 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.
// 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.
44 / 98
JavaScript Tome-V
// 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
avons passée en argument.
return new F();
}
45 / 98
JavaScript Tome-V
})();
//===========================================
// }
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 et tout
autre 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.
46 / 98
JavaScript Tome-V
<script> "use strict";
var f = function(){};
var i = Object.create(f);
console.log(i)
//
//
//
//
//
//
//
//
//
//
Object { }
test.html:4:4
{}
test.html:4:4
<prototype>: function f()
<prototype>: f()
length: 0
name: "f"
prototype: {…}
constructor: function f()
<prototype>: function ()
console.log(i.prototype)
//
//
//
//
Object { … }
test.html:5:4
{…}
test.html:5:4
constructor: function f()
console.log(f.isPrototypeOf(i))
// true
</script>
Exécution :
Nous voyons que la fonction/objet « f » est en fait simplement le prototype de l’objet « i » (et non son constructeur), mais il est bien le constructeur du prototype de l’objet « i ».
L’objet « i » n’est donc en fait pas une instance/descendant de l’objet « f »,
mais il partage les propriétés de « f » définies dans son prototype (le proto-
47 / 98
JavaScript Tome-V
type de « f »). Il est donc quand même un héritier indirect ou « par alliance » de l’objet « f » sans que celui-dernier ne soit son constructeur.
console.log(f.isPrototypeOf(i))
// true
6. MISCELLANEOUS Plusieurs types d’objets en un seul :
const cl=console.log;
// CONST CONST CONST CONST
// objet - constructeur
// 1.
function Obj(oPdn , fct){
var dn = new Date(oPdn.a +","+oPdn.m +","+oPdn.j);
// objet avec « new »
cl(dn.toString()) // console.log
// Variable locale de Obj
let age_calc = new Date()-dn
// NEW NEW NEW NEW NEW NEW
// objet avec « new Object() »
// Une propriété de Obj
this.O_age = new Object();
// Méthode d'une propriété
this.O_age.disp_age = function(p){
return (age_calc / fct()).toFixed(2)+" ans.";
};
48 / 98
JavaScript Tome-V
}
//
//
//
//
2.
HASH HASH HASH (littéral d'objet)
objet Hash, argument vers le constructeur Obj.
Une autre Variable ordinaire dans un objet
var odn = {j:11 , m:"Aug" , a:1953}
// Ci-dessus, objet Hash (littéra d'objet).
// 3.
// fonction cô arguments vers construct.
// lors d’instanciation
let iObj = new Obj(
odn , function() {return 3.6e6*24*365.2475}
);
// 4.
// Création d’objet avec Object.create()
var o = function() {};
let i = Object.create(o);
o.stg = "==> Age = ";
// 5.
// Faire [inter]-agir le tout
cl(i.stg , iObj.O_age.disp_age());
</script>
Exécution :
Avec Firefox :
Tue Aug 11 1953 00:00:00 GMT+0100
(Paris, Madrid)
test.html:11:2
49 / 98
==> Age =
65.24 ans.
JavaScript Tome-V
test.html:44:1
Avec Yandex :
test.html:11
Tue Aug 11 1953 00:00:00 GMT+0100
(heure d’été d’Europe centrale)
test.html:44
==> Age =
50 / 98
65.24 ans.
JavaScript Tome-V
CHAPITRE 15 : Comment créer un objet dans l’espace globale ?
« window » (donc l’environnement global) est l’objet par défaut (c’està-dire quand un autre n’est pas spécifié en préfixe devant le nom d’une
propriété ou méthode) quand on accède à des propriétés et méthodes
d’objet. De plus, un élément dans l’espace global est accessible (visible)
de partout, sauf si ombrage c’est-à-dire redéfini dans un contexte lexical
restreint / local.
La syntaxe globale pour adjoindre une nouvelle propriété à un objet préexistent est la suivante :
1. Pour définir une seule propriété:
Object . defineProperty ( target , key , desc)
2. Pour définir plusieurs propriété:s
Object . defineProperties ( target , descriptors ).
L’environnement global qui sera notre « target » s’appelle soit « window » soit « global » selon le navigateur mais plus selon le système
d’exploitation.
Pour adjoindre une propriété à l’environnement global, il convient donc
par exemple de tester si « window » est défini ou pas. S’il est défini,
alors l’environnement global s’appelle probablement / vraisemblablement « window ». Allons-y donc :
Object.defineProperty(
typeof global === "object" ? global : window ,
"NEW_CONST",
{
value:
676149.91310146,
enumerable:
true,
51 / 98
writable:
false,
configurable: false
}
)
console.log(NEW_CONST);
//
console.log(window . NEW_CONST); //
console.log(this . NEW_CONST);
//
//
console.log(global . NEW_CONST);
</script>
XI.
JavaScript Tome-V
676149.91310146
676149.91310146
676149.91310146
Définition de méthode en JavaScript :
On peut définir une méthode en « inline » ou en différé.
En différé :
function Specs (model) {
this.model = model;
this.dispInfo = dispSpecsInfo;
// Méthode déclarée ici, mais
// définie en différé (ailleurs).
// Notez l'absence de parenthèse.
}
function dispSpecsInfo() {
return 'Fusée '+this.model+" "+this.color;
}
// Définition "externe" de la méthode
// Specs.dispSpecsInfo().
// Inconvénients :
// 1. Peut être appelé de n'importe où,
//
éventuellement générant des erreurs.
// 2. Risque de conflicts avec des fonctions
//
de librairies ou de redéfinition.
// 3. Bouffe de l'espace.
var specs = new Specs('Soyouz'); // Instanciation
specs.color = "grisâtre"; // On redéfinit color
52 / 98
JavaScript Tome-V
console.log(specs.dispInfo()); // Fusée Soyouz grisâtre
</script>
En ligne (inline) :
function Specs (model) {
this.model = model;
this.dispInfo = dispSpecsInfo_=>
'Fusée '+this.model+" "+this.color;
// Méthode définie en inline :
// moins de codes.
}
var specs = new Specs('Soyouz'); // Instanciation
specs.color = "roussâtre"; // On redéfinit color
console.log(specs.dispInfo()); // Fusée Soyouz roussâtre
</script>
AJOUT DE PROPRIÉTÉS À UN OBJET :
Outre la méthode directe utilisée ci-dessus, on peut écrire ceci :
let o = { };
console.log(Object.getOwnPropertyDescriptors(o));
let o = { };
Object.defineProperties(o, {
nom : {
value:"Kingandi"
}
})
Object.defineProperties(o, {
age : {
value:2018,writable:true
53 / 98
JavaScript Tome-V
}
})
console.log(o.nom, o.age);
</script>
Exécution :
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é"]
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);
54 / 98
JavaScript Tome-V
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='+
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
55 / 98
JavaScript Tome-V
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
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
56 / 98
test.html:12:2
test.html:13:2
test.html:14:2
test.html:16:2
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
JavaScript Tome-V
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
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
FUSION DE PLUSIEURS OBJETS :
La méthode « Object . assign ( ) » fusionne plusieurs objets en retenant
la dernière propriété rencontrée plusieurs fois, et en retenant aussi toutes
les propriétés uniques dans les différents objets sources, tout en permettant d’enrichir l’objet résultant, mais les propriétés dans la chaîne de
prototype et les propriétés non-énumérables ne sont pas copiées.
const o1 = {
[Symbol('s')]:19,
labelA: 10,
labelK: "diasoluka",
labelC: {cc:1212}
}
const o2 =
labelK:
labelF:
labelE:
labelF:
{
"kilo",
"ignoré",
{value:3, enumerable:true},
x => x,
57 / 98
JavaScript Tome-V
}
const o3 = {
labelK: "kilo",
labelE: {value:3, enumerable:true},
get labelG(){
const p=Math.PI, exp=2;
return Math.pow(p,exp);
}
}
const o = Object.assign(
o1, {},"1stString",'2ndString',null,true,
undefined,Symbol('z'),`LastString`,o2,o3);
console.dir(o);
</script>
58 / 98
JavaScript Tome-V
Différence entre « affectation » (« = ») d’un objet à un autre
et l’ « assignation » (« . assign ( ) ») d’un objet sur un autre :
1.
L’affectation d’un objet à un autre crée un
« alias » du premier objet dans ce sens qu’on colle seulement un autre ID à exactement ce même objet.
2.
L’assignation d’un objet sur un autre fait un clonage du deuxième objet vers le premier, dans ce sens
que les propriétés du deuxième objet que ne possède
pas le premier objet seront copiées dans le premier, et
celles du deuxième objet que le premier objet possède
aussi seront remplacées/écrasées dans le premier.
var o1 = {
kombo: "Yewana"
, act (){console.log("Dans o1")}
, matr: 2018
}
console.log("*o1 =",o1);
var o2 = {};
// ASSIGNATION
Object.assign(o2, o1);
// transf propr de o3 à o1 + écrast éventuel
console.log("o2 =",o2);
o1.act();
o2.act();
o1.newPropr = "newProp1__"; // Ajout nvl propriété à o1
console.log("*o1 =",o1); // nvl propr passe pas à o2
console.log("o2 =",o2); // o2 reste intact.
var o3 = {
matr: 5000
, act2 () { return "Dans o3"; }
59 / 98
JavaScript Tome-V
}
Object.assign(o1, o3);
// transf propr de o3 à o1 + écrast éventuel
console.log("*o1.act2() =",o1.act2());
// ALIASATION
// Création d'un alias d'objet
// Tout ce qu'on fera à l'un, se reflète
// sur l'autre !
var o4=o3; // o4 alias de o3
console.log("o4 = ",o4);
o4.newProp2 = "__NewPropr2"
console.log("*o3 =",o3); // o3 a reçu la n prop de o4
console.log("o4 =",o4);
</script>
*o1 = Object { kombo: "Yewana", act: act() , matr: 2018 }
test.html:7:1
*o1 = Object { kombo: "Yewana", act: act(), matr: 2018 }
test.html:13:1
o2 = Object { kombo: "Yewana", act: act(), matr: 2018 }
test.html:14:1
Dans o1
test.html:4:14
*o1 = Object { kombo: "Yewana", act: act(), matr: 2018, newPropr: "newProp1__" }
test.html:19:1
o2 = Object { kombo: "Yewana", act: act(), matr: 2018 }
test.html:20:1
*o1.act2() = Dans o3
test.html:29:1
*o3 = Object { matr: 5000, act2: act2()}
o4 = Object { matr: 5000, act2: act2()}
test.html:35:1
test.html:36:1
60 / 98
JavaScript Tome-V
*o3 = Object { matr: 5000, act2: act2(), newProp2:
"__NewPropr2" }
test.html:39:1
o4 = Object { matr:5000, act2:act2(), newProp2:"__NewPropr2" }
test.html:40:1
Si vous affectez un objet à un autre en utilisant le « spreading », l’objet cible n’est pas un alias, mais un objet distinct
indépendant et autonome même si la cible est une copie
exacte de la source (voir « aliasation d’objet » en page 59 cidessus).
const o = { a:69, b:95 };
const target = { ...o , z:18};
console.log(o);
console.log(target);
o.nv = 17;
console.log(o);
target.nv = 11;
console.log(o);
</script>
const o = { a:69, b:95 };
const target = { ...o};
console.log(o);
61 / 98
JavaScript Tome-V
o.nv = 17;
console.log(o);
target.nv = 11;
console.log(o);
</script>
Mais comment les choses se passent quand la source contient
un autre objet en son sein ?
const o = { a:69, b:95 , c:{c:3,d:5}};
const target = { ...o};
console.log(o);
o.nv = 17;
console.log(o);
target.nv = 11;
console.log(o);
</script>
62 / 98
JavaScript Tome-V
Il est très important de savoir « fusionner » (ou assigner) un
deuxième objet à un premier objet, leur représentation interne
et donc leur manipulation pouvant en pâtir, et surtout souffrir
d’une incompatibilité d’un browser à l’autre.
var cible1 = {}, cible2 = {};
o1 = Object.assign(cible1, {alpha:10});
console.log(o1);
o2 = Object.create(cible2, {beta:{value:20}});
console.log(o2);
o3 = Object.assign({alpha:100});
console.log(o3);
o4 = Object.create({beta:{value:200}});
console.log(o4);
</script>
Firefox :
63 / 98
JavaScript Tome-V
64 / 98
JavaScript Tome-V
Yandex :
65 / 98
JavaScript Tome-V
É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 (valable pour certains navigateurs seulement) : Ça
donne toutes les propriétés propres et la chaîne des prototypes ;
Avec Firefox Quantum 62.0.2 :
Cliquez le petit triangle…
66 / 98
JavaScript Tome-V
Avec Yandex Version 18.11.1.385 beta :
2 L’afficher par son nom dans un code ;
3 Afficher son prototype dans un code ou au prompt de la
console (seulement les propriétés héritables !)
67 / 98
JavaScript Tome-V
4 Utiliser la boucle « for i in objet » : La boucle « for-in »
parcourt les éléments énumérables :
let a = {70:89, Qv:80, C8:"58", "76":76}
console.log(a)
let t="";
for(let e in a) t+= e + " | ";
console.log(t);
</script>
5 Lister la paire des « entries » dans des Arrays :
let a = {70:89, Qv:80, C8:"58", "76":76}
console.log(a)
console.dir(Object.entries(a))
</script>
68 / 98
JavaScript Tome-V
6 Lister les « keys » dans une Arrays :
let a = {70:89, Qv:80, C8:"58", "76":76}
console.log(a)
console.dir(Object.keys(a))
</script>
7 Accessoirement on peut avoir besoin d’afficher ou accéder
directement aux « values » :
let a = {70:89, Qv:80, C8:"58", "76":76}
console.log(a)
console.dir(Object.values(a))
</script>
69 / 98
JavaScript Tome-V
8 Utiliser la méthode « Object . getOwnPropertyNames
( objet ) »
9 Utiliser la méthode « Object . getOwnPropertyDescriptors ( objet ) »
1. {length: {…}, name: {…}, prototype: {…}, assign: {…}, getOwnPropertyDescriptor: {…}, …}
1. assign: {value: ƒ, writable: true, enumerable: false, configurable: true}
2. create: {value: ƒ, writable: true, enumerable: false, configurable: true}
3. defineProperties: {value: ƒ, writable: true, enumerable: false,
configurable: true}
4. defineProperty: {value: ƒ, writable: true, enumerable: false,
configurable: true}
5. entries: {value: ƒ, writable: true, enumerable: false, configurable: true}
6. freeze: {value: ƒ, writable: true, enumerable: false, configurable: true}
7. getOwnPropertyDescriptor: {value: ƒ, writable: true, enumerable: false, configurable: true}
70 / 98
JavaScript Tome-V
8. getOwnPropertyDescriptors: {value: ƒ, writable: true, enumerable: false, configurable: true}
9. getOwnPropertyNames: {value: ƒ, writable: true, enumerable: false, configurable: true}
10. getOwnPropertySymbols: {value: ƒ, writable: true, enumerable: false, configurable: true}
11. getPrototypeOf: {value: ƒ, writable: true, enumerable: false,
configurable: true}
12. is: {value: ƒ, writable: true, enumerable: false, configurable: true}
13. isExtensible: {value: ƒ, writable: true, enumerable: false,
configurable: true}
14. isFrozen: {value: ƒ, writable: true, enumerable: false, configurable: true}
15. isSealed: {value: ƒ, writable: true, enumerable: false, configurable: true}
16. keys: {value: ƒ, writable: true, enumerable: false, configurable: true}
17. length: {value: 1, writable: false, enumerable: false, configurable: true}
18. name: {value: "Object", writable: false, enumerable: false,
configurable: true}
19. preventExtensions: {value: ƒ, writable: true, enumerable: false, configurable: true}
20. prototype: {value: {…}, writable: false, enumerable: false,
configurable: false}
21. seal: {value: ƒ, writable: true, enumerable: false, configurable: true}
22. setPrototypeOf: {value: ƒ, writable: true, enumerable: false,
configurable: true}
23. values: {value: ƒ, writable: true, enumerable: false, configurable: true}
24. __proto__: Object
Quelques propriétés du grand object « Object » :
var fruit = function(n,a){
// Prototype
this.lelo = Date.now;
this.id = function (){
let nom=n || "nomFruit";
let matr=a || 2018;
console.log("Nom =",nom,"Matricule =",matr)
71 / 98
JavaScript Tome-V
}
}
console.log("=".repeat(35),
"\ngetOwnPropertyNames\n","=".repeat(34));
let iObj = new fruit();
iObj.id();
console.log("Object.getOwnPropertyNames(fruit) =",
Object.getOwnPropertyNames(fruit));
console.log("Object.getOwnPropertyNames(iObj) =",
Object.getOwnPropertyNames(iObj));
"\nObject.getOwnPropertyDescriptors\n","=".repeat(34));
let iObj2 = new fruit("Manga",1000);
console.log('Object.getOwnPropertyDescriptor(iObj2, "lelo") =',
Object.getOwnPropertyDescriptor(iObj2, "lelo"));
console.log("Object.getOwnPropertyDescriptors(iObj2.id) =",
Object.getOwnPropertyDescriptors(iObj2.id));
"\nObject.entries\n","=".repeat(34));
console.log("Object.entries(fruit) =",
Object.entries(fruit));
console.log("Object.keys(iObj) ",
Object.keys(iObj));
console.log("Object.values(iObj2) =",
Object.values(iObj2));
console.log(Object.values(
["texte", 5, {}, _=>{}])
72 / 98
JavaScript Tome-V
);
"\nObject.entries with Strings\n","=".repeat(34));
console.log('Object.entries("pili^2")= ',
Object.entries("pili^2"));
// Et aussi ceci :
console.log('Object.keys("pili^2") ',
Object.keys("pili^2"));
console.log('Object.values("pili^2") =',
Object.values("pili^2"));
console.log(iObj);
"\nObject.isFrozen\n","=".repeat(34));
console.log("Object.isFrozen(iObj) = ",
Object.isFrozen(iObj));
console.log("Object.freeze(iObj) ",
Object.freeze(iObj));
console.log("Object.isFrozen(iObj) = ",
Object.isFrozen(iObj));
"\nObject.isSealed\n","=".repeat(34));
console.log("Object.isSealed(iObj2) =",
Object.isSealed(iObj2));
console.log("Object.seal(iObj2) ",
Object.seal(iObj2));
console.log("Object.isSealed(iObj2) =",
Object.isSealed(iObj2));
73 / 98
JavaScript Tome-V
"\nObject.isExtensible\n","=".repeat(34));
const arr=[1,2,3]
console.log("Object.isExtensible(arr) =",
Object.isExtensible(arr));
Object.preventExtensions(arr)
console.log("Object.isExtensible(arr) =",
Object.isExtensible(arr));
"\nObject.getOwnPropertyDescriptors\n","=".repeat(34));
Object.defineProperties(
fruit,
{
prop1:{ // property_1
writable:true
},
prop2:{ // property_2
enumerable:false
}
}
)
console.log("Object.getOwnPropertyDescriptors(fruit) =",
Object.getOwnPropertyDescriptors(fruit));
</script>
Exécution :
74 / 98
JavaScript Tome-V
75 / 98
JavaScript Tome-V
76 / 98
JavaScript Tome-V
Comment trier les éléments d’un objet :
let a = [],
o = {0:9, 3:45, 1:22, 5:3,length:6};
console.log(o);
a = Array.from(o);
console.log(a);
a.sort();
console.log(a);
let o1={};
Object.assign(o1,a);
console.log(o1);
let o2 = new Object(a)
console.log(o2);
</script>
Lire sur « . assign ( ) » en page 59 ci-dessus.
Exécution avec Firefox :
Avec Yandex :
77 / 98
JavaScript Tome-V
Méthodes de l’objet « Object » pour [vérifier] le verrouillage :
3.
Object . seal ( o )
Scelle et cache un objet. Un autre code ne peut supprimer ses propriétés
et on ne peut pas la modifier ou la voir dans le listage, mais on peut la
lire.
var o = {j:01 , date:Date.now() , date2:Date.now};
console.dir(o);
console.dir(o.date);
Object.seal(o);
delete o.date;
console.dir(o);
</script>
1.
Object . delete ( o.prop )
78 / 98
JavaScript Tome-V
Supprime/retire une propriété d’un objet.
<div class="cDiv"></div>
d = document.querySelector(".cDiv")
console.dir(o);
d.innerHTML += `o.date = ${o.date}<br>`;
delete o.date; // Sans objet préfixe !
console.dir(o);
d.innerHTML += `o.date = ${o.date}`;
</script>
Avec Firefox l’effet de « delete » s’étend aussi en amont, avant son invocation :
Avec Yandex l’effet de « delete » s’étend aussi en amont, avant son invocation :
79 / 98
JavaScript Tome-V
On ne voit pas la propriété « date » ci-dessus… mais sa vraie valeur
s’affiche !
Voyons ce que ça donne quand on n’utilise pas « delete » (rappelons que
« delete » s’utilise sans préfixe).
console.dir(o);
</script>
Aussi bien la propriété « date » que sa valeur, s’affichent :
Quel serait alors le comportement d’un vrai programme utilisant « delete » dans ce contexte, avec Firefox et avec Yandex ?
80 / 98
2.
JavaScript Tome-V
Object . preventExtensions ( o )
Empêche toute extension d’un objet.
console.dir(o);
Object.preventExtensions(o);
o.refused="Refusé";
console.dir(o);
console.dir(o.refused);
Object.defineProperty(o,'refused2',{
value: "Alse refused" } )
// TypeError: can't define property "refused2":
//
Object is not extensible
</script>
Firefox:
Yandex :
81 / 98
3.
JavaScript Tome-V
Object . freeze ( o )
Gele / bloque (freezes) un objet : un autre code ne peut ni supprimer ni
changer aucune de ses propriétés.
console.dir(o);
// Object { j: 1, date: 1543657020586, date2: now() }
// 1543657020586
Object.freeze(o);
// Ajout direct de propriété
o.an=new Date().getFullYear();
// Tentative d'Ajout de propriété avec "Object.defineProperty"
//
Object.defineProperty(o,'refused',{
//
value: "Alse refused" } )
// TypeError: can't define property "refused":
//
Object is not extensible
delete o.date;
// 1543657114540
82 / 98
//
//
//
//
//
JavaScript Tome-V
o.date=new Date().getMonth();
console.dir(o.date); // 1543657114540
//
La propriété " o.date " N'A PAS éTé MODIFIéE
mais aucun message n'a été émis. Donc l'action
sur laquelle on comptait a été ignorée
sans aucun avertissement, et donc on continue à
compter sur elle dans la suite du code !
console.dir(o);
// Object { j: 1, date: 1543657114540, date2: now() }
</script>
4.
Object . isSealed ( o )
Détermine si un objet est scellé (“sealed”).
console.dir(Object.isSealed(o)); // false
Object.freeze(o);
console.dir(Object.isSealed(o)); // true
</script>
5.
Object . isExtensible ( o )
Détermine si l’extension d’un objet est autorisée.
console.dir(Object.isExtensible(o)); // true
Object.preventExtensions(o);
console.dir(Object.isExtensible(o)); // false
</script>
83 / 98
6.
JavaScript Tome-V
Object . isFrozen ( o )
Détermine si un objet est gelé (“frozen”).
console.dir(Object.isFrozen(o)); // false
Object.freeze(o);
console.dir(Object.isFrozen(o)); // true
</script>
Quelques autres méthodes :
Object . is ( ) :
let c="chaîne";
console.log(Object.is(c, "chaîne")); // true
console.log(Object.is("chaîne", "chaîne")); // true
console.log(Object.is("chaîne", "Chaîne")); // false
console.log(Object.is(25, Math.pow(5,2))); // true
console.log(Object.is(0, -0));
// false
console.log(Object.is(53, 53));
// true
console.log(Object.is(53, '53')); // false
console.log(Object.is("", 0));
// false
console.log(Object.is(true, 1));
// false
console.log(Object.is(false, 0));
// false
console.log(Object.is(null, null));
// true
console.log(Object.is(undefined, undefined)); // true
console.log(Object.is(NaN, NaN)); // true
</script>
Pour faire une copie d’un objet existent :
84 / 98
JavaScript Tome-V
let O = {a: 125, b: "Eyenga bolamu"};
var copy = Object.create(
Object.getPrototypeOf(O),
Object.getOwnPropertyDescriptors(O)
);
console.log(O);
console.log(copy);
</script>
function O1(){};
function O2(){};
console.log(new
console.log(new
console.log(new
console.log(new
O2
O2
O1
O1
instanceof
instanceof
instanceof
instanceof
O2);
O1);
O2);
O1);
//
//
//
//
=>
=>
=>
=>
true
false
false
true
Object.setPrototypeOf(O2.prototype, O1.prototype);
console.log(new
console.log(new
console.log(new
console.log(new
</script>
O2
O2
O1
O1
instanceof
instanceof
instanceof
instanceof
O2);
O1);
O2);
O1);
//
//
//
//
=>
=>
=>
=>
true
true
false
true
function O1(){};
function O2(){};
console.log(new
console.log(new
console.log(new
console.log(new
O2
O2
O1
O1
instanceof
instanceof
instanceof
instanceof
O2);
O1);
O2);
O1);
//
//
//
//
=>
=>
=>
=>
true
false
false
true
Object.setPrototypeOf(O1.prototype, O2.prototype);
console.log(new O2 instanceof O2); // => true
85 / 98
JavaScript Tome-V
console.log(new O2 instanceof O1); // => false
</script>
86 / 98
JavaScript Tome-V
L’OBJECT :
En fait qu’est ce qui est l’autre ? Est-ce l’objet qui est une Array, ou une
Array qui est un objet ? L’Array est un objet certes, mais la structure interne
de l’objet est celle d’une Array.
let a = [];
let o = new Object();
a[0]="Dummy",a[1]="Fail",a[2]="Tercio";
o[0]="Dummy",o[1]="Fail",o[2]="Tercio";
console.log(a,o);
</script>
Ce sont leurs propriétés propres, prototypes [et ceux de leurs constructeurs]
ainsi que leurs modes d’accès, de gestion qui les différencient. Mais les
deux sont construits selon les mêmes bases, la même structure interne,
comme du reste tous les autres objets (y compris les fonctions) en JavaScript.
Par exemple, l’Array diffère de l’objet entre autres par le fait qu’elle comporte une propriété « length ».
let a = [];
87 / 98
JavaScript Tome-V
console.log(Object.getOwnPropertyDescriptors(a));
</script>
Notez ci-dessus que les labels dans l’objet ont été baptisés automatiquement
et en numérique ordonné, comme dans une simple Array, et que l’Array
aussi a dans sa représentation interne des labels [numériques] ordonnés.
Voyez ceci :
let a = [];
console.log(Object.entries(a));
88 / 98
JavaScript Tome-V
console.log(Object.entries(o));
</script>
Ci-dessus, la méthode « Object . entries » retourne le nombre d’éléments
contenus dans l’Array et l’objet, et ils valent tous 3.
Conversion facile d’un « object » en « Array » :
Avec « Array . flatMap ( ) » :
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.flatMap(it => [it.a, it.b, it.c])
);
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.flatMap(it =>
[it.c, Math.pow(it.a,2), (it.b).concat("***")]
)
);
</script>
89 / 98
JavaScript Tome-V
Avec « Array . map ( ) » :
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.map(it => [it.a, it.b, it.c])
);
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.map(it =>
[it.c, Math.pow(it.a,2), (it.b).concat("***")]
)
);
</script>
console.log(
Array.from(
Object.values({a:17, b:5, c:95.3, d: 475})
)
90 / 98
JavaScript Tome-V
);
</script>
91 / 98
JavaScript Tome-V
L’objet Window :
for (const k in window) document.write (k+" | ")
</script>
=====
postMessage | blur | focus | close | frames | self | window |
parent | opener | top | length | closed | location | document |
origin | name | history | locationbar | menubar | personalbar |
scrollbars | statusbar | toolbar | status | frameElement | navigator | customElements | external | screen | innerWidth | innerHeight | scrollX | pageXOffset | scrollY | pageYOffset |
screenX | screenY | outerWidth | outerHeight | devicePixelRatio
| clientInformation | screenLeft | screenTop | defaultStatus |
defaultstatus | styleMedia | onanimationend | onanimationiteration | onanimationstart | onsearch | ontransitionend | onwebkitanimationend | onwebkitanimationiteration | onwebkitanimationstart | onwebkittransitionend | isSecureContext | onabort |
onblur | oncancel | oncanplay | oncanplaythrough | onchange |
onclick | onclose | oncontextmenu | oncuechange | ondblclick |
ondrag | ondragend | ondragenter | ondragleave | ondragover |
ondragstart | ondrop | ondurationchange | onemptied | onended |
onerror | onfocus | oninput | oninvalid | onkeydown | onkeypress | onkeyup | onload | onloadeddata | onloadedmetadata |
onloadstart | onmousedown | onmouseenter | onmouseleave | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel
| onoperadetachedviewchange | onoperadetachedviewcontrol | onpause | onplay | onplaying | onprogress | onratechange | onreset | onresize | onscroll | onseeked | onseeking | onselect |
onstalled | onsubmit | onsuspend | ontimeupdate | ontoggle |
onvolumechange | onwaiting | onwheel | onauxclick | ongotpointercapture | onlostpointercapture | onpointerdown | onpointermove | onpointerup | onpointercancel | onpointerover | onpointerout | onpointerenter | onpointerleave | onafterprint | onbeforeprint | onbeforeunload | onhashchange | onlanguagechange |
onmessage | onmessageerror | onoffline | ononline | onpagehide
| onpageshow | onpopstate | onrejectionhandled | onstorage |
onunhandledrejection | onunload | performance | stop | open |
alert | confirm | prompt | print | requestAnimationFrame | can-
92 / 98
JavaScript Tome-V
celAnimationFrame | requestIdleCallback | cancelIdleCallback |
captureEvents | releaseEvents | getComputedStyle | matchMedia |
moveTo | moveBy | resizeTo | resizeBy | getSelection | find |
webkitRequestAnimationFrame | webkitCancelAnimationFrame |
fetch | btoa | atob | setTimeout | clearTimeout | setInterval |
clearInterval | createImageBitmap | scroll | scrollTo | scrollBy | onappinstalled | onbeforeinstallprompt | crypto |
ondevicemotion | ondeviceorientation | ondeviceorientationabsolute | indexedDB | webkitStorageInfo | sessionStorage | localStorage | chrome | opr | visualViewport | speechSynthesis |
webkitRequestFileSystem | webkitResolveLocalFileSystemURL |
openDatabase | applicationCache | caches | TEMPORARY | PERSISTENT | addEventListener | removeEventListener | dispatchEvent |
Document :
for (const k in document) document.write (k+" | ")
</script>
=====
location | implementation | URL | documentURI | origin | compatMode | characterSet | charset | inputEncoding | contentType
| doctype | documentElement | xmlEncoding | xmlVersion |
xmlStandalone | domain | referrer | cookie | lastModified |
readyState | title | dir | body | head | images | embeds |
plugins | links | forms | scripts | currentScript | defaultView
| designMode | onreadystatechange | anchors | applets | fgColor
| linkColor | vlinkColor | alinkColor | bgColor | all | scrollingElement | onpointerlockchange | onpointerlockerror | hidden
| visibilityState | webkitVisibilityState | webkitHidden |
onbeforecopy | onbeforecut | onbeforepaste | oncopy | oncut |
onpaste | onsearch | onselectionchange | onselectstart | onvisibilitychange | fonts | activeElement | styleSheets | pointerLockElement | onabort | onblur | oncancel | oncanplay |
oncanplaythrough | onchange | onclick | onclose | oncontextmenu
| oncuechange | ondblclick | ondrag | ondragend | ondragenter |
ondragleave | ondragover | ondragstart | ondrop | ondurationchange | onemptied | onended | onerror | onfocus | oninput |
oninvalid | onkeydown | onkeypress | onkeyup | onload | onload-
93 / 98
JavaScript Tome-V
eddata | onloadedmetadata | onloadstart | onmousedown | onmouseenter | onmouseleave | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel | onoperadetachedviewchange |
onoperadetachedviewcontrol | onpause | onplay | onplaying | onprogress | onratechange | onreset | onresize | onscroll | onseeked | onseeking | onselect | onstalled | onsubmit | onsuspend | ontimeupdate | ontoggle | onvolumechange | onwaiting |
onwheel | onauxclick | ongotpointercapture | onlostpointercapture | onpointerdown | onpointermove | onpointerup | onpointercancel | onpointerover | onpointerout | onpointerenter | onpointerleave | children | firstElementChild | lastElementChild
| childElementCount | webkitIsFullScreen | webkitCurrentFullScreenElement | webkitFullscreenEnabled | webkitFullscreenElement | onwebkitfullscreenchange | onwebkitfullscreenerror |
rootElement | getElementsByTagName | getElementsByTagNameNS |
getElementsByClassName | createDocumentFragment | createTextNode | createCDATASection | createComment | createProcessingInstruction | importNode | adoptNode | createAttribute |
createAttributeNS | createEvent | createRange | createNodeIterator | createTreeWalker | getElementsByName | open | close |
write | writeln | hasFocus | execCommand | queryCommandEnabled
| queryCommandIndeterm | queryCommandState | queryCommandSupported | queryCommandValue | clear | captureEvents | releaseEvents | exitPointerLock | createElement | createElementNS
| caretRangeFromPoint | getSelection | elementFromPoint | elementsFromPoint | getElementById | prepend | append |
querySelector | querySelectorAll | webkitCancelFullScreen |
webkitExitFullscreen | createExpression | createNSResolver |
evaluate | wasDiscarded | onfreeze | onresume | registerElement
| pictureInPictureElement | pictureInPictureEnabled | exitPictureInPicture | ELEMENT_NODE | ATTRIBUTE_NODE | TEXT_NODE |
CDATA_SECTION_NODE | ENTITY_REFERENCE_NODE | ENTITY_NODE | PROCESSING_INSTRUCTION_NODE | COMMENT_NODE | DOCUMENT_NODE | DOCUMENT_TYPE_NODE | DOCUMENT_FRAGMENT_NODE | NOTATION_NODE | DOCUMENT_POSITION_DISCONNECTED | DOCUMENT_POSITION_PRECEDING | DOCUMENT_POSITION_FOLLOWING | DOCUMENT_POSITION_CONTAINS | DOCUMENT_POSITION_CONTAINED_BY | DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC | nodeType | nodeName |
baseURI | isConnected | ownerDocument | parentNode | parentElement | childNodes | firstChild | lastChild | previousSibling |
nextSibling | nodeValue | textContent | hasChildNodes |
getRootNode | normalize | cloneNode | isEqualNode | isSameNode
| compareDocumentPosition | contains | lookupPrefix |
94 / 98
JavaScript Tome-V
lookupNamespaceURI | isDefaultNamespace | insertBefore | appendChild | replaceChild | removeChild | addEventListener | removeEventListener | dispatchEvent |
Navigator :
for (const k in navigator) document.write (k+" | ")
</script>
vendorSub | productSub | vendor | maxTouchPoints | hardwareConcurrency | cookieEnabled | appCodeName | appName | appVersion |
platform | product | userAgent | language | languages | onLine
| doNotTrack | geolocation | mediaDevices | connection |
plugins | mimeTypes | webkitTemporaryStorage | webkitPersistentStorage | getBattery | sendBeacon | getGamepads |
getUserMedia | webkitGetUserMedia | javaEnabled | vibrate | requestMIDIAccess | budget | permissions | presentation | registerProtocolHandler | unregisterProtocolHandler | deviceMemory |
clipboard | credentials | keyboard | serviceWorker | storage |
locks | usb | requestMediaKeySystemAccess | mediaCapabilities |
95 / 98
JavaScript Tome-V
Kinshasa, le jeudi 4 avril 2019 (10:47:17 PM10:47 ).
Mots-clés :
Object.seal, Object.preventExtensions, Object.delete, Object.freeze,
Object.isSealed, Object.isExtensible, Object.isFrozen, Object.is
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-Grand-Secret-de-LaCreation
D’autres publications pouvant aussi intéresser :
96 / 98
JavaScript Tome-V
• https://www.scribd.com/document/377036251/Le-Dosage-DesMedicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-DesThermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-IntroductionAux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-ChristPour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelleangulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriqueesen-JS
• https://www.scribd.com/document/374789297/Format-Interne-DesObjets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secretde-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-dIMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-Descriptors
• https://www.scribd.com/document/373833282/l-Objet-Global-Window
• https://www.scribd.com/document/372665249/Javascript-Tome-II
• https://www.scribd.com/document/355291488/motilite-oculaire-2
• https://www.scribd.com/document/355291239/motilite-oculaire-I
• https://www.scribd.com/document/355290248/Script-d-Analyses-DesReflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-etAnthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelledu-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-EntreOxymetrie-Et-Type-Respiration
• https://www.scribd.com/document/315746265/Classification-DesMedicaments
97 / 98
JavaScript Tome-V
• https://www.scribd.com/document/315745909/IncongruencesHeresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-EntreOxymetrie-Et-Type-Respiration
98 / 98

javascript tome vii - Bref Aperçu sur Les Objets en JavaScript

Transcription

Documents pareils

Tea House - ShowTime

Console - Bidon recyclé et Teck

la console vsmile - MetaGames-EU

Plan Villa CHARTREUX

Tutoriel Javascript - Simplon Boulogne sur Mer

Rapide utilisation de visualroute

Fiche atelier - flash xbox 360

Console portable Ressemble à une tablette - 1001 jeux vidéo

Communiqué de presse StarQuery Suite 4.4: Une solution

vtech vsmile - MetaGames-EU