javascript tome xvii - Prototype

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JAVASCRIPT (Programmation Internet) VOL. V
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
CHAPITRE 7 : LE PROTOTYPE :
Le PROTOTYPE d’un objet est la propriété (méthode) native de cet
objet qui stocke toutes les valeurs par défaut des propriétés et méthodes
de cet objet en tant que parent, quand la propriété ou la méthode n’est
pas définie dans l’instance. Le prototype est initialement vide au mo-
ment de la construction de l’objet. Pour définir des propriétés pour cet
objet ou lui en ajouter d’autres, il suffit de les ajouter via son prototype,
et automatiquement ces nouvelles propriétés seront partagées avec toutes
les instances de cet objet. Bien entendu on peut aussi ajouter directement
de nouvelles propriétés à l’objet ou l’une ou l’autre de ces instances, tout
simplement en omettant le mot prototype dans la définition de la nou-
velle propriété, mais dans ce cas cette nouvelle propriété de l’objet ne
sera pas membre du prototype de l’objet et donc ne sera pas héritable (ou
partageable avec les instances), donc strictement personnel à ce cons-
tructeur ou cette instance.
<script type="text/javascript">
cl=console.log
obj_Const=function(pnom,pdaten){
this.K=1000*3600*24*365.2475;
this.nom=pnom;
this.daten=pdaten;
this.age=function(){
return((new Date()-pdaten)/this.K)
}
}
i=new obj_Const("André",new Date("August 1953 11"));
for(i in obj_Const.prototype)cl(i);
cl("Age = "+i.age());
cl("AJOUT DE PROTOTYPES")
obj_Const.prototype.riche=true; // Ajout via prototype

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
Le Prototype 2 / 18 mercredi, 31. octobre 2018
obj_Const.sage=false; // Ajout direct (ne se r é pand pas)
obj_Const.prototype.nbfemmes=35; // Ajout via prototype
obj_Const.prototype.polygame=function(){ // ---"---
if(this.nbfemmes>1)return true;
else return false;
};
cl("LISTE DES PROPRIÉTÉS")
cl("i.nom="+i.nom);
cl("i.age="+i.age());
cl("i.sage="+i.sage);
cl("i.riche="+i.riche);
cl("i.nbfemmes="+i.nbfemmes)
cl("i.polygame="+i.polygame())
cl("\nLES PROTOTYPES AJOUTÉS")
for(i in obj_Const.prototype)
cl("==> "+i+" = "+obj_Const.prototype[i]);
cl(obj_Const.prototype);
cl(i.prototype);
cl(obj_Const.prototype.constructor);
cl(obj_Const.__proto__.constructor);
cl("obj_Const.prototype.constructor.length = "+
obj_Const.prototype.constructor.length);
</script>
Exécution :
Age = 64.3917223791744
AJOUT DE PROTOTYPES
LISTE DES PROPRIÉTÉS
i.nom=André
i.age=64.39172237923778
i.sage=undefined
i.riche=true
i.nbfemmes=35
i.polygame=true
LES PROTOTYPES AJOUTÉS
==> riche = true
==> nbfemmes = 35
==> polygame = function(){ // ---"---
if(this.nbfemmes>1)return true;
else return false;
}
Object { riche: true, nbfemmes: 35, polygame:
obj_Const.prototype.polygame(), … }
undefined
function obj_Const()
function Function()

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
Le Prototype 3 / 18 mercredi, 31. octobre 2018
obj_Const.prototype.constructor.length = 2
Ajout d’un prototype à un objet :
<script type="text/javascript">
"use strict";
Array.prototype.remVal = function(val) {
console.log(["Louis", "Morena", "Keriyza", "Louis"]);
for (var i = 0, l=this.length; i < l; i++) {
if (this[i] === val) {
this.splice(i, 1);
i--;
}
}
return this;
}
console.log( ["Louis", "Morena", "Keriyza", "Lou-
is"] .remVal(2));
</script>
Exécution :
(4) ["Louis", "Morena", "Keriyza", "Louis"]
(2) ["Morena", "Keriyza"]
Pour différents modes de création d’objet :
<script type="text/javascript">
"use strict";
var dObj = function(){
}
var iObj1 = new dObj();
//// TypeError: iObj.prototype is undefined
// iObj1.prototype.fprot1= _=> con-
sole.log("iObj1.prototype.fprot1");
iObj1.__proto__.fprot2= _=> console.log("Ds
iObj1.__proto__.fprot2");
iObj1.fprot2();
iObj1.fprot3= function(){ console.log("Ds
iObj1.fprot3"); }
iObj1.fprot3();
var iObj2 = new Object();

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
Le Prototype 4 / 18 mercredi, 31. octobre 2018
//// TypeError: iObj2.prototype is undefined
// iObj2.prototype.fprot4= _=> con-
sole.log("iObj2.prototype.fprot4");
iObj2.__proto__.fprot5= _=> console.log("Ds
iObj2.__proto__.fprot5");
iObj2.fprot5();
iObj2.fprot6= function(){ console.log("Ds
iObj2.fprot6"); }
iObj2.fprot6();
var iObj3 = {};
//// TypeError: iObj3.prototype is undefined
// iObj3.prototype.fprot7= _=> con-
sole.log("iObj3.prototype.fprot7");
iObj3.__proto__.fprot8= _=> console.log("Ds
iObj3.__proto__.fprot8");
iObj3.fprot8();
iObj3.fprot9= function() { console.log("Ds
iObj3.fprot9"); }
iObj3.fprot9();
</script>
Exécution :
Ds iObj1.__proto__.fprot2
Ds iObj1.fprot3
Ds iObj2.__proto__.fprot5
Ds iObj2.fprot6
Ds iObj3.__proto__.fprot8
Ds iObj3.fprot9
La chaîne du prototype :
JavaScript est un langage basé sur le prototype (prototype-based lan-
guage). On préfère même dire que c’est un système basé sur la déléga-
tion (delegation-based system), c’est-à-dire que chaque objet a une
chaîne de prototype (prototype chain) :
Quand vous tentez d’accéder à une propriété ou méthode d’un objet (en
cours de création ou d’instanciation ou une instance d’objet), il se passe
ceci : 1. Si cette propriété existe comme telle dans l’objet en soi, elle est
récupérée ; 2. Si cette propriété n’existe pas en soi dans cet objet, elle est

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
Le Prototype 5 / 18 mercredi, 31. octobre 2018
cherchée dan le prototype de l’object ; le prototype est un objet délégué
(delegate object) c’est-à-dire que la recherche de la propriété est délé-
guée à l’objet « prototype » (prototype object) qui est une propriété de
l’objet manipulé. Si l’objet prototype possède la propriété cherchée,
celle-ci est récupéré, sinon elle est éventuellement cherchée dans le pro-
totype du prototype, 3... Ainsi de suite la recherche se poursuit (chaîne
du prototype) jusqu’à l’objet racine souvent le Object (avec « O » ma-
juscule) et éventuellement son prototype (prototype de l’objet racine
=root prototype) souvent le prototype de Object « Object.prototype ».
<script type="text/javascript"> "use strict";
// Constructeur AVEC SA PROPRE toString().
function dObj1() {
this.toString=_=> "... dans dObj1.toString()";
return("Un Objet retourne sa propre copie.")
}
console.log(dObj1);
// function dObj1()
console.log(""+dObj1);
/* function dObj1() {
this.toString=_=> "... dans dObj1.toString()";
return("Un Objet retourne sa propre copie.")
}
*/
let iObj1=new dObj1();
// iObj1 n'a pas de toString() propre
// => cha î ne de prototype vers son constructeur
// dObj1.toString() ou dObj1.prototype.toString()
console.log(iObj1);
// Object { toString: toString() }
console.log(""+iObj1);
// ... dans dObj1.toString()
console.log("*AAAAA* "+dObj1);
/* *AAAAA* function dObj1() {
this.toString=_=> "... dans dObj1.toString()";
return("Un Objet retourne sa propre copie.")
}
*/
console.log("*AAAAA* "+dObj1.__proto__.toString());
// *AAAAA* function () {}
console.log("*BBBBB* "+iObj1);