B re f A p e r ç u s u r l e s O b j e t s 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 ? <script> const o = []; console.dir(Array.name === "Array"); // true console.dir(o.constructor === Array); // true console.dir(o.constructor.name === "Array"); // true console.log(typeof o) // object </script> Voyez ceci : les éléments (values) d’un objet sont accédés de la même façon que ceux d’une Array : <script> "use strict"; const o = {0:"Zéro",1:"Un"}; const a = ["Zéro","Un"]; console.dir(o[0] , o[1]); // Zéro Un J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V console.dir(a[0] , a[1]); // </script> Zéro Un De plus, les Arrays possèdent implicitement en interne des labels (keys, numériques ordonnés à partir de zéro) tout comme les objets. Voici les structures que l’on obtient à la console : Ce sont les méthodes de chacun ainsi que les propriétés propres de chacun (comme la propriété « length »de l’Array) qui les différencient. Attentiion : La « length » d’une Array c’est le nombre de ces entries (keys & values), tandis que La « length » d’une méthode c’est le nombre de ces arguments. Créons maintenant 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> Bref aperçu sur les objets 2 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu Exécution avec Firefox Quantum 64.0b13 : JavaScript Tome-V Les éléments de l’Array d’origine tous ont été jetées dans le prototype du constructeur du nouvel objet créé !. 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 : Bref aperçu sur les objets 3 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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> 0 femme test.html:4:3 1 homme test.html:4:3 Bref aperçu sur les objets 4 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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. 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. Bref aperçu sur les objets 5 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 : 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 : Bref aperçu sur les objets 6 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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é »). 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) . Bref aperçu sur les objets 7 / 102 vendredi, 31. mai 2019 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 objets JS (ci-dessus) ne sont pas objets DOM (cidessous) : 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() » : Bref aperçu sur les objets 8 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 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). Bref aperçu sur les objets 9 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 console.log(boolp1===boolp2); // false </script> Un constructeur accepte les paramètres du reste (Ellison) : <script type="text/javascript"> "use strict"; 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> Bref aperçu sur les objets 10 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 ». <script type="text/javascript"> "use strict"; 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 Bref aperçu sur les objets 11 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V « 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; 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 : <script type="text/javascript"> "use strict"; function f() { var v = 5; let l = 50; const c = 100; } f(); console.log("v = " , v); console.log("l = " , l); Bref aperçu sur les objets 12 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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. 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. Bref aperçu sur les objets 13 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V « 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 14 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V undefined 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, Bref aperçu sur les objets 15 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 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] Bref aperçu sur les objets 16 / 102 convalue="ivalue" vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 » : <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); Bref aperçu sur les objets 17 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 : 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 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); Bref aperçu sur les objets 18 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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]); } 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); Bref aperçu sur les objets 19 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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(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 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 Bref aperçu sur les objets 20 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V On a vu ci-dessus l’ajout d’une nouvelle propriété à un objet. Voici en clair comment le faire : <script type="text/javascript"> "use strict"; let o = function() { } Object.defineProperty(o , "PI", { value: 3.14, 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 : <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= " + Bref aperçu sur les objets 21 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V poids+ "\nwindow.couleur= ", window.poids= " "\nthis.couleur= " ", this.poids= " + " + window.couleur + + window.poids+ + this.couleur + 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" Bref aperçu sur les objets 22 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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"} 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 Bref aperçu sur les objets 23 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V this.couleur="VERT" this.poids=35 this.toString= function() { return "couleur= " + couleur + ", poids= " + poids+ "\nwindow.couleur= ", window.poids= " "\nthis.couleur= " ", this.poids= " + " + window.couleur + + window.poids+ + this.couleur + 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 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> Bref aperçu sur les objets 24 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 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 () Bref aperçu sur les objets 25 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V [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é. 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 Bref aperçu sur les objets 26 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 : 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) : Bref aperçu sur les objets 27 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V x => {y: 1, z: "texte"} 1 {y: 1, z: "texte"} A y:1 B z:"texte" C __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. 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 Bref aperçu sur les objets 28 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V })(), // 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 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); Bref aperçu sur les objets 29 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V // 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] 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] Bref aperçu sur les objets 30 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V v=[object Object] Une méthode d’affectation (destructuration) d’objet : <script type="text/javascript"> "use strict"; var { mutara, santonge, mamiwata, ...lisusu} = (function(obj, array) { 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. <script type="text/javascript"> "use strict"; 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"; Bref aperçu sur les objets 31 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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)) // 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)) Bref aperçu sur les objets 32 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu // Array [] console.log(o3.prototype) console.log(o3.fct()) </script> JavaScript Tome-V // // undefined 3.141592653589793 Exécution : KIBINDAKOYE : Age = 64.37283049358591 ans. 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. Bref aperçu sur les objets 33 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V <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 tur-quois </script> Passons maintenant à la création d’un nouvel objet à partir d’une expression ordinaire de fonction, sans l’opérateur new : <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. } Bref aperçu sur les objets 34 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V // 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. 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... Bref aperçu sur les objets test.html:6:6 test.html:7:6 test.html:14:2 test.html:18:11 test.html:23:11 test.html:34:11 35 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 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. } Bref aperçu sur les objets 36 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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é 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(); Bref aperçu sur les objets 37 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V // 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). 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){ Bref aperçu sur les objets 38 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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; var dObj = function(){ console.log(window.v) } var iObj = dObj(); </script> Bref aperçu sur les objets 39 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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> Exécution : 25 Bref aperçu sur les objets 40 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 : « 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 : Bref aperçu sur les objets 41 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Exécution avec YANDEX : Bref aperçu sur les objets 42 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu Bref aperçu sur les objets JavaScript Tome-V 43 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 6. « Object create », à partir d’un objet (constructeur) pré-existent : Bref aperçu sur les objets 44 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V <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 // // // // bleu marron 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", 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); </script> Bref aperçu sur les objets 45 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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) {} » <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. // 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. Bref aperçu sur les objets 46 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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(); } Bref aperçu sur les objets 47 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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. Bref aperçu sur les objets 48 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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>: Object { … } <prototype>: function () console.log(i.prototype) // // // // Object { … } test.html:5:4 {…} test.html:5:4 constructor: function f() <prototype>: Object { … } 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- Bref aperçu sur les objets 49 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 : <script type="text/javascript"> "use strict"; 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."; }; Bref aperçu sur les objets 50 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 Bref aperçu sur les objets 51 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu ==> Age = JavaScript Tome-V 65.24 ans. 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 Bref aperçu sur les objets ==> Age = 52 / 102 65.24 ans. vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 : <script type="text/javascript"> "use strict"; Object.defineProperty( typeof global === "object" ? global : window , "NEW_CONST", { value: 676149.91310146, enumerable: true, Bref aperçu sur les objets 53 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu writable: false, configurable: false } ) console.log(NEW_CONST); // console.log(window . NEW_CONST); // console.log(this . NEW_CONST); // // console.log(global . NEW_CONST); </script> JavaScript Tome-V 676149.91310146 676149.91310146 676149.91310146 Précaution avant de définir une nouvelle méthode/propriété : Avant de définir une [nouvelle] propriété ou méthode, il faut vérifier si cette méthode n’existe pas déjà. Mais attention, tous les browsers ne se comportent pas de la même façon : <script> console.log(Array.reverse); console.log([].reverse); console.log(Boolean(Array.reverse)); console.log(Boolean([].reverse)); if(Array.reverse) console.log("« Array.reverse » existe"); else console.log("« Array.reverse » indéfinie"); if([].reverse) console.log("« [].reverse » existe"); else console.log("« [].reverse » indéfinie"); console.log(); console.log(Array.dummy); console.log([].dummy); console.log(Boolean(Array.dummy)); console.log(Boolean([].dummy)); if(Array.dummy) console.log("« Array.dummy » existe"); else console.log("« Array.dummy » indéfinie"); if([].dummy) console.log("« [].dummy » existe"); else console.log("« [].dummy » indéfinie"); </script> Avec Firefox Quantum version 66.0.3 : Bref aperçu sur les objets 54 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Alors qu’avec Firefox quantum ci-dessus, « Array . reverse » est aussi définie… Avec tous les browsers ci-dessous : Comme vous le verrez, « [] . reverse » est définie, mais « Array . reverse » n’est pas définie, Brave Version 0.64.75 Chromium: 74.0.3729.131 (Build officiel) Vivaldi 2.5.1525.40 (Stable channel), Révision 5309247574c10e1673d1207a16506a253f2ba8dc, JavaScript V8 7.4.288.26, Flash 32.0.0.192 Agent utilisateur Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.134 Safari/537.36 Vivaldi/2.5.1525.40 Yandex Browser Version 19.4.3.79 beta : Opera Version :60.0.3255.95, Bref aperçu sur les objets 55 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu XI. JavaScript Tome-V Identification du navigateur : Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36 OPR/60.0.3255.95 Maxthon v5.2.6.1000 Google Chrome Version 74.0.3729.131 (Build officiel) Définition de [nouivelle] méthode/propriété en JavaScript : On peut définir une méthode en « inline » ou en différé. En différé : <script model="text/javascript"> "use strict"; function Specs (model) { this.model = model; this.color = "bleu"; this.dispInfo = dispSpecsInfo; // Méthode déclarée ici, mais // définie en différé (ailleurs). // Notez l'absence de parenthèse. } Bref aperçu sur les objets 56 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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 // libraries (bibliothèques) ou de redéfinition. // 3. Bouffe de l'espace. var specs = new Specs('Soyouz'); // Instanciation specs.color = "grisâtre"; // On redéfinit color console.log(specs.dispInfo()); // Fusée Soyouz grisâtre </script> En ligne (inline) : <script model="text/javascript"> "use strict"; function Specs (model) { this.model = model; this.color = "bleu"; 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 : Bref aperçu sur les objets 57 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Outre la méthode directe utilisée ci-dessus, on peut écrire ceci : <script type="text/javascript"> "use strict"; let o = { }; console.log(Object.getOwnPropertyDescriptors(o)); <script type="text/javascript"> "use strict"; let o = { }; console.log(Object.getOwnPropertyDescriptors(o)); Object.defineProperties(o, { nom : { value:"Kingandi" } }) Object.defineProperties(o, { age : { value:2018,writable:true } }) console.log(Object.getOwnPropertyDescriptors(o)); 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] Bref aperçu sur les objets 58 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V ● 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 59 / 102 vendredi, 31. mai 2019 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 : Bref aperçu sur les objets 60 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V ***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 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: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 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 Bref aperçu sur les objets 61 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 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. <script type="text/javascript"> "use strict"; 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, 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> Bref aperçu sur les objets 62 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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. <script type="text/javascript"> "use strict"; var o1 = { kombo: "Yewana" , act (){console.log("Dans o1")} , matr: 2018 Bref aperçu sur les objets 63 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V } console.log("*o1 =",o1); var o2 = {}; // ASSIGNATION Object.assign(o2, o1); // transf propr de o3 à o1 + écrast éventuel console.log("*o1 =",o1); 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"; } } 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("*o3 =",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> Bref aperçu sur les objets 64 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V *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 *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 63 cidessus). <script type="text/javascript"> "use strict"; const o = { a:69, b:95 }; const target = { ...o , z:18}; console.log(o); console.log(target); o.nv = 17; Bref aperçu sur les objets 65 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V console.log(o); console.log(target); target.nv = 11; console.log(o); console.log(target); </script> <script type="text/javascript"> "use strict"; const o = { a:69, b:95 }; const target = { ...o}; console.log(o); console.log(target); o.nv = 17; console.log(o); console.log(target); target.nv = 11; console.log(o); console.log(target); </script> Mais comment les choses se passent quand la source contient un autre objet en son sein ? Bref aperçu sur les objets 66 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V <script type="text/javascript"> "use strict"; const o = { a:69, b:95 , c:{c:3,d:5}}; const target = { ...o}; console.log(o); console.log(target); o.nv = 17; console.log(o); console.log(target); target.nv = 11; console.log(o); console.log(target); </script> 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. <script type="text/javascript"> "use strict"; var cible1 = {}, cible2 = {}; o1 = Object.assign(cible1, {alpha:10}); Bref aperçu sur les objets 67 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu console.log(o1); JavaScript Tome-V 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 : Bref aperçu sur les objets 68 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu Bref aperçu sur les objets JavaScript Tome-V 69 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Yandex : É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 : Bref aperçu sur les objets 70 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Cliquez le petit triangle… 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 !) Bref aperçu sur les objets 71 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 4 Utiliser la boucle « for i in objet » : La boucle « for-in » parcourt les éléments énumérables : <script type="text/javascript"> "use strict"; 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 : <script type="text/javascript"> "use strict"; let a = {70:89, Qv:80, C8:"58", "76":76} console.log(a) console.dir(Object.entries(a)) </script> Bref aperçu sur les objets 72 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V 6 Lister les « keys » dans une Arrays : <script type="text/javascript"> "use strict"; 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 » : <script type="text/javascript"> "use strict"; let a = {70:89, Qv:80, C8:"58", "76":76} console.log(a) console.dir(Object.values(a)) </script> Bref aperçu sur les objets 73 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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} Bref aperçu sur les objets 74 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 » : <script type="text/javascript"> "use strict"; 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) Bref aperçu sur les objets 75 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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)); console.log("=".repeat(35), "\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)); console.log("=".repeat(35), "\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, {}, _=>{}]) Bref aperçu sur les objets 76 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V ); console.log("=".repeat(35), "\nObject.entries with Strings\n","=".repeat(34)); // Mais voyez ceci : console.log('Object.entries("pili^2")= ', Object.entries("pili^2")); // Et aussi ceci : console.log('Object.keys("pili^2") ', Object.keys("pili^2")); // Mais voyez ceci : console.log('Object.values("pili^2") =', Object.values("pili^2")); console.log(iObj); console.log("=".repeat(35), "\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)); console.log("=".repeat(35), "\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)); Bref aperçu sur les objets 77 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V console.log("=".repeat(35), "\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)); console.log("=".repeat(35), "\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 : Bref aperçu sur les objets 78 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu Bref aperçu sur les objets JavaScript Tome-V 79 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu Bref aperçu sur les objets JavaScript Tome-V 80 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Comment trier les éléments d’un objet : <script type="text/javascript"> "use strict"; 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 63 ci-dessus. Exécution avec Firefox : Avec Yandex : Bref aperçu sur les objets 81 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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. <script type="text/javascript"> "use strict"; 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); console.dir(o.date); </script> 1. Object . delete ( o.prop ) Bref aperçu sur les objets 82 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Supprime/retire une propriété d’un objet. <div class="cDiv"></div> <script type="text/javascript"> "use strict"; var o = {j:01 , date:Date.now() , date2:Date.now}; d = document.querySelector(".cDiv") console.dir(o); console.dir(o.date); d.innerHTML += `o.date = ${o.date}<br>`; delete o.date; // Sans objet préfixe ! console.dir(o); console.dir(o.date); 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 : Bref aperçu sur les objets 83 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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). <script type="text/javascript"> "use strict"; var o = {j:01 , date:Date.now() , date2:Date.now}; console.dir(o); console.dir(o.date); </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 ? Bref aperçu sur les objets 84 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 2. JavaScript Tome-V Object . preventExtensions ( o ) Empêche toute extension d’un objet. <script type="text/javascript"> "use strict"; var o = {j:01 , date:Date.now() , date2:Date.now}; console.dir(o); console.dir(o.date); 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 : Bref aperçu sur les objets 85 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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. <script type="text/javascript"> "use strict"; var o = {j:01 , date:Date.now() , date2:Date.now}; console.dir(o); // Object { j: 1, date: 1543657020586, date2: now() } console.dir(o.date); // 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; console.dir(o.date); // 1543657114540 Bref aperçu sur les objets 86 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu // // // // // 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”). <script type="text/javascript"> "use strict"; var o = {j:01 , date:Date.now() , date2:Date.now}; 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. <script type="text/javascript"> "use strict"; var o = {j:01 , date:Date.now() , date2:Date.now}; console.dir(Object.isExtensible(o)); // true Object.preventExtensions(o); console.dir(Object.isExtensible(o)); // false </script> Bref aperçu sur les objets 87 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 6. JavaScript Tome-V Object . isFrozen ( o ) Détermine si un objet est gelé (“frozen”). <script type="text/javascript"> "use strict"; var o = {j:01 , date:Date.now() , date2:Date.now}; console.dir(Object.isFrozen(o)); // false Object.freeze(o); console.dir(Object.isFrozen(o)); // true </script> Quelques autres méthodes : Object . is ( ) : <script type="text/javascript"> "use strict"; 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 : Bref aperçu sur les objets 88 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V <script type="text/javascript"> "use strict"; let O = {a: 125, b: "Eyenga bolamu"}; var copy = Object.create( Object.getPrototypeOf(O), Object.getOwnPropertyDescriptors(O) ); console.log(O); console.log(copy); </script> <script type="text/javascript"> "use strict"; 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 <script type="text/javascript"> "use strict"; 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 Bref aperçu sur les objets 89 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V console.log(new O2 instanceof O1); // => false console.log(new O1 instanceof O2); // => true console.log(new O1 instanceof O1); // => true </script> Bref aperçu sur les objets 90 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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. <script type="text/javascript"> "use strict"; 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 ». <script type="text/javascript"> "use strict"; let a = []; let o = new Object(); Bref aperçu sur les objets 91 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V a[0]="Dummy",a[1]="Fail",a[2]="Tercio"; o[0]="Dummy",o[1]="Fail",o[2]="Tercio"; console.log(Object.getOwnPropertyDescriptors(a)); console.log(Object.getOwnPropertyDescriptors(o)); </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 : <script type="text/javascript"> "use strict"; 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(Object.entries(a)); Bref aperçu sur les objets 92 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 ( ) » : <script type="text/javascript"> "use strict"; 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> Bref aperçu sur les objets 93 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Avec « Array . map ( ) » : <script type="text/javascript"> "use strict"; 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> <script type="text/javascript"> "use strict"; console.log( Array.from( Object.values({a:17, b:5, c:95.3, d: 475}) ) Bref aperçu sur les objets 94 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V ); </script> Bref aperçu sur les objets 95 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V L’objet Window : <script type="text/javascript"> "use strict"; 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- Bref aperçu sur les objets 96 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 : <script type="text/javascript"> "use strict"; 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- Bref aperçu sur les objets 97 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 | Bref aperçu sur les objets 98 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V lookupNamespaceURI | isDefaultNamespace | insertBefore | appendChild | replaceChild | removeChild | addEventListener | removeEventListener | dispatchEvent | Navigator : <script type="text/javascript"> "use strict"; 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 | Bref aperçu sur les objets 99 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V Kinshasa, le vendredi 31 mai 2019 (6:28:07 PM6:28 ). 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 : Bref aperçu sur les objets 100 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 Bref aperçu sur les objets 101 / 102 vendredi, 31. mai 2019 J.D.B. DIASOLUKA Nz. Luyalu 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 Bref aperçu sur les objets 102 / 102 vendredi, 31. mai 2019