Académique Documents
Professionnel Documents
Culture Documents
SCRIPTS
CHAPITRE 7 : LE PROTOTYPE :
// Deux Instanciations
let iObj1 = new dObj();
let iObj_1 = new dObj();
/* 1 */
// Instances iObjx [de dObj] n'ont pas encore de prototype.
// On doit leur en créer.
// iObj1.prototype.fprot11= _=>
//-- FIREFOX: TypeError:
//-- iObj.prototype is undefined
////
//== YANDEX: Uncaught TypeError:
//== Cannot set property 'fprot11' of undefined
//== at test.html:21
// console.log("iObj1.prototype.fprot11");
console.log(iObj1.prototype); // undefined
console.log(Object.getPrototypeOf(iObj1));
// Avec Firefox:
// Object { … }
// constructor: function dObj()
// constructor: dObj()
// length: 0
// name: "dObj"
// prototype: Object { … }
// <prototype>: function ()
// <prototype>: Object { … }
//
// Avec Yandex:
// {constructor: ƒ}
// constructor: ƒ ()
// arguments: (...)
// caller: (...)
// length: 0
// name: "dObj"
// prototype: {constructor: ƒ}
// __proto__: ƒ ()
// [[FunctionLocation]]: test.html:8
// [[Scopes]]: Scopes[2]
// __proto__: Object
console.log(iObj1.prototype); // undefined
console.log(iObj_1.prototype); // undefined
/* 2 */
// AJOUT DE PROTOTYPE à L'INSTANCE iObj1 QUI
// n'en a pas encore cfr ci-haut.
function fprot1(){ Math.PI; }
Object.setPrototypeOf ( iObj1, fprot1);
/* 3 */
// Ajout propriété propre à l'instance iObj_1
iObj_1.fmetho = function(){
console.log("Ds iObj_1.fmetho");
}
iObj_1.fmetho(); // Ds iObj_1.fmetho
Avec Firefox :
********************************** test.html:4:3
Avec Yandex:
<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)
}
}
cl("AJOUT DE PROTOTYPES")
obj_Const.prototype.riche=true; // Ajout via prototype
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);
Le Prototype en Java/Ecma-Script 5 / 38 mardi, 22. janvier 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
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
<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--;
Le Prototype en Java/Ecma-Script 6 / 38 mardi, 22. janvier 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
}
}
return this;
}
con-
sole.log(["Louis", "Morena", "Keriyza", "Louis"].remVal(2));
</script>
Exécution :
/* 1 */
console.log(
"***AVEC CONSTRUCTEUR, var dObj = function(){}"
)
console.log(Object.getPrototypeOf(dObj));
// Avec FireFox : Object { … }
// Avec Yandex : {constructor: ƒ}
// ()
// apply: function apply()
// arguments: null
// bind: function bind()
// call: function call()
console.log(iObj1.prototype); // undefined
console.log(dObj.prototype);
// Object { fprot11: fprot11(), fprot12: fprot12(), … }
console.log(Object.getPrototypeOf(dObj));
// function ()
// apply: function apply()
// arguments: null
// bind: function bind()
// call: function call()
// caller: null
// constructor: function Function()
// length: 0
// name: ""
// toSource: function toSource()
// toString: function toString()
// Symbol(Symbol.hasInstance):
// function Symbol.hasInstance()
// <prototype>: Object { … }
Object.defineProperty(iObj1, "fprot13", {
value:
function() {
console.log("1b. Ds iObj1.fprot13")
},
enumerable: false,
writable: false,
configurable: false
});
iObj1.fprot13(); // 1b. Ds iObj1.fprot13
console.log(iObj1_.fprot13); // undefined
/* 2 */
console.log(dObj2.prototype); // undefined
/* 3 */
console.log(
"***AVEC LITTERAL D'OBJET (HASH), var iObj3 = {}"
)
iObj3_.fprot34= function(){
console.log("3c. Ds iObj3_.fprot34");
}
iObj3_.fprot34(); // 3c. Ds iObj3_.fprot34
/* 4 */
console.log(
"***AVEC OBJECT.CREATE, let pObj = _ => {}"
)
console.log(iObj4.prototype); // undefined
console.log(dObj4.prototype); // undefined
console.log(Object.getOwnPropertyDescriptors(dObj4))
// Object { fprot42: {…}, length: {…}, name: {…} }
console.log(Object.getOwnPropertyDescriptors(iObj1))
// Object { fprot13: {…} }
// AVEC FIREFOX
// AVEC YANDEX
Exécution :
Object.defineProperty(objet, 'newProp',
{ // Property Descriptor
value: v,
configurable: true,
enumerable: true,
writable: true
}
);
console.dir(objet);
console.dir(Object.getOwnPropertyDescriptors(objet));
</script>
console.dir(objet);
console.dir(Object.getOwnPropertyDescriptors(objet));
console.dir(objet);
console.dir(Object.getOwnPropertyDescriptors(objet));
</script>
La chaîne du prototype :
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
cherchée dans 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,
console.log(dObj1);
// function dObj1()
console.log(""+dObj1);
/* function dObj1() {
this.toString=_=> "... dans dObj1.toString()";
return("Un Objet retourne sa propre copie.")
}
*/
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("*DDDDD* "+iObj1.__proto__.toString());
// *DDDDD* [object Object]
console.log(dObj2);
// function dObj2()
console.log(""+dObj2);
/* function dObj2() {
// Pas de propriété toString() propre
}
*/
console.log("*AAAAA* "+dObj2);
/* *AAAAA* function dObj2() {
// Pas de propriété toString() propre
}
*/
console.log("*AAAAA* "+dObj2.__proto__.toString());
// *AAAAA* function () {}
console.log("*BBBBB* "+iObj2);
// *BBBBB* [object Object]
console.log("*DDDDD* "+iObj2.__proto__.toString());
Le Prototype en Java/Ecma-Script 23 / 38 mardi, 22. janvier 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
// *DDDDD* [object Object]
console.log(dObj3);
// function dObj3()
console.log(""+dObj3);
// function dObj3() {}
console.log("*AAAAA* "+dObj3);
// *AAAAA* function dObj3() {}
console.log("*AAAAA* "+dObj3.__proto__.toString());
// *AAAAA* function () {}
console.log("*BBBBB* "+iObj3);
// *BBBBB* undefined
console.log("*DDDDD* "+iObj3.__proto__.toString());
// *DDDDD* undefined
Le prototype est comme une banque des propriétés par défaut de l’objet
et surtout ses instances, pouvant donc être partagées avec les descen-
dants (instances) de cet objet. Mais en plus des propriétés du prototype,
Le Prototype en Java/Ecma-Script 27 / 38 mardi, 22. janvier 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
l’objet peut avoir ses propriétés propres non stockées dans le prototype
(propriétés non membres de son prototype).
En d’autres termes :
Toute propriété du prototype d’un objet appartient aussi à cet objet, mais
certaines propriétés de l’objet ne sont pas nécessairement propriétés de son
prototype (et donc sont non héritables), une instance d’objet pouvant aussi
avoir des « ownProperties ».
oParent.prototype.distance={
par_avion:"1000 km",
par_route:"2500km"
}
console.log(iObjet1.distance);
Exécution du programme :
console.log(iObjet1.distance.par_avion);
console.log(iObjet2.distance.par_avion);
console.log(iObjet1.distance.par_route);
console.log(iObjet2.distance.par_route);
console.log(iObjet1.distance.par_avion) 1000 km
debugger eval code:1:1
undefined
console.log(iObjet2.distance.par_avion) 1000 km
console.log(iObjet1.distance.par_route) 2500km
debugger eval code:1:1
undefined
console.log(iObjet2.distance.par_route) 2500km
debugger eval code:1:1
undefined
iObjet2.distance={
par_avion : "1750 km",
par_route : "3500 km"
}
console.log(iObjet1.distance.par_avion); // 1000 km
console.log(iObjet2.distance.par_avion); // 1750 km
Le tout donne :
oParent.prototype.distance={
par_avion:"1000 km",
par_route:"2500km"
}
console.log(iObjet1.distance.par_avion); // 1000 km
console.log(iObjet2.distance.par_avion); // 1000 km
console.log(iObjet1.distance.par_route); // 2500km
console.log(iObjet2.distance.par_route); // 2500km
console.log(iObjet1.distance.par_avion); // 1000 km
console.log(iObjet2.distance.par_avion); // 1000 km
console.log(iObjet1.distance.par_route); // 3500 km
console.log(iObjet2.distance.par_route); // 3500 km
iObjet2.distance={
par_avion : "1750 km",
par_route : "3500 km"
}
console.log(iObjet1.distance.par_avion); // 1000 km
console.log(iObjet2.distance.par_avion); // 1000 km
console.log(iObjet1.distance.par_route); // 3500 km
console.log(iObjet2.distance.par_route); // 3500 km
</script>
<script type="text/javascript">
'use strict';
// Fonction ordinaire
function dObj(){
var fdObj = function(){
return("Insiding dObj.fdObj")
}
}
console.log(dObj)
</script>
function dObj()
dObj()
length: 0
name: "dObj"
prototype: Object { … }
__proto__: function ()
dObj()
length: 0
prototype: {…}
constructor: function dObj()
__proto__: Object { … }
__proto__: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
caller: null
constructor: function Function()
isGenerator: function isGenerator()
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance): undefined
__proto__: Object { … }
prototype: Object { … }
prototype: {…}
constructor: function dObj()
__proto__: {…}
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
Le Prototype en Java/Ecma-Script 33 / 38 mardi, 22. janvier 2019
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
toLocaleString: function toLocaleString()
toSource: function toSource()
toString: function toString()
unwatch: function unwatch()
valueOf: function valueOf()
watch: function watch()
Nous pouvons aussi y voir les autres propriétés du prototype de cet Ob-
ject parent du prototype de dObj :
Il n’est pas nécessaire de retenir par coeur cette liste partielle (mais il
faut connaître leur existence), vous pouvez obtenir la liste exhaustive à
la console du navigateur en tapant
« Object.getOwnPropertyNames(window) ».
Baidu en liste 591, Maxthon 753, UC Browser 771, Torch 781, FireFox
794, Yandex 807, Google Chrome 808, Vivaldi 809, Opera 813, Brave
814, UR Brower 831,...
__proto__: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
caller: null
constructor: function Function()
constructor: Function()
length: 1
name: "Function"
__proto__: function ()
__proto__: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
caller: null
constructor: function Function()
isGenerator: function isGenerator()
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance): undefined
__proto__: Object { … }
Méthodes :
function apply(), function bind(), function call(), func-
tion Function(), function isGenerator(), function to-
Source(), function toString(),
Notre fonction dObj() n’a aucun prototype même pas le prototype par
défaut, donc aucune propriété initiale. Mais il a un __proto__ qui est le
même constructeur que la forme sans paramètres.
Mots-clés :
diasfb@mail2world.com