javascript tome v - this

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JAVASC RI PT (Programmation Internet) VOL. V
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
CHAPITRE 11 : « this » dans différents contextes :
L’objet pointé par « this » varie selon son environnement englobant
( espace global, fonction ordinaire, fonction fléchée, élément HTML,.. ),
et son contexte (« mode sloppy » ou « mode strict ») = .
Quelque soit le mode ( strict ou sloppy ) « this » dans une instance
(telle que défini dans le constructeur) représente l’instance.
I. En mode STRICT, « this » dans une fonction représente undefi-
ned .
<script type="text/javascript"> "use strict";
// En MODE STRICT,
// this dans une fonction ordinaire
// repré sente l'objet global widonw.
function o(p){
///////// this.prop=45;
// TypeError: this is undefined test.html:6:5
console.log('"',this,'"');
console.log(this===window);
console.log('"',p,'"');
}
o();
/*
" undefined " test.html:8:5
false test.html:9:5
" undefined " test.html:10:5
*/
let io=new o(this);
/*
" Object { } " test.html:8:5
false test.html:9:5
" Window ... " test.html:10:5

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 2 / 98 mardi, 2. octobre 2018
*/
</script>
II. En mode STANDARD, « this » dans une fonction représente
l ’objet global window . Mais pendant la définition des propriétés
d’une fonction, « this » représente le constructeur et, dans une
instance, il représente l’instance.
<script type="text/javascript">
// En MODE STANDARD,
// this dans une fonction ordinaire
// repré sente l'objet global widonw.
function o(p){
this.prop=45;
console.log('"',this,'"');
console.log(this===window);
console.log('"',p,'"');
}
o();
/*
" Window " test.html:7:5
true test.html:8:5
" undefined " test.html:9:5
*/
let io=new o(this);
/*
" Object { prop: 45 } " test.html:7:5
false test.html:8:5
" Window ... " test.html:9:5
*/
</script>
III. Dans une instance , « this » représente TOUJOURS l’instance :
<script type="text/javascript"> "use strict";
// this dans une instanc repré sente
// TOUJOURS un poineur sur l'instance.
function o(p){
this.prop=45;
}

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 3 / 98 mardi, 2. octobre 2018
let io=new o();
console.log(io.prop)
let fdummy=p=>p.prop=100;
// fdummy modifie la valeur de prop
// de l'objet lui envoyé .
io.df=function(){fdummy(this)};
// Dé finition d'une méthode de io qui
// appelle fdummy en lui passant io
// via this.
io.df(); // appel de la mé thode io.df()
console.log(io.prop)
// affiche la nouvelle valeur de io.prop.
</script>
IV. Dans une fonction fléchée (expression de fonction) et dans un
littéral d’objet « this » représente TOUJOURS l’ objet global win-
dow quelque soit le mode :
<script type="text/javascript"> "use strict";
let fdummy=_=>console.log(this);
fdummy();
let o={
fdummy2:_=>console.log(this)
} // littéral d’objet
o.fdummy2();
</script>
V. Dans une fonction non expression de fonction :
<script type="text/javascript"> "use strict";
let fdummy=_=>console.log(this);
// Window {
// frames: Window, postMessage: ƒ, blur: ƒ,
// focus: ƒ, close: ƒ, …}
fdummy();

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 4 / 98 mardi, 2. octobre 2018
// Fonction non expression de fonction
function fdummy2(){
console.log(this);
// undefined si "use strict";
// Si mode standard :
// Window {frames: Window, postMessage: ƒ,
// blur: ƒ, focus: ƒ, close: ƒ, …}
}
fdummy2();
let o=function(){
console.log(this)
/*
1er o {}
A fdummy3: _=>console.log(this)
B __proto__:Object
*/
this.fdummy3=_=>console.log(this)
/*
1er o {fdummy3: ƒ}
A fdummy3: _=>console.log(this)
B __proto__:Object
*/
}
let i=new o();
i.fdummy3();
let o4=new Function()
o4.prototype.fdummy4=_=>console.log(this)
// Window {frames: Window, postMessage: ƒ,
// blur: ƒ, focus: ƒ, close: ƒ, …}
let i4=new o4();
i4.fdummy4();
(function(){console.log(this)})();
// undefined si "use strict":
// Si mode normal :
// Window {frames: Window, postMessage: ƒ,
// blur: ƒ, focus: ƒ, close: ƒ, …}
</script>

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
La variable « this » 5 / 98 mardi, 2. octobre 2018
VI. Dans une class , « this » représente le casse-tête qui suit selon la
nature de la méthode ( static ou non) : Dans une méthode non
static de class, this représente la classe en tant que objet . Dans
une méthode static this représente la classe en tant que classe .
<script type="text/javascript"> "use strict";
class uneClass {
nMeth() { return this; }
static sMeth() { return this; }
// Ne peut étre appelé que du sein du corps de la
classe.
}
var obj = new uneClass();
console.log(obj.nMeth());
// uneClass {} [YANDEX]
// Object { } [FIREFOX]
///////// obj.sMeth();
// TypeError:
// obj.sMeth is not a function [FIREFOX]
// Uncaught TypeError:
// obj.sMeth is not a function [YANDEX]
var nMeth = obj.nMeth;
console.log(nMeth()); // undefined [FIREFOX] [YANDEX]
var sMeth = obj.sMeth;
///////// sMeth(); // undefined
// TypeError: sMeth is not a function [FIREFOX]
// Uncaught TypeError: sMeth is not a function [YANDEX]
console.log(uneClass.sMeth());
// class uneClass [YANDEX]
// function uneClass() [FIREFOX]
var sMeth = uneClass.sMeth;
console.log(sMeth()); // undefined [FIREFOX] [YANDEX]
</script>
Avec YANDEX :
14:51:19.978 test.html:8 notreClass {}
1er notreClass {}
A __proto__:
I constructor: class notreClass